HOME > 開発者向けBLOG

Technology Note 開発者向けBLOG

Written by
watanabe

visibilityで画像置換

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

続きを読む

Written by
watanabe

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

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

続きを読む

Written by
watanabe

データの一部をロックして、他の部分を横スクロール

前回は縦にスクロールする表示方法をご紹介いたしました。 今回は横にスクロールさせる方法をご紹介いたします。 大きくわけて3つの要素で構成します。 外枠部分 ロック部分 横スクロール部分 外枠部分はdivで大枠のボーダー線や幅を指定します。 1 2 3 4 5 6 7 div.x_data_area { width: 900px; overflow: hidden; /...

続きを読む

Written by
watanabe

タイトルをロックして、データ部分を縦スクロール

一般にデータ系のレイアウトは主にテーブルで作成されることが多いと思います。 通常のテーブル表示ではなく、タイトルをロックし、データ部分が設定した高さに達した場合に縦にスクロールする表示をご紹介いたします。 大きくわけて3つの要素で構成します。 外枠部分 タイトル部分 データ部分 外枠部分はdivで大枠のボーダー線や幅を指定します。 1 2 3 4 5 6 7 /* 外枠部分 *...

続きを読む

最初6768697071

PAGETOP