この写真の記事へ

ul要素で作るリストを、横向きメニューに装飾する方法(画像)(11ページ目)

西村 文宏

執筆者：西村 文宏

ホームページ作成ガイド

メインのリスト項目を横に並べ、サブのリスト項目を縦に並べて、メニューバーのように見せる

メインのリスト項目を横に並べ、サブのリスト項目を縦に並べて、メニューバーのように見せる

この写真の記事へ
ul要素とli要素で作るリスト(左:1段階／右:2段階)
ul要素とli要素で作るリストを、横方向に並べる装飾例
ul要素とli要素で作るリストを、横方向に並べてメニューバーに見えるように装飾した例
ul要素とli要素で作る「リスト」を、横向きのリンクリスト や メニューバー に装飾する方法
1段階のリストを何も装飾せずに表示した場合
リストの各項目が横向きに並ぶリンク集に見えるよう装飾する
リスト項目を横に並べて、メニューバーのように見せる
2段階のリストを何も装飾せずに表示した場合
リストの各項目が横向きに並ぶリンク集(メイン項目の下にサブ項目が並ぶ)に見えるよう装飾する
リストの各項目が横向きに並ぶリンク集(横並びのメイン項目の下にサブ項目が縦に並ぶ)に見えるよう装飾する
メインのリスト項目を横に並べ、サブのリスト項目を縦に並べて、メニューバーのように見せる
リストを横向きに並べて、リンクリストやメニューバーを作る
HTMLで作るリスト(箇条書き)を、CSSでメニューの形などに装飾する方法
サンプルページ1
サンプルページ2
上:positionプロパティがある場合／下:positionプロパティがない場合

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる