HOME > 開発者向けBLOG

Technology Note 開発者向けBLOG

input type submitで画像置換

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

続きを読む

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

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

続きを読む

要素を中央に配置

高さが決まっていない要素を中央に配置する方法をご紹介いたします。 「div.vertical_box p」でテキストをマークアップしているp要素に「display: table-cell;」、「 vertical-align: middle;」を指定し、テキストを中央に配置するようにします。IE6とIE7は「display: table-cell;」に対応していませんので、「d...

続きを読む

画像の垂直中央表示

今回は幅と高さが異なる画像を、ボックスの中で垂直中央に表示する方法をご紹介いたします。 中央に関してはそれほど難しくはありませんが、テーブルタグを使用せず、クロスブラウザで垂直表示にする場合は工夫が必要です。 テクニックのポイントはdisplayプロパティの「table-cell」です。 「div.box p」でボックス内のp要素に対し、「display: table-cell...

続きを読む

リストの中央寄せ

ul liタグで幅を決めずに横並びで中央に寄せる方法をご紹介いたします。 liを横並びにするときは、「float: left;」を指定することが多いと思います。幅が固定ならば中央寄せにすることは難しいことではありませんが、なんらかの事情で幅が決められない場合に、「float: left;」での横並びで中央寄せを実現しようとすると難しいものがあります。 「ul.center」の「...

続きを読む

PAGETOP