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

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

前回まででヘッダー部分は作成完了となりました。ここから結構サクサクと仕上げていけると思います。

アイキャッチ画像とメニューの作成

第6回では、画像の赤枠部分のアイキャッチ画像とメニューを作成していこうと思います。

手順001

手順001

アイキャッチ画像の挿入

メインの画像を挿入していきたいと思います。タイトルロゴに『カフェ ゆるらぎ』ってあるのになんで画像が『TULLY’S COFFEE』なんだよ!って突っ込まれると思いますが…(笑)

無料素材を探していたんですが、なかなか見つからなくて異なる店舗名の画像を使う形となりました(笑)ご愛敬とゆうことで、気にしないでくださいね。

以前も使用しました、img要素を使用しての画像挿入で、前回はむき出しのままimg要素を使用しましたが、今回は、色々とdiv要素を使って幅を調整しないといけません。
12行目を追加してください。

■HTML


<body>
	<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>
	<img src="images/sample1.jpg"width="100%" height="300px" alt="" />
</body>	

12行目を追加して下の動画を再生してみると・・・


画像幅はボックスいっぱいに大きくしたいんですが、ウィンドウサイズを大きくしてみるとウィンドウ全体に画像が伸びちゃってこれではよくはないので、img要素をdiv要素で囲ってサイズを適切な幅に指定しましょう。
1,3行目を追加してください。

■HTML


		<div id="icatch">
			<img src="images/sample1.jpg"width="100%" height="300px" alt="" />
		</div>

動画を再生してみるとヘッダーと同じ幅に収まり、画像も親ボックスに対して100%ですが、ウィンドウサイズを変更しても変化しません。

メニューの作成

次は、メニューを作っていきたいと思います。
前回もul要素,li要素,a要素を使ってリストを横並びにしたと思いますので一気に作っていこうと思います。
改行するためのbr要素が付いていますので、それ以降に改行が入ります。
4~13行目を追加してください。

■HTML

	<div id="icatch">
		<img src="images/sample1.jpg"width="100%" height="300px" alt="" />
	</div>
	<div id="menu">   
		<ul>
			<li><a href="#"><span>Home</span><br />ホーム</a></li>
			<li><a href="#"><span>Lunch</span><br />ランチ</a></li>
			<li><a href="#"><span>Dessert</span><br />デザート</a></li>
			<li><a href="#"><span>News</span><br />最新情報</a></li>
			<li><a href="#"><span>Staff</span><br />スタッフ紹介</a></li>
			<li><a href="#"><span>Access</span><br />アクセス</a></li>
		</ul>
	</div>

表示してみると、以前li要素とa要素にスタイルを記述していたのでそれが適応されて既に横並びになってアイコンが付いています。

手順002

手順002

以下のスタイル部分がそうでしたね。
■CSS

	li{
		list-style: none;
		float: left;
		font-size: 12px;
		margin-left: 15px;
	}
	a{
		color:#98534B;
		text-decoration: none;
		background-image: url(images/bg_gnavi.gif);
		background-repeat: no-repeat;
		background-position: 0%;
		padding-left: 15px;
	}

セレクタの指定方法

今回はアイコンではなく『background-image』に別の画像を差し替えたいのでちょっと変わったセレクタの指定方法を使ってこちらのdiv要素#menuボックスの子ボックスに対してスタイルを書き直していきましょう。
まずはメニューのul要素に対して『marginとpadding』が付いているのでそれぞれを『0』にしてメニューを左上部に詰め寄るようにしたいと思います。

手順003

手順003

以下のCSSを追加してください。
■CSS

	/* ========MENU CUSTOMIZE======== */

    #menu ul {
       float:left;
       margin:0;
       padding:0; 
    }
手順004

手順004

メニューの位置が左上に詰め寄りましたね。
今回指定したCSSのセレクタをみると、『#menu ul』で指定しています。この指定方法でCSSが適応される要素は、【親ボックスが『#menu』の子ボックスの『ul』】ということになります。
これで他のul要素に影響を与えることなくCSSを適応することができます。

次は、『a要素』にスタイルを付けていきましょう。

■CSS

#menu li a {
      display:block;
      width:130px;
      padding:10px 0;
      color:#FFF1A4;
      background-image:url(images/bg_menu.gif);
      }

表示してみます。

手順005

手順005

displayプロパティにblockの値を指定し、a要素をブロック化することでa要素のサイズを指定することができます。

アイキャッチ画像と同じ幅にするため、1つ1つのa要素にwidthで幅を指定してます。アイキャッチ画像の幅が780pxなのでa要素に130pxを指定してあげることでメニューが画像幅と一緒になります。今はまだli要素同士の間に余白があるのでその余白を無くさなければいけないんですが、それはもうちょっと後でやります。

a要素の内側の余白を上下10px、左右は0pxを指定します。これにより、上下10pxの余白、左右の余白が0pxになります。

fontプロパティで文字色を変更。

背景画像には、imagesフォルダ内、下記の画像の赤枠で囲っている画像ファイルを指定しています。

手順006

手順006

background-imageプロパティで値を『url()』にして、『()』の中に画像のパスを指定しています。そうすることで背景画像を表示させることができます。

今回はこの辺りで区切って第7回からメニューの続きをしていきたいと思います。次の記事も読んでくださいね!

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

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

自作WEBアプリ集


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

コメントを残す

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

CAPTCHA