
おやじ
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; /* マウスが重なった時の背景色を黄色に設定 */ } |
7行目で navi ボックスの背景を指定しています。
10行目のclass属性(navi-style)でリスト(<li>~</li>)を左からの横並びに、高さをnaviボックスと同じ40pxに設定しています。
15行目の「.navi-style a」はnavi-styleクラス内のaタグのスタイルだけを指定しています。この指定方法は他のaタグには影響を与えません。
16行目の「display: block;」はインライン要素のaタグをブロック要素に変更しています。
-- インライン要素 --
文書中の一部の要素として扱われ、横幅(width)高さ(height)を持ちません。
-- ブロック要素 --
横幅(width)高さ(height)を持っていますので、width height の設定ができます。
ブロック要素の前後には自動的に改行が入ります。
aタグはインライン要素ですから、横幅(width)高さ(height)を持たせるためにブロック要素に変更しています。
20行目の「line-height:40px;」は行の高さを指定しています。
6行目(navi ボックスの高さ)、12行目(リストの高さ)とline-height プロパティの値を同じにすることで、リンク文字の上下が navi ボックスのだいたい中央に配置されます。
作成部分の表示確認
編集した index.html と style.css をXAMPPの「test-site」にアップロードして下図のようになっているか確認してください。