HOME > 開発者向けBLOG >  2011 November

Technology Note 開発者向けBLOG

開発者向けBLOG アーカイブ November, 2011

高さを揃える

ブロック要素をCSSだけで最も高いものに揃える方法をご紹介いたします。 横並びにするブロック要素のマージンボトムにパディングのプラス値と同じ値を、パディングボトムにマージンのマイナス値と同じ値を指定します。 div.box_area div { float: left; width: 200px; margin: 0 40px -32767px 0; /* プラス値と同じ値を指...

続きを読む

高さが違う画像置換

高さが違う画像をhover時に表示する方法をご紹介いたします。 下記のような隣り合う、高さが違う画像を用意します。 a要素の背景で表示します。1行目の「ol.diff_navi li a」でa要素に対して通常時に表示させる画像の幅、高さが大きい方の画像のheightを指定し、「background: url(bg_diff_navi.gif) no-repeat;」で使用する画...

続きを読む

min-heightをIE6で実現

min-height(高さの最小値)をCSSのみでIE6でも実現する方法をご紹介いたします。 下記のソースはサンプルで使用しているCSSで、min-heightに直接関係している部分だけを抜粋しています。 2行目で記述されているのは、普通の「min-height」プロパティです。3行目の「height: auto !important;」は4行目の「height: 150px;...

続きを読む

半角英数字で突き抜ける現象を防止

半角英数字が連続した場合に、突き抜ける現象を防止する方法をご紹介いたします。 まず、ブロック要素である「div.box」に幅を指定します。div内にあるp要素の「p.beak」に「word-wrap: break-word;」プロパティを指定します。「word-wrap」は単語の途中で改行するかどうかを指定するもので、「break-word」で改行するようにしています。 div...

続きを読む

PAGETOP