Webサイトを作る(コンテンツ編) vol.4
スポンサーリンク
Samboni
初めての方はvol.1から始めてください。

コンテンツの中を作って行く

3つのブロックに分けたうちの今日は中央にある『コンテンツ』の部分を作って行きます。

1. コンテンツ部を分析

上に画像、真ん中に画像と文字、そして下には4つに別れたコンテンツがあります。

上、中、下と大きく3つの場所を作ります。

ブロック毎に名前をつけ場所を作っていきます。

body1,body2, body3 とそれぞれのブロックにsectionを使って名前をつけました。

<div class="contents">
 <section class="body1"></section>
 <section class="body2"></section>
 <section class="body3"></section>
</div>

2. コンテンツを入力

まずはbody1に画像を入れます。前回のおさらいですが、記述方法はこのように書いていきます。

HTMLの記述方法

<div class="contents">
 <section class="body1">
  <img src="img/hero.png" alt="fashion week image">
 </section>
 <section class="body2"></section>
 <section class="body3"></section>
</div>

まずはこのままにして次のセクションを作ります。

3. セクション2を書き込む

セクションの2つ目は画像と文章が同じ列に同時に入っています。

セクション2の中に二つのボックスを作ります。1つは画像用、そしてもう一つは文章用にします。
ちょうど半分になっているのでボックスの名前は同じ名前を使い幅を50%として2つ作ります。

<section class="body2">
	<div class="box50"></div>
	<div class="box50"></div>
</section>

さらにそのボックスの中へ画像と文章を入れます。文章にはパラグラフの<p></p>を使用します。行が変わる場合は一度pタグで閉じてから再びpタグで作ります。

<section class="body2">
	<div class="box50">
		<img src="img/info.png" alt="shopping bag image">
	</div>
	<div class="box50">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum ex odio, sed fringilla odio elementum et. In hendrerit faucibus elementum. Etiam sed ipsum felis. Nulla facilisi. Nullam pretium, augue non sodales viverra, mauris ligula molestie ante, in gravida justo felis ut diam. Pellentesque rutrum neque lorem, non convallis metus pulvinar vel. Sed tincidunt dui at purus venenatis, a porttitor sem commodo. Nulla purus justo, malesuada non vestibulum sit amet, dapibus id ex. Integer vitae malesuada ipsum, eget aliquet ante. Aenean ac ante auctor, tincidunt nunc vitae, vulputate dolor. Morbi elementum, ante sit amet efficitur molestie, lacus lorem dignissim ipsum, id efficitur ipsum enim nec lacus.</p>
		<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus accumsan egestas viverra. Maecenas at imperdiet diam, eu ornare turpis. Suspendisse vitae scelerisque leo. Mauris facilisis leo vel neque efficitur sagittis in et diam. Duis ac ullamcorper enim, ut semper neque. Quisque tempor turpis sit amet faucibus luctus. Ut euismod efficitur mi, a suscipit nibh ultricies sed.</p>
		<p>Sed nec ante nunc. Pellentesque iaculis maximus lorem id posuere. Sed tempus non lectus id molestie. Mauris tincidunt felis vel maximus dictum. Pellentesque sollicitudin libero sit amet consequat aliquam. Morbi ac magna sed ipsum scelerisque lobortis ut sed nibh. Sed vitae faucibus mauris. Aenean mollis posuere sapien, non rhoncus sapien eleifend vel. Duis ut porta ipsum. Quisque id quam pellentesque, hendrerit tortor in, tempus enim. Vestibulum dictum est ac erat luctus, ut finibus eros scelerisque.</p>
	</div>
</section>

まだ、何もCSSでは指定していないのでこんな状態かと思います。

4. セクション3を書き込む

セクション3はiconと名付けた画像ボックスと文章が均等に4つ並んでいます。幅25%ずつのボックスを4つ作ります。

<section class="body3">
	<div class="box25"></div>
	<div class="box25"></div>
	<div class="box25"></div>
	<div class="box25"></div>
</section>

では各ボックスに用意した画像と文章を入れます。

