【初めてのホームページ制作】#05 マネして作ってみよう！(手順解説付き)

前回に続いて残りの３つを仕上げていきましょう。

• リストの黒ポチがなくてアイコンがある
• リストがリンクになっている
• リストが右に配置されている

CSSを使ってみよう

なんとなくCSSにも慣れてきてかなーと思いますので理解は早くなってきている人もいると思います。
だけどCSSのプロパティはかなり多いのでどんな時にどれを使えばいいかわからなくなったりもします。僕もそうです（笑）そういう時はネットでググることでたくさんの情報が出てきますので安心してくださいね（笑）

リストにリンクを設定しよう

前回まででリストの黒ポチはなくなりましたがアイコンをまだ設定していません。

その前にリンクの設定をしましょう。これから進めていく上で先にリンクを設定してあげた方が都合がいいので・・・。

サンプルサイトを見てみるとリストにはリンクが設定されています。クリックするとどっかのページに飛んでいくあれです。

リンクを設定してあげるにはa要素を使います。

a要素とは、『Anchor（アンカー）』の略で、リンクの出発点や到達点を指定する要素です。

次の画像の通りに記述してみましょう。

手順001

■HTML

<ul>
<li>
<a href="#">サイトマップ</a>
</li>
<li>
<a href="#">お問い合わせ</a>
</li>
</ul>

これだけで文字がリンクになります。

手順002

リンクのスタイルを変更してみよう

標準ではリンクの下に下線が入りますがちょっとダサいので下線の削除とリンク色を変えていきたいと思います。CSSに新しくセレクタを追加しましょう。

手順003

■CSS

a{
color:#98534B;
text-decoration: none;
}

『color』は文字色を変えるプロパティで、『＃(シャープ)』の後ろに続けて１６進数で数値を記述します。カラーについては、こちらのサイトから好きなカラーの数値を取得出来ますので好きな色を使ってくださいね。

次に『text-decoration』は、テキストに対しての装飾を指定するプロパティで、値を『none』とすることで下線を削除できます。前回使った『list-style』と似たようなことをしていますね。

手順004

リンクにアイコンを設定してみよう

後はアイコンをつけて右に寄せてヘッダーは完成です。

アイコンを設定するには、『background~』を使います。

これら３つを同時に指定します。

• background-image
• background-repeat
• background-position

あまり細かく説明すると長くなるので、３つのプロパティをそれぞれ表にまとめました。

■background-image(背景画像)

■background-repeat(背景画像の繰り返し方法)

■background-position(背景画像の表示位置)

『a』セレクタに4,5,6行のコードを追加してください。背景に関するスタイルを指定します。

■CSS

a{
color:#98534B;
text-decoration: none;
background-image: url(images/bg_gnavi.gif);
background-repeat: no-repeat;
background-position: 0%;
}

これで表示するとリンクの横にアイコンが出ました。

手順005

アイコンの位置を調整するために『a』セレクタに。↓を追加してください。
■CSS

padding-left: 15px;

適度な位置にアイコンが移動できましたね。

手順006

『padding~』プロパティについても第４回で出た『margin~』同様、ボックスモデルの概念があります。

ボックスモデルについて別の記事にしてありますので→【CSS【ボックスモデル】画像付きでわかりやすく説明するよ！】を確認してみてくださいね。

id属性を使ってみよう

２つのリンクを右に寄せる前にulタグをdivタグで囲ってグループ化しましょう。
行番号１,10を追加してください。

<div id="gnavi">
<ul>
<li>
<a href="#">サイトマップ</a>
</li>
<li>
<a href="#">お問い合わせ</a>
</li>
</ul>
</div>

divに対してid属性『gnavi』の名前を付けてあげましょう。『gnavi』は、global navigation(グローバルナビゲーション)の略称です。

id属性の他にclass属性もありますが、ここでは説明はせず進めていきたいと思います。

id属性,class属性については別の記事で説明してますので気になる方は→CSS【id属性】と【class属性】を画像付きでわかりやすく説明するよ！を確認してみてくださいね。

#gnavi{
position: absolute;
bottom: 5px;
right: 0;
}

positionプロパティは以下の４つの値があります。

positionプロパティの参考記事も別にありますので時間に余裕があれば読んでみてくださいね。→CSS【position】の使い方をわかりやすく説明するよ！

なんだかいろんな記事に飛ばしてばっかりですね…。

表示してみると、『position:relative』を指定しているので#gnaviボックスが右下位置に飛んでいきました。

手順007

これではまずいので、ヘッダー部分をdivタグで囲ってボックスの幅を指定してあげましょう。1,14行を追加してください。

■HTML

<div id="header">
<p>カフェ ゆるらぎは東京都XX区にあるランチとスイーツがおいしいお店です。</p>
<img src="images/logo.gif" alt="カフェ ゆるらぎ" />
<div id="gnavi">
<ul>
<li>
<a href="#">サイトマップ</a>
</li>
<li>
<a href="#">お問い合わせ</a>
</li>
</ul>
</div>
</div>

■CSS

#header{
position: relative;
width: 780px;
}

手順008

ヘッダー部分を囲って親ボックスに『position: relative』を指定してあげることで子ボックスの『#gnavi』の配置がうまくいきます。

第５回は、これで終了します。次は、アイキャッチ画像とメニューを作成していこうと思います。次の記事も見てくださいね！

【初めてのホームページ制作】#06 マネして作ってみよう！(手順解説付き)