HOME > 開発者向けBLOG

Technology Note 開発者向けBLOG

角丸単色を表現

角丸ボックスの単色を背景画像と背景色で表現する方法をご紹介いたします。 「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:...

続きを読む

背景をページの下部まで伸ばす

背景色を下部まで要素がない場合でも、下まで伸ばす方法をご紹介します。 通常、ブロック要素のdivタグなどにbackgroundで背景色を指定した場合、要素がある分までしか背景色は伸びません。これをCSSで要素がない場所(下部)まで伸ばしてみます。 ルートである「html」と「body」要素に「height: 100%;」を指定、min-heightに対応していないブラウザ用に「...

続きを読む

左右のカラム間に縦の境界線

左と右どちらのカラムが伸びても、カラム間にある線も同時に伸びる方法をご紹介いたします。 テーブル要素やjavascriptなど、方法はいくつかありますが、ここでは背景画像で実現させてみます。 カラムは3つ使用しています。 大枠(背景画像を使用するカラム) 左カラム 右カラム 「div.border」は左右カラムの親にあたるdivに指定します。「div.border」は横幅を設定...

続きを読む

画像の下に回り込みをさせない

画像の横幅や高さが変わっても画像の下にテキストが回り込まない方法をご紹介いたします。 サンプルでは画像とテキストはp要素でマークアップしていますので、p要素が元々持っているマージンやパティングを消去します。 「div.img_box 」では画像とテキストを入れるボックスの幅や適当なスペースを指定しています。「div.img_box p」の「overflow: hidden;」で...

続きを読む

PAGETOP