HOME > 開発者向けBLOG >  Webデザイン

Technology Note 開発者向けBLOG

Webデザイン

ヘッダーとフッターを固定

CSSだけでヘッダーとフッターの位置を固定する方法をご紹介いたします。 ヘッダーとフッターは3行目の「position: fixed;」でスクロールしても位置が固定するようにし、4行目の「top: 0;」、18行目の「bottom: 0;」でそれぞれ上下に表示しています。中央表示は「width: 100%;」プロパティで実現させています。 コンテンツは「overflow: au...

続きを読む

高さを揃える

ブロック要素を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