<section class="body3">
	<div class="box25">
		<img src="img/icon01.png" alt="icon image">
		<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus accumsan egestas viverra. Maecenas at imperdiet diam, eu ornare turpis. Suspendisse vitae scelerisque leo. Mauris facilisis leo vel neque efficitur sagittis in et diam. Duis ac ullamcorper enim, ut semper neque. Quisque tempor turpis sit amet faucibus luctus. Ut euismod efficitur mi, a suscipit nibh ultricies sed.</p>
	</div>
	<div class="box25">
		<img src="img/icon02.png" alt="icon image">
		<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus accumsan egestas viverra. Maecenas at imperdiet diam, eu ornare turpis. Suspendisse vitae scelerisque leo. Mauris facilisis leo vel neque efficitur sagittis in et diam. Duis ac ullamcorper enim, ut semper neque. Quisque tempor turpis sit amet faucibus luctus. Ut euismod efficitur mi, a suscipit nibh ultricies sed.</p>
	</div>
	<div class="box25">
		<img src="img/icon03.png" alt="icon image">
		<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus accumsan egestas viverra. Maecenas at imperdiet diam, eu ornare turpis. Suspendisse vitae scelerisque leo. Mauris facilisis leo vel neque efficitur sagittis in et diam. Duis ac ullamcorper enim, ut semper neque. Quisque tempor turpis sit amet faucibus luctus. Ut euismod efficitur mi, a suscipit nibh ultricies sed.</p>
	</div>
	<div class="box25">
		<img src="img/icon01.png" alt="icon image">
		<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus accumsan egestas viverra. Maecenas at imperdiet diam, eu ornare turpis. Suspendisse vitae scelerisque leo. Mauris facilisis leo vel neque efficitur sagittis in et diam. Duis ac ullamcorper enim, ut semper neque. Quisque tempor turpis sit amet faucibus luctus. Ut euismod efficitur mi, a suscipit nibh ultricies sed.</p>
	</div>
</section>

これで全ての情報を記述する事ができました。

はい、明らかに想像していたものとは遥かに違っています。

前回同様スケッチと同じようにCSSでデザインを指定していきます。

5. デザインをCSSで指定する

body1の中に入っている画像の横幅を100%に指定する事で画像がぴったりと隙間なく埋める事ができます。

.body1 img{
	width: 100%;
}

黄色い写真が幅100%まで広がりました。これで横幅に応じて画像が横幅100%になるように常に対応してくれます。

では、次にbody2の部分をCSSを書いていきます。ボックスの大きさは50%にし、その中に入っている画像のサイズは100%にして書き込んでいきます。各ボックスのfloatを左にし、ボックスの入っているbody2はclear bothを指定してボックスが回り込むようにします。

.body2{
	clear: both;
}
.box50{
	float: left;
	width: 50%;
}
.box50 img{
	width: 100%;
}

では、ここまでの作業を画面でみてみましょう!

画像と文字の入っているボックスは50%になっています。
しかし、文字の大きさが小さいのと高さを指定していなかったのでbody3の内容まで入り込んでしまっています。
パラグラフ内の文字の大きさそしてボックス同士の間のスペースなどを調節します。


.box50 p{
	font-size: 1.5em;
	line-height: 130%;
	padding-left: 3%;
}

では、次にbody3のデザインを指定します。
まず、先ほどと同じように各ボックスが回り込むようにbody3をclear bothにし、各ボックスを100%以内に収まるように横幅を指定していきます。

.body3{
	width: 100%;
	clear: both;
}
.body3 box25{
	width: 25%;
	float: left
}

ここで少し、微調整をします。アイコンが真ん中に来るようにtext-alignを使って配置し、さらにbody2との間隔をmargin-topを使って少し開くように指定します。
画面で確認しておおよそ下のようになっているでしょうか?
マージンとパディングの使い方は注意が必要ですので、marginとpadding」のレッスンを参考にして使用してください。注意しなければいけないのは間の隙間も合わせた合計を100%として常に考える事が大事ですので気をつけてください。

.body3{
	width: 100%;
	clear: both;
}
.box25{
	width: 25%;
	float: left;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5%;
}

今回はコンテンツ部を作りました。

次はいよいよ最後のフッターの部分を作っていこうと思います。
今回も一緒に学んでくださってありがとうございます。

Samboni
最終編でお会いしましょう!
スポンサーリンク

この記事が気に入ったらフォローしよう

おすすめの記事