cssクラスタで偶数番目や奇数番目、3の倍数などに適用させる方法

便利なcssクラスタ。
偶数番目や奇数番目などの要素だけに適用したり、3の倍数の要素だけに適用したりできる。
よくリストタグで横並びにするときに端だけmarginを0にしたりとか使える。

ulタグとかで3の倍数番目のliだけmarginをなくすといった方法

li:nth-child(2n) { /* 偶数番目*/
   margin:0px;
}

li:nth-child(2n+1) {  /* 奇数番目*/
   margin:0px;
}

li:nth-child(3n) {   /* 3の倍数 */
   margin:0px;
}

引用タグの引用符をcssで完璧にデザインする方法

引用タグの引用符「”」をcssで表現する方法をメモ。

ブログだと引用タグ(blockquote)を使うことは多いんじゃないかなと思いますが画像でデザインしているサイトを多くみます。
ですがレスポンシブサイトを作成するときはcssで作ってしまったほうが利点が大きいと思います。
“引用タグの引用符をcssで完璧にデザインする方法”の続きを読む

cssのpositionでdivの範囲外を指定した場合に見切れて表示されない問題の修正点

wordpressの新しいテンプレート「twentytwelve」をカスタマイズしていた時に出会った問題ですが、ページの再外側のdivの範囲外を指定すると表示されない問題があり、なんでだろうと思ってcssを見直してみると。。。
“cssのpositionでdivの範囲外を指定した場合に見切れて表示されない問題の修正点”の続きを読む