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

はじめてのホームページ制作アイキャッチ05

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

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

CSSを使ってみよう

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

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

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

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

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

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

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

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

手順001

手順001

■HTML

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

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

手順002

手順002

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

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

手順003

手順003

■CSS

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

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

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

手順004

手順004

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

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

アイコンを設定するには、『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%;
	}

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

手順005

手順005

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

padding-left: 15px;

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

手順006

手順006

『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ボックスが右下位置に飛んでいきました。

手順007

手順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

手順008

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

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

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

はじめてのホームページ制作アイキャッチ05

自作WEBアプリ集


管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。見てやってください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA