仕事ではWeb関連はまったく触ってないので、Web関連の本を読むと知らないことが多くて面白です。
最近買ったのが「Web標準XHMLT+CSSデザイン」
CSSで気をつけたほうが良いところや、UIの些細なポイント等、Webを仕事にしてる人なら知ってて同然のポイントについて100の法則としてまとめてあります。(僕は知らないことばかりですけどね)
その中でも覚えておきたいものをメモっておきます。
法則20 label要素を利用してフォームを使いやすくする
ラジオボタンやチェックボックスはクリック領域が小さいため少し使いづらいのですが、labelを使って横に表示した文字もクリック領域にできてます。
- 明示的ラベル付け
<input type="radio" name="gender" id="MaleRadio" value="male"/><label for="MaleRadio">男性</label> <input type="rdaio" name="gender" id="FemaleRadio" value="female"/><label for="FemaleRadio">女性</label>
- 暗黙的ラベル付け
<label><input type="radio" name="gender" id="MaleRadio" value="male"/>男性</label>
ただし暗黙的ラベル付けはIEでは使えないかもとのこと。ま、Firefox、Google Chromeで動けば個人的に問題なしｗ
法則82 スクロールバー領域を常に確保してセンタリング位置のズレを避ける
Firefoxだと表示する画面の高さがウィンドウのサイズより小さいと、縦スクロールバーが表示されません。
そのため、表示される場合と比べセンタリングの位置がずれてしまいます。
そこで以下のようなCSSを設定すると、常に縦スクロールバーが表示されます。
html { overflow-y:scroll; }
今までjavascriptで調整したいたんですが、これで楽になります。
ただしoverflow-y、overflow-xはCSS3の草案なので、もしかするとなくなるかも。
法則85 CSS3セレクタを使用してスマートなCSSを記述する
CSS3の一部セレクタが紹介されていました。
a[href^="https"] { /* hrefがhttpsで始まる要素に適用 */ ... } a[href$=".pdf"] { /* hrefがpdfで終わる要素に適用 */ ... } a[href*="sample"] { /* hrefにsampleが含まれる要素に適用 */ ... } div#Hoge p.Foo:nth-child(2n) { /* 親要素ないで2n番目の要素に適用。n = 1 2 3... */ ... } input:checked { /* チェックされているradioやcheckboxに適用 */ ... }
