HOME > 開発者向けBLOG >  2011 July

Technology Note 開発者向けBLOG

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

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

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

続きを読む

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

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

続きを読む

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

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

続きを読む

PAGETOP