HTMLの構造化 - リストタグ レイアウト編

「HTMLの構造化 - リストタグ編」では、各コンテンツへのメニューの「リストタグ」を使用した構造化についてご説明しました。

その中で問題だったのが、「リストタグ」で作成したコードでは、デザイン的にメニューとして使えないということでした。
そこで、「CSS(スタイルシート)」を使ってデザインする方法をご紹介します。
※「CSS」の詳細は「CSS2.1[日本語]」などをご覧ください。

前回作成したものは以下の通りです。

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

これに「CSS」を使ってレイアウトの定義をすることで、メニューらしい形にします。
まず、リストタグを使うことにより、自動的に追加される項目を表示しないようにします。
これにはセレクタ「.menu-list li」の宣言ブロックに「list-style-type: none;」記述することで可能になります。。
.menu-list li{list-style-type: none;}
そして、<ul>にはこの「CSS」を適用するために「calss="menu-list"」を追加してください。
これで、「・」や数字を消すことができました。

次に、「製品情報」の中項目「製品A」、「製品B」のインデントがつきすぎていますので、5pxに変更します。
セレクタ「.menu-list ol{}」を作成し、宣言ブロックに「margin-left: 5px;」と「padding-left: 5px;」を記述します。
.menu-list ol{margin-left: 5px; padding-left: 5px;}
これは、IEの場合「margin-left: 5px;」だけでも問題ないのですが、Mozilla系のブラウザの場合「padding-left: 5px;」を書かないとインデントを変更することができないためです。

そして最後に、<ul>タグを使用した際に自動的に入ってしまう上下、左右の余白が出ないようにします。
セレクタ「.menu-list{}」を作成し、宣言ブロックに「margin: 0px;」と「padding: 0px;」これも先ほどと同じ理由で、「margin」と「pading」を設定します。
.menu-list{margin: 0px; padding: 0px;}

現在のコードは以下の通りです。

「CSS」部分
.menu-list {margin: 0px; padding: 0px;}
.menu-list li{list-style-type: none;}
.menu-list ol{margin-left: 5px; padding-left: 5px;}

「HTML」部分
<ul class="menu-list">
　　<li>HOME　　
　　<li>製品情報　　
　　<ol>　
　　 　　<li>製品A　　　
　　 　　<li>製品B　　
　　</ol>
　　<li>お問い合わせ
</ul>

表示結果

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

これで、レイアウトは完成しました。
次回はこのレイアウトにメニューらしく「CSS」を使ってデザイン要素を追加したいと思います。

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

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