2008年3月13日
自分の1行CSSのノウハウも多少公開してみる
http://coliss.com/articles/build-websites/operation/css/886.html
http://www.cssglobe.com/post/1392/8-premium-one-line-css-tips
ままあるが、自分が分かりきっている情報が、多くのブックマークを集めているとなんだか複雑な気分。くだらない感情だけど。そういった情報を整理して上手く見せる事に価値があるのだということは分かっちゃいる。
overflow:hidden;、page-break-after:always;なんかは、印刷用のhtml+CSSを書きまくっている私としては常用テクニックだったりするので。
他に1行CSSとして便利なのは、
cursor:pointer;とかが思い浮かぶ。マウスカーソルを手の形にしてくれる指定。リンクじゃないけど、クリックして何か効果を出す要素に指定しおくと効果的。
また、
white-space:nowrap;は、かなり使えます。上のリンクでは、aタグに指定して紹介していますが、個人的に多用しているのが、labelタグへの指定。
<label for="fruit001"><input type="checkbox" value="りんご" id="fruit001" name="fruit">りんご</label>
<label for="fruit002"><input type="checkbox" value="バナナ" id="fruit002" name="fruit">バナナ</label>
<label for="fruit003"><input type="checkbox" value="パイナップル" id="fruit003" name="fruit">パイナップル</label>label{white-space:nowrap;}とか書いておくと、ちゃんとフォームコントロール直後に勝手に改行される事なく、まとまって次の行に移ってくれます。プログラムで配列からフォームアイテムを順次出力させたりする場合にすごく便利。なんで上記CSSは私のデフォルトCSSに入ってます。
そのうち詳しく書くかも。