読者です 読者をやめる 読者になる 読者になる

Web本でCSSとか再勉強

仕事では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では使えないかもとのこと。ま、FirefoxGoogle Chromeで動けば個人的に問題なしw

法則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に適用 */
  ...
}

法則90 画像サイズは黄金比や白銀比を利用する

A4やA3等の日本古来の比率を白銀比というらしい。
1.6:1 (黄金比)
1.4:1 (白銀比)




他にたくさんありますが、僕的に「これはすぐ使えそう」を思ったものをピックアップしてみました。


ちなみにこの本も面白いかも。その内買って見ます。