メイン画像を表示しよう

ショップのメインとなる画像。一目見てショップの雰囲気が伝わるような画像を用意するといいですね。

1. 画像を用意

幅750×高さ100のメイン画像（main.gif）を用意します。

2. ソースの書きかえ

メイン画像を指定するためのセレクタがないので新たに作ります。 CSSの一番下に新たなセレクタ「#logoWrapper」記述する。

#logoWrapper {
	}

「#logoWrapper」に画像（main.gif）を指定する記述「background: url(../images/main.gif) left top no-repeat;」を加え上書き保存します。

変更前

#logoWrapper {
	}

変更後

#logoWrapper {
	background: url(../images/main.gif);
	}

3. 確認

ブラウザの更新をクリックし確認します。 画像が表示されました。

  表示はされたものの上の部分しか見えてないですよね。画像に合った高さを指定すれば大丈夫ですよ。 今回メイン画像は高さ100pxですのでそれに合わせます。

4. ソースの書きかえ

「#logoWrapper」に高さを指定をする「line-height: 100px;」を加え上書き保存します。

変更前

#logoWrapper {
	background: url(../images/main.gif);
	}

変更後

#logoWrapper {
	background: url(../images/main.gif);
	line-height: 100px;
	}

5. 確認

ブラウザの更新をクリックし確認します。 高さが指定され、メイン画像がちゃんと表示されました。  メイン画像の下に空白がありますので、これをなくしましょう。

6. ソースの書きかえ

CSSの132行目「.clearBoth 」に「height: 0;」「line-height: 0;」と加え上書き保存します。

変更前

.clearBoth {
	clear: both;
	}

変更後

.clearBoth {
	clear: both;
	height: 0;
	line-height: 0;
	}

７. 確認

ブラウザの更新をクリックし確認します。 空白がなくなりました。