おやじ

おやじ

2016年02月10日

グローバルナビ(div id=”navi”)部分の作成

ここでは「トップページ」と「記事の一覧ページ」へリンクするグローバルナビ部分を作成します。

index.html の記述

<li>~</li> 内に「トップページ」「記事の一覧ページ」へのリンクタグ(aタグ)を記述します。

「記事の一覧ページ」のURLは未定ですので、リンク先は href=”#” にしています。

liタグのスタイルは複数回使いますのでclass属性(class=”navi-style”)を設定しています。

 

style.cssの記述

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」にアップロードして下図のようになっているか確認してください。

navi_01

 

 

コメントを残す