HTMLの構造化 - リストタグ デザイン編

「HTMLの構造化 - リストタグ レイアウト編」では、リストタグを使いメニューボタンを作成する為の「CSS（スタイルシート）」によるレイアウトの仕方をご紹介しました。
「HTMLの構造化 - テキストボタン編 - 2/2」では、テキストと「CSS」を使いonMouseOverで色の変化するボタンの作成方法をご紹介しました。

この二つを合わせて、サイトのリンクボタンを作成したいと思います。

しかし、ボタンの作成時にボタンに書かれた文字のインデントを<a>タグに適用しますので、修正点が２点あります。

１．.menu-list li{list-style-type: none;}
　　⇒　.menu-list li{list-style-type: none; margin: 0px; padding: 0px;}
２．.menu-list ol{margin-left: 5px; padding-left: 5px;}
　　⇒　.menu-list-2 ol{margin: 0px; padding: 0px;}

そして、次に「HTMLの構造化 - テキストボタン編 - 2/2」で作成した「CSS」定義のセレクタを「.menu-list」に変更します。
これだけで、メニューボタンとして表示することが可能です。
「製品名A」と「製品名B」の文字をインデントしたい場合には、「.menu-list a{}」と「.menu-list a:hover{}」の内容をコピーしてセレクタを変更、宣言ブロックを「padding-left: 5px;」⇒「padding-left: 10px;」にし、<ol>タグにclass属性として定義します。

それでは、ブラウザで確認してみましょう。
なぜか、「Mozilla」系のブラウザでは３行目と４行目の間に空間が生じてしまいます。
これを目立たなくするために、セレクタ「.menu-list」の宣言ブロックに「background-color: #999999;」と「width: 134px;を追加し、テキストと「CSS」で作成されたボタンの下にバックグラウンドカラーが設定される様にします。

これにより、３行目と４行目に１pxの空間はあるものの、目立たなくなります。

そして作成されたものが以下のものになります。
※最終的に完成したソースは、ブラウザの機能の[ページのソース]などを使ってご覧ください。

• HOME
• 製品情報
  1. 製品A
  2. 製品B
• お問い合わせ

◇この記事が参考になりましたらこちらをクリック ≫ 人気blogランキング

◇「『うぇっぶ』のはなし」へのコメント募集中 ≫ ビジネスブログランキング100選