『スタイルシート デザイン アイデアブック』サンプルデータ
パーツデザイン編
C 見出し
D テキスト・リスト
E コラム
F リンク・メニュー
G テーブル・フォーム
H 画像
ページレイアウト編
I シンプル型
J サイドバー型
K 囲み型
F リンク・メニュー
SECTION 1 メニュー部分のマークアップ方法
F-1-1 <br>で改行する
STEP 1
STEP 2
F-1-2 ブロック要素としてマークアップする
STEP 1
STEP 2
F-1-3 リンクをブロック要素に変更する
STEP 1
STEP 2
STEP 3
F-1-4 リストを利用する
STEP 1
STEP 2
STEP 3
SECTION 2 カーソルが重なったときの装飾
F-2-1 カーソルが重なったときに表示を変える
STEP 1
STEP 2
STEP 3
VARIATION ロールオーバーで下線を表示する
VARIATION ロールオーバーで背景色を表示する
F-2-2 ロールオーバーで文字を沈ませる
STEP 1
COLUMN リンクの周囲の点線を消す
F-2-3 ボタン型のリンクを作る
STEP 1
STEP 2
STEP 3
STEP 4
STEP 5
STEP 6
COLUMN アクティブ状態時のみボタンを沈ませる
F-2-4 リンクによってデザインを変える
STEP 1
STEP 2
STEP 3
STEP 4
STEP 5
STEP 6
STEP 7
SECTION 3 画像を利用する
F-3-1 背景画像でリンクボタンを作る
STEP 1
STEP 2
STEP 3
STEP 4
STEP 5
STEP 6
STEP 7
STEP 8
COLUMN ロールオーバー時にボタンを沈ませる
F-3-2 CSSで作るロールオーバーボタン
STEP 1
STEP 2
STEP 3
STEP 4
STEP 5
STEP 6
STEP 7
F-3-3 先頭にマーク画像を置く
STEP 1
STEP 2
STEP 3
COLUMN マーク画像をリンク領域に含める
F-3-4 CSSで先頭にマーク画像を置く
STEP 1
STEP 2
STEP 3
VARIATION 罫線とマーク画像を組み合わせる
COLUMN マージンで余白を挿入した場合
COLUMN height指定で画像全体を表示した場合
F-3-5 ロールオーバーで先頭のマーク画像を変化させる
STEP 1
STEP 2
STEP 3
STEP 4
STEP 5
COLUMN 大きな画像を利用する(1)例1
COLUMN 大きな画像を利用する(2)例2
COLUMN インラインレベル要素のmargin・padding
SECTION 4 メニューを縦に並べる
F-4-1 メニューを横罫線で区切る
STEP 1
STEP 2
STEP 3
STEP 4
STEP 5
VARIATION メニューに見出しをつける
SECTION 5 メニューを横に並べる
F-5-1 メニューを縦罫線で区切る
STEP 1
STEP 2
STEP 3
STEP 4
STEP 5
STEP 6
STEP 7
STEP 8
STEP 9
VARIATION メニュー項目の幅を揃える
VARIATION メニューバーを横いっぱいに表示する
F-5-2 ボタン型のメニューを並べる
STEP 1
STEP 2
STEP 3
STEP 4
STEP 5
COLUMN clearの指定先
F-5-3 先頭にマーク画像を置いたメニューを並べる
STEP 1
STEP 2
STEP 3
STEP 4
STEP 5
STEP 6
STEP 7
F-5-4 タブ型のメニューを作る
STEP 1
STEP 2
STEP 3
STEP 4
STEP 5
STEP 6
STEP 7
▲TOPに戻る