HOME > 開発者向けBLOG

Technology Note 開発者向けBLOG

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」で改行するようにしています。 1 2...

続きを読む

背景をページの左右にどこまでも伸ばす

背景色(画像)をページの左右に伸ばす方法をご紹介いたします。 背景を横に伸ばすだけならそれほど難しくはありませんが、大抵は幅を指定して固定する要素があると思いますので、固定する要素を含んだ構成で作成します。 大きくわけて2つの要素で構成します。 背景色(画像)を指定するdiv 幅を指定し、固定するdiv 「div.content_area」では「background: #FF5...

続きを読む

ボックス内で下配置

ボックスの中で、ある要素を常に下表示させる方法をご紹介いたします。 大きくわけて3つの要素で構成します。 大枠部分 左のテキスト部分 右の要素を常に下に表示させる部分 まず、大枠部分にあたる「div.relative_box 」を「position: relative;」で相対指定します。 1 2 3 div.relative_box { position: rela...

続きを読む

1文字のぶら下がりインデント

1文字のぶら下がりインデントをご紹介いたします。 注釈「※」の行の後は、通常1文字分のインデントをされることが多いと思います。その表現を実現する際、テーブル要素、フロートをかけるなどの方法がいくつかありますが、全てのブラウザに対して完璧ではないものの、CSSで実現することができます。 ul要素とp要素を例にしてみます。ul要素では「ul.hang」に「width: 300px;...

続きを読む

PAGETOP