前回に続いて残りの3つを仕上げていきましょう。
- リストの黒ポチがなくてアイコンがある
- リストがリンクになっている
- リストが右に配置されている
CSSを使ってみよう
なんとなくCSSにも慣れてきてかなーと思いますので理解は早くなってきている人もいると思います。
だけどCSSのプロパティはかなり多いのでどんな時にどれを使えばいいかわからなくなったりもします。僕もそうです(笑)そういう時はネットでググることでたくさんの情報が出てきますので安心してくださいね(笑)
リストにリンクを設定しよう
前回まででリストの黒ポチはなくなりましたがアイコンをまだ設定していません。
その前にリンクの設定をしましょう。これから進めていく上で先にリンクを設定してあげた方が都合がいいので・・・。
サンプルサイトを見てみるとリストにはリンクが設定されています。クリックするとどっかのページに飛んでいくあれです。
リンクを設定してあげるにはa要素を使います。
a要素とは、『Anchor(アンカー)』の略で、リンクの出発点や到達点を指定する要素です。
次の画像の通りに記述してみましょう。
■HTML
<ul> <li> <a href="#">サイトマップ</a> </li> <li> <a href="#">お問い合わせ</a> </li> </ul>
これだけで文字がリンクになります。
リンクのスタイルを変更してみよう
標準ではリンクの下に下線が入りますがちょっとダサいので下線の削除とリンク色を変えていきたいと思います。CSSに新しくセレクタを追加しましょう。
■CSS
a{ color:#98534B; text-decoration: none; }
『color』は文字色を変えるプロパティで、『#(シャープ)』の後ろに続けて16進数で数値を記述します。カラーについては、こちらのサイトから好きなカラーの数値を取得出来ますので好きな色を使ってくださいね。
次に『text-decoration』は、テキストに対しての装飾を指定するプロパティで、値を『none』とすることで下線を削除できます。前回使った『list-style』と似たようなことをしていますね。
リンクにアイコンを設定してみよう
後はアイコンをつけて右に寄せてヘッダーは完成です。
アイコンを設定するには、『background~』を使います。
これら3つを同時に指定します。
- background-image
- background-repeat
- background-position
あまり細かく説明すると長くなるので、3つのプロパティをそれぞれ表にまとめました。
■background-image(背景画像)
値 | 説明 |
---|---|
none | 背景画像なし。 |
url(“画像URL”) | 背景画像ファイルのURLを相対パス、絶対パスのいずれかで指定。 URL部分は『’』又は『”』で括らなくてもOK。 |
■background-repeat(背景画像の繰り返し方法)
値 | 説明 |
---|---|
repeat | 画像を縦横両方向に繰り返して表示する。 |
repeat-x | 画像を横方向に繰り返して表示する。 |
repeat-y | 画像を縦方向に繰り返して表示する。 |
no-repeat | 画像の繰り返しなし。 |
space | 画像を繰り返して表示する。画像が領域内に収まらない場合は、画像の周りに空白をあけて領域内に収まるようにする。 |
round | 画像を繰り返して表示する。画像が領域内に収まらない場合は、画像を自動リサイズして、領域内にフィットするようにする。spaceと異なり、画像の周りに空白はない。 |
■background-position(背景画像の表示位置)
表示位置 | キーワード指定 | %指定 |
---|---|---|
左上 | top left | 0% 0% |
上中央 | top center | 0% 50% |
右上 | top right | 0% 100% |
左中央 | center left | 50% 0% |
中央 | center center | 50% 50% |
右中央 | center right | 50% 100% |
左下 | bottom left | 100% 0% |
下中央 | bottom center | 100% 50% |
右下 | bottom right | 100% 100% |
『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%; }
これで表示するとリンクの横にアイコンが出ました。
アイコンの位置を調整するために『a』セレクタに。↓を追加してください。
■CSS
padding-left: 15px;
適度な位置にアイコンが移動できましたね。
『padding~』プロパティについても第4回で出た『margin~』同様、ボックスモデルの概念があります。
ボックスモデルについて別の記事にしてありますので→【CSS【ボックスモデル】画像付きでわかりやすく説明するよ!】を確認してみてくださいね。
id属性を使ってみよう
2つのリンクを右に寄せる前にulタグをdivタグで囲ってグループ化しましょう。
行番号1,10を追加してください。
<div id="gnavi"> <ul> <li> <a href="#">サイトマップ</a> </li> <li> <a href="#">お問い合わせ</a> </li> </ul> </div>
divに対してid属性『gnavi』の名前を付けてあげましょう。『gnavi』は、global navigation(グローバルナビゲーション)の略称です。
Webサイトの全てのページに共通して設置された案内リンクの事。 会社概要やサービス紹介などWebサイト内の主要なページに対してリンクされます。
id属性の他にclass属性もありますが、ここでは説明はせず進めていきたいと思います。
id属性,class属性については別の記事で説明してますので気になる方は→CSS【id属性】と【class属性】を画像付きでわかりやすく説明するよ!を確認してみてくださいね。
#gnavi{ position: absolute; bottom: 5px; right: 0; }
positionプロパティは以下の4つの値があります。
値 | 説明 |
---|---|
static | 特に配置方法を指定しません。これが基準位置となります。
staticの場合、top,bottom,left,rightを指定しても適用されません。 |
relative | 相対位置の配置となります。staticを指定した場合に表示される位置が基準位置になり、その位置の相対位置となります。 |
absolute | 絶対位置の配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。 |
fixed | 絶対位置の配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。 |
positionプロパティの参考記事も別にありますので時間に余裕があれば読んでみてくださいね。→CSS【position】の使い方をわかりやすく説明するよ!
なんだかいろんな記事に飛ばしてばっかりですね…。
表示してみると、『position:relative』を指定しているので#gnaviボックスが右下位置に飛んでいきました。
これではまずいので、ヘッダー部分を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; }
ヘッダー部分を囲って親ボックスに『position: relative』を指定してあげることで子ボックスの『#gnavi』の配置がうまくいきます。
第5回は、これで終了します。次は、アイキャッチ画像とメニューを作成していこうと思います。次の記事も見てくださいね!
コメントを残す