おやじ
2016年02月10日
グローバルナビ（div id=”navi”）部分の作成
ここでは「トップページ」と「記事の一覧ページ」へリンクするグローバルナビ部分を作成します。
index.html の記述
|
1 2 3 4 5 6 |
<div id="navi"> <ul> <li class="navi-style"><a href="index.html">トップ</a></li> <li class="navi-style"><a href="#">記事の一覧</a></li> </ul> </div><!-- navi END --> |
<li>～</li> 内に「トップページ」「記事の一覧ページ」へのリンクタグ（aタグ）を記述します。
「記事の一覧ページ」のURLは未定ですので、リンク先は href=”#” にしています。
liタグのスタイルは複数回使いますのでclass属性（class=”navi-style”）を設定しています。
style.cssの記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/*-------------------------------------*/ /* navi */ /*-------------------------------------*/ #navi{ width:1040px; height:40px; background-color:#0000ff; /* naviボックスの背景を青色に設定 */ } .navi-style{ float:left; /* 左からの横並びに設定 */ height:40px; /* liの高さを40pxに設定 */ } .navi-style a{ display: block; /* ブロック要素（ボックス）に設定 */ height:40px; /* ボックスの高さを40pxに設定 */ color:#ffffff; /* 文字色を白に設定 */ font-weight: bold; /* 文字の太さをboldに設定 */ line-height:40px; /* 文字の上下を中央に設定 */ text-decoration: none; /* 文字の下線を無に設定 */ background-color: #0000ff; /* 背景色を青に設定 */ border-right:1px solid #ffffff; /* 右側の枠線を幅1px、直線、白色に設定 */ padding-left:20px; /* 左側内側の余白を20pxに設定 */ padding-right:20px; /* 右側内側の余白を20pxに設定 */ } .navi-style a:hover{ color:#000000; /* マウスが重なった時の文字色を黒色に設定 */ background-color:#ffff00; /* マウスが重なった時の背景色を黄色に設定 */ } |
７行目で navi ボックスの背景を指定しています。
１０行目のclass属性（navi-style）でリスト（<li>～</li>）を左からの横並びに、高さをnaviボックスと同じ40pxに設定しています。
１５行目の「.navi-style a」はnavi-styleクラス内のaタグのスタイルだけを指定しています。この指定方法は他のaタグには影響を与えません。
１６行目の「display: block;」はインライン要素のaタグをブロック要素に変更しています。
－－ インライン要素 －－
文書中の一部の要素として扱われ、横幅（width）高さ（height）を持ちません。
－－ ブロック要素 －－
横幅（width）高さ（height）を持っていますので、width height の設定ができます。
ブロック要素の前後には自動的に改行が入ります。
aタグはインライン要素ですから、横幅（width）高さ（height）を持たせるためにブロック要素に変更しています。
２０行目の「line-height:40px;」は行の高さを指定しています。
６行目（navi ボックスの高さ）、１２行目（リストの高さ）とline-height プロパティの値を同じにすることで、リンク文字の上下が navi ボックスのだいたい中央に配置されます。
作成部分の表示確認
編集した index.html と style.css をXAMPPの「test-site」にアップロードして下図のようになっているか確認してください。
