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

Technology Note 開発者向けBLOG

Webデザイン

要素を中央に配置

高さが決まっていない要素を中央に配置する方法をご紹介いたします。 「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タグで表示させるので、ブラウザの印刷プレビュー、ページ設定の「背景の色とイメージを印刷する」などの設定をせずとも印刷できる...

続きを読む

CSSスプライトでナビメニュー

CSSスプライトと呼ばれる背景画像を使用してナビメニューを作成する方法をご紹介いたします。 メリットとしては、複数の画像ではなく一個の画像で表示するので、サイトの表示を速めることができます。 実際に使用される画像は下記のようになります。 まず「ol.sprite li a」でaタグに指定するナビボタンの基本プロパティを指定します。 「ol.sprite li a.sprite_...

続きを読む

PAGETOP