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

Technology Note 開発者向けBLOG

Webデザイン

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

背景色を下部まで要素がない場合でも、下まで伸ばす方法をご紹介します。 通常、ブロック要素の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;」で...

続きを読む

input type submitで画像置換

input type submitでホバー時にボタンの画像を置換する方法をご紹介いたします。 使用する画像は下記になります。 「input.btn_submit」に必要なプロパティを記述します。「cursor: pointer;」はマウスカーソルを指の形にします。「display~height」までは画像置換する際に必要なプロパティです。submitボタンをブロック要素にし、通...

続きを読む

クリッカブルマップの画像置換

クリッカブルマップによる画像置換をご紹介いたします。 今回はJavaScriptを使用します。 クリッカブルマップで使用するオンマウスオーバー、オンマウスアウト、オンクリック時の画像を用意します。画像の内訳は通常時の画像、四角形のオーバー時の画像、円のオーバー時の画像、四角形のクリック時の画像、円のクリック時の画像、合計5つです。 通常時の画像 四角形のオーバー時の画像 円のオ...

続きを読む

PAGETOP