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

Technology Note 開発者向けBLOG

Webデザイン

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

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

続きを読む

ボックス内で下配置

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

続きを読む

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

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

続きを読む

角丸単色を表現

角丸ボックスの単色を背景画像と背景色で表現する方法をご紹介いたします。 「div.corner_simple_top」、「div.corner_simple_bototm」に共通の幅を指定します。「div.corner_simple_top」では角丸の上部分とテキストの間のスペースを「padding: 12px 0 0;」で調整し、「top」で角丸(上)画像(302×4)をテキ...

続きを読む

角丸を表現

角丸ボックスを背景画像で表現する方法をご紹介いたします。 「div.line_box」、「div.corner_top」、「div.corner_bototm 」に共通の幅を指定します。「div.line_box」は302×1で作成した画像を「repeat-y」で縦にリピートしています。「div.corner_top」では角丸の上部分とテキストの間のスペースを「padding:...

続きを読む

PAGETOP