HOME > 開発者向けBLOG >  2011 August

Technology Note 開発者向けBLOG

開発者向けBLOG アーカイブ August, 2011

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

クリッカブルマップによる画像置換をご紹介いたします。 今回は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」の「...

続きを読む

visibilityで画像置換

CSSのvisibilityで画像を置換する方法をご紹介いたします。 通常時の画像をimgタグで表示し、ホバー時の画像を背景で表示、そしてホバー時は不要なimgの画像を非表示にします。 visibilityで画像を置換する際のメリットは、通常時の画像はimgタグで表示させるので、ブラウザの印刷プレビュー、ページ設定の「背景の色とイメージを印刷する」などの設定をせずとも印刷できる...

続きを読む

PAGETOP