こんばんわ
DevJamのコータローです。

今回はCSSでの字下げの方法を紹介いたします。
なにも設定していない状態で注意事項とかで頭に※がついていると
改行されたときに

※ほげほげ
ほげほげ

となってしまいますよね。これを簡単に

※ほげほげ
ほげほげ

とする小技です。

字下げしたい箇所に

	text-indent: -1em;
	padding-left: 1em;

を当ててあげればOK

emの数値は当てているフォントとかにもよって変わってくるので
調整して下さい。

では皆様、楽しいGW生活を送って下さい。
コータローでした。

こんばんわ　DevJamのコータローです。

今日は都内、某所の制作会社に潜入しております。
ここでは社内イベントに向け、イベントで使うプログラムを 鋭意制作中であります。

こちらは我がDevJamチームのボス『kaminaly』氏です。
なんだか物々しい環境であります。

2台の液晶にノートPCなんだか、すごそうな機材まで
繋がっております。

画面ないは極秘事項という事で隠させて頂きます。
いったい何が、制作されているのでしょうか・・・

こちらは我がDevJamチームのベテラン『mucho』氏ですね。
こちらもなにやら赤い機材が繋がっており負けず劣らずのGeekさです。

あまり2人の邪魔をすると怒られそうなので
今回のレポートはここまで・・・
また何か最新ニュースがあればまたレポートしたいと思います。

では現場よりコータローがお伝え致しました。

こんばんわ
週末、うまい棒大量購入してこようかしら・・・
コータローです。

さてさて今回はフォームに纏わるCSSです。

皆様、フォームのコーディングって得意ですか？
僕は若干苦手です。特にテキスト部分とフォーム部分が微妙にズレたりしますよね。ムッキー！！！

僕も最近まできっちり合わせることができなくて仕様です。って言ってたりしたのですが
解決できたので、ご紹介

特にずれが気になるのがラジオボタンですよね。
普通に書くとこんな感じ

inputに

vertical-align: middle;

を当ててあげるとこんな感じ

何も無しよりはマシだけどちょっとズレてますよね。
そして今回の解決策
意外と知られておりませんが実はこのvertical-alignのプロパティ
middleとかbottomだけでなく、数値での指定が可能なんです。
ざっとリファレンス載せてるサイト見ましたが、載っていないところが多い
僕が持ってるタグ辞典にも記載がありませんでした。

あとは文字サイズに合わせてemで指定してあげればぴったり並べることが出来ます。
今度は-0.2em当てた画像

ブラウザ間で若干見え方が異なるので厳密に全部のブラウザでぴったり合わせるには
ハックを駆使しなければならないが、初めのズレズレよりはマシですよね。

こんばんわ
devjamのコータローです。

今回はマークアップに役立つサイトをご紹介！

fontSizeの計算って入れ子になっていたりすると
かなり面倒ですよね？
僕がアホなだけ？

そんな時は『Em Calculator』が便利です。
bodyのfontSizeをpxで指定してあげれば
eｍに変換してくれます。
入れ子になっている場合もAdd childボタンで
追加できます。

emでのsize指定はバグがあるので
100倍して%指定してあげるとさらによいかと・・・
emのsize指定のバグの話はまた今度・・・

たまにしか使わない、HTMLタグって使い方忘れてしまったりしませんか？
僕がアホなだけ？

そんな時は『XHTML タグ一覧表示ツール』が便利です。
このタグって

の中で使えたっけ？とかいうときに
ここでサクっと調べられます。

CSSのclass名やid名って結構悩みませんか？
僕がアホなだけ？

そんな時は『CSS HappyLife』の
『もう、class名やid名で悩まないんだからっ！！』というエントリーが便利です。

そのタイトル通り、いろいろなclass名やid名が
纏められています。
使う場所ごとに分類されていますのでとっても便利です。

こんにちわ
devjamのコータローです。

Webサイトを印刷対応にする時、印刷用CSSで
最適化すると思います。

ところが、背景を印刷する場合、ブラウザで背景を印刷する設定をしていないと印刷されない（デフォは設定OFF）
また印刷用に別のヘッダー画像とかを用意する場合（横幅を小さくするなど）うまく印刷されない。

そんな時の技を紹介します。

印刷用CSSで背景を指定したい箇所に
display:list-item;
をあて
list-style-imageで背景画像を指定します。

具体例

<br />
#hoge {<br />
  display: list-item;<br />
  list-style-image: url(hogehoge.jpg);<br />
  list-style-position: inside;<br />
  letter-spacing: -1000em;<br />
  font-size: 1pt;<br />
}<br />

これで背景も印刷されます。