CSS
最近よく使うEmmet記法
少し長めの記法も一度覚えてしまえば使う頻度がかなり上がってきたのでご紹介。 fsz10px → font-size: 10px; ff → font-family tac → text-align: center; po…FontAwesomeの応用利用
サンプルはこちら。 See the Pen ElCvH by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. Webフォントアイコンとして人気のFontAwesomeを規程のクラス…Sassではじめる擬似オブジェクト指向型CSS
「オブジェクト指向型CSS」といっても新しい記法などではなく、CSSの組み方の概念を指します。CSSの効率化を考えている人は無意識的にすでにやっているかも知れません。 たとえば下記のようなCSSがあったとします。 .bo…
最後からN番目にスタイルを指定するCSSセレクタ「:nth-last-of-type(N)」
li:nth-last-of-type(2){ font-weight:bold; } <ul> <li>スタイルは適用されません。</li> <li>スタイルは適用されま…IE7でもinline-blockを使う
IE7ではinline-blockが効きませんので、IE7にも対応させたい場合CSSを下記のように指定する必要があります。その他細かい調整はIE7用ハックの*:first-child+html{~}ハックを使うことで対応…N個で繰り返すCSSセレクタ「:nth-child(Nn+1)」
div{ margin-left:10px; } div:nth-child(3n+1){ margin-left:0; } <div>margin-left:0;が適用されます。</div> &…N個にスタイルを指定するセレクタ「:nth-child(N)」
:nth-child(N){ background:#CCCCCC; } N個目に背景色が適用されます。指定は数字の他に「odd（奇数）」「even（偶数）」も指定することができます。