CSS

nth-child() 疑似クラス

任意の順番の要素を指定することができる nth-child() 疑似クラスを使用し、コードをスマートにしましょう! 偶数の要素に CSS を適用 li:nth-child(2n) または li:nth-child(even) 奇数の要素に CSS を適用 li:nth-child(2n+1) または li:nth-child(odd) 指定数ごとの要素に CSS を適用 li:nth-child(指定数n) 指定スタート数から指定数ごとの要素に CSS を適用 li:nth-child(指定数n+指定スタート数) 指定数の要素に CSS を適用 li:nth-child(指定数) 最後から指定数の要素に CSS を適用 li:nth-last-child(指定数) 最初から指定数までの要素に CSS を適用 li:nth-child(-n+指定数) 最後から指定数からの要素に CSS を適用 li:nth-child(n+指定数) 最初の要素に CSS を適用 li:first-child() 最後の要素に CSS を適用 li:last-child()

Published: 2009年12月5日 | Category & Tags: Web サイト制作, | Comment: 0

IE6, IE7 のバグ取りに最も簡単な CSS ハック

イライラする IE のバグ!簡単に解決して、次ぎの作業に取りかかりたいものです。 私は管理するするのが簡単な、以下の方法を使用して対処しています。 IE6 以下に CSS を指定 * html {} IE7 のみに CSS を指定 *:first-child+html {} 一応使用例 * html .your_class { color: #990000; /* IE6 */ } *:first-child+html .your_class { color: #990000; /* IE7 */ }

Published: 2008年11月2日 | Category & Tags: Web サイト制作, | Comment: 0

CSS だけで要素をブラウザの中央に配置

Flash を使わずに CSS で <div> をブラウザの中央に配置する方法 実際に使用した例 » www.ludhaus.com CSS #wrap {    position: absolute;    width: 800px;    height: 600px;    left: 50%;    top: 50%;    margin-left: -400px;    margin-top: -300px; } 注意!margin-left は width の半分 margin-top は height の半分 HTML <div id=”wrap”>    your contents </div>

Published: 2007年8月22日 | Category & Tags: Web サイト制作, | Comment: 0