[初心者向け練習問題] HTMLとCSSでレイアウトを構成する

今回は初心者の方向けにHTMLとCSSを使った簡単な練習問題を用意しました。問題の後に解説を用意していますが、もしわからなくてもすぐに答えを見るのではなく一度じっくり考えてみましょう。答えに辿り着かなくても、あれこれコードをいじっているうちに思いがけない発見があったりすることもありますよ。

それでは始めましょう。問題は[初級]、[中級]、[上級]と3つあります。

画像で示される色のついたブロックをHTMLとCSSを使って作成してみましょう。画像の下にあるリンクから完成デモを見ることができます。

Q① レイアウトを構成する[初級]

下の図形を作成してください。

完成デモ

これから下は解説になりますが、解説を見る前に一度作ってみましょう。

Q① レイアウトを構成する[初級] 解説

模範のHTMLソースはこんな感じです。↓↓
CSSもHTMLソースの<style>内に記述しています。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">

		#wrapper{
			width: 600px;
			height: 600px;
			margin: 0 auto;
		}

		#left{
			width: 200px;
			float: left;
		}

		#center{
			width: 200px;
			float: left;
		}

		#right{
			width: 200px;
			float: left;
		}

		.red{
			background: red;
			width: 200px;
			height: 500px;
		}

		.yellow{
			background: yellow;
			width: 200px;
			height: 100px;
		}

		.blue{
			background: blue;
			width: 200px;
			height: 200px;
		}

		.green{
			background: green;
			width: 200px;
			height: 400px;
		}

		.black{
			background: black;
			width: 200px;
			height: 300px;
		}

		.pink{
			background: pink;
			width: 200px;
			height: 300px;
		}
	</style>

</head>
<body>
	<div id="wrapper">
		<div id="left">
			<div class="red"></div>
			<div class="yellow"></div>
		</div>

		<div id="center">
			<div class="blue"></div>
			<div class="green"></div>
		</div>

		<div id="right">
			<div class="black"></div>
			<div class="pink"></div>
		</div>
	</div>
</body>
</html>

ポイントは、縦の3行をそれぞれ<div>でブロックにし、floatタグで横並びにするというイメージができれば理解がしやすいと思います。

横200px、縦600pxの<div>を3つ作り、さらにそれぞれの<div>の中に2種類の<div>を入れて色を変えています。

縦長の3つの<div>を、「16行目」「21行目」「26行目」にあるfloat:left;によって横並びにしています。

解説は以上になります。


初級の練習問題はいかがでしたでしょうか?floatタグはよく使われるタグでありますがなかなかの曲者で、初心者の方が完璧に理解しようと思うと結構苦労すると思います。なかなか言うことを聞いてくれないことがありますが、最初から完璧に理解しようとするのではなく、ちょっとずつfloatと仲良くなっていけばいいと思います。

floatに苦戦し続けている方はfloat失敗例の原因と解決策|[カラム落ち] [予期せぬ回り込み]の記事も参考にしてみてください。floatでよくありがちな失敗例と解決方法を解説しています。

それでは、次は中級の練習問題です。

Q② レイアウトを構成する[中級]

先ほどの問題を少し応用して下の図形を作成してください。

完成デモ

これから下は解説になります。

Q② レイアウトを構成する[中級] 解説

模範のHTMLソースはこんな感じです。↓↓

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">

		ul{
			margin: 0;
			padding: 0;
		}

		li{
			list-style: none;
		}

		#wrapper{
			width: 600px;
			height: 900px;
			margin: 0 auto;
		}

		#header{
			width: 600px;
			height: 200px;
		}

		.title{
			width: 600px;
			height: 100px;
			background: blue;
		}

		.menu{
			width: 600px;
			height: 100px;
		}

		.menu li{
			width: 100px;
			height: 100px;
			float: left;
		}

		.menu li:nth-of-type(even){
			background: pink;
		}

		.menu li:nth-of-type(odd){
			background: gray;
		}

		#body{
			width: 600px;
			height: 600px;
		}

		.main{
			width: 400px;
			height: 600px;
			float: left;
			background: skyblue;
		}

		.sidebar{
			width: 200px;
			height: 600px;
			float: left;
		}

		.sidebar div{
			width: 200px;
			height: 200px;
		}

		.side-1{
			background: yellow;
		}

		.side-2{
			background: orange;
		}

		.side-3{
			background: red;
		}

		#footer{
			width: 600px;
			height: 100px;
			background: lime;
		}
	</style>

</head>
<body>
	<div id="wrapper">
		<div id="header">
			<div class="title"></div>
			<div class="menu">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>

		<div id="body">
			<div class="main"></div>
			<div class="sidebar">
				<div class="side-1"></div>
				<div class="side-2"></div>
				<div class="side-3"></div>
			</div>
		</div>

		<div id="footer"></div>
	</div>
</body>
</html>
	

今回もfloatを使ってレイアウトを組み立てるのですが、難しいところはどこまでのブロックをdivでブロック化するかです。

あんまり細かくdivで分け過ぎてしまうと構造自体が複雑になりカスタマイズする時などに手を焼くことになってしまうので、出来る限り最小限のdivの利用にとどめましょう。

今回のdivの分け方は上の図のようにしています。基本的にレイアウトを組む時にどこからどこまでをブロック化をするかを考える時は、floatを使わなければいけない要素が出てきたときにその親要素をdivなどでブロック化するというイメージです。

今回のケースで言うと、.mainと.sidebarの要素にfloatを付けて横並びにしたいので、親要素の#bodyと子要素の.mainと.sidebarをdivでブロック化し、.mainと.sidebarを#bodyの中で横並びにさせるというイメージです。

その他、細かいところのポイントを解説していきます。

8行目~15行目

ul{
	margin: 0;
	padding: 0;
}

li{
	list-style: none;
}

ulは何も設定していなければmarginやpaddingが勝手についてしまうため、marginとpaddingを0に指定しています。

liも何も指定していなければ、リストの前に・(中黒)がついてしまうので、list-styleにnoneを指定して・(中黒)がつかないようにしています。

39行目~51行目

.menu li{
    width: 100px;
    height: 100px;
    float: left;
}

.menu li:nth-of-type(even){
    background: pink;
}

.menu li:nth-of-type(odd){
    background: gray;
}

ピンクとグレイのところは実際のホームページのメニュー欄を想定してulタグとliタグを利用していますが、divなど他のタグを使っていても大丈夫です。

nth-of-type(even)は、偶数番目にあるタグだけにスタイルをあてるやり方になります。これだけで.menuの中にあるliタグの2番目、4番目、6番目…だけに背景色を指定できるので、交互に色を変えたリストを作りたい時などには非常に便利です。

反対に、nth-of-type(odd)は奇数番目にあるタグを指定するセレクタになります。

解説は以上になります。


中級の練習問題はいかがでしたでしょうか?最後の上級問題はpositionタグを使った要素の位置指定を使ってレイアウトを組んでいきます。

Q③ レイアウトを構成する[上級]

positionタグを利用して下記の図形をHTMLとCSSで作成してください。

今回は要素の大きさや配置をパーセンテージで設定している箇所もありますので、ウィンドウ幅を変更しても同じように表示されているか確認しましょう。

完成デモ

これから下は解説になります。

Q③ レイアウトを構成する[上級] 解説

模範のHTMLソースはこんな感じです。↓↓

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body,
		ul{
			margin: 0;
			padding: 0;
		}

		li{
			list-style: none;
		}

		header,
		section,
		footer{
			width: 100%;
		}

		#menu{
			overflow: hidden;
		}

		#menu li{
			width: 20%;
			height: 100px;
			float: left;
		}

		#menu li:nth-of-type(odd){
			background: skyblue;
		}

		#menu li:nth-of-type(even){
			background: blue;
		}

		#header-main{
			height: 300px;
			background: gray;
			position: relative;
		}

		.block{
			width: 100px;
			height: 100px;
		}

		.header-block1{
			background: red;
			position: absolute;
			top: 30%;
			left: 20%;
		}

		.header-block2{
			background: orange;
			position: absolute;
			top: 30%;
			right: 20%;
		}

		section{
			height: 300px;
			background: pink;
			position: relative;
		}

		.section-set{
			width: 200px;
			height: 100px;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}

		.section-block1{
			background: lime;
			float: left;
		}

		.section-block2{
			background: green;
			float: left;
		}

		footer{
			height: 200px;
			background: black;
		}

	</style>
</head>
<body>
	<header>
		<ul id="menu">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div id="header-main">
			<div class="header-block1 block"></div>
			<div class="header-block2 block"></div>
		</div>
	</header>
	<section>
		<div class="section-set">
			<div class="section-block1 block"></div>
			<div class="section-block2 block"></div>
		</div>
	</section>
	<footer>
	</footer>
</body>
</html>
	

今回は初級・中級のテクニックを使いながら、positionタグを使うことで要素の位置を指定する必要があります。

positionタグを完全に理解するには複雑で初心者の方にはなかなか難しいですが、要素を思った通りの場所に指定するだけなら簡単にできますので少しずつ使いこなせるようにしていきましょう。

それではポイント毎に解説していきます。

7行目~11行目

body,
ul{
	margin: 0;
	padding: 0;
}

<ul>だけでなく、<body>にもmarginやpaddingが自動的に入ってしまうので消しています。<body>にmargin:0;とpadding:0;を指定しておかなければ、ウインドウの周りに小さな余白ができてしまいます。

17行目~21行目

header,
section,
footer{
	width: 100%;
}

今回はウインドウ全体に要素を広げるため、<body>の次に来る親要素全てにwidth:100%;を指定しています。これでウインドウ幅の大小に関わらずいっぱいになるまで要素が広がります。

27行目~31行目

#menu li{
	width: 20%;
	height: 100px;
	float: left;
}

今回は親要素のwidthが100%となっています。#menuの中にあるli要素の数が5つあるので、100%を5で割った20%をliのwidthとして指定しています。

41行目~45行目

#header-main{
	height: 300px;
	background: gray;
	position: relative;
}

ここでpositionタグが登場しました。redのブロックとorangeのブロックの位置を指定したいので、まずはその親要素となるgrayのブロック(#header-main)にposition:relative;を指定します。

52行目~57行目

.header-block1{
	background: red;
	position: absolute;
	top: 30%;
	left: 20%;
}

redのブロックをgrayのブロックの上から30%、左から20%の位置に配置したいので、まずはposition:absolute;を指定します。これで、position:relative;を指定したgrayのブロックから好きな位置に要素を指定できるようになります。

位置の指定の仕方は、上から30%ならtop:30%;、左から20%ならleft:20%;と指定します。

59行目~64行目

.header-block2{
	background: orange;
	position: absolute;
	top: 30%;
	right: 20%;
}

orangeのブロックもredのブロックと同様、position:absolute;を指定して位置を指定します。orangeのブロックは右から20%なので、right:20%;を指定します。

72行目~81行目

.section-set{
	width: 200px;
	height: 100px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

pinkのブロックでは、limeとgreenのブロックを上下左右の中央に配置します。top、bottom、left、rightの全てを0にし、全方向にmargin: auto;を指定することで、指定された要素が、position:relative;を指定された親要素から上下左右中央の位置に配置されるようになります。

上下左右中央に配置させる方法については「なんで?」と思うかもしれませんが、これは深く考えずにそういうテクニックがあるという認識でいいかと思います(^^;)

解説は以上になります。

まとめ

今回はHTML、CSSコーディング初心者の方向けにレイアウト構造を練習問題にして解説させていただきました。

2番目の練習問題は実際のホームページのレイアウトをイメージして作ってみましたが、実際にホームページ制作を行う時もこのようなイメージでレイアウトを組み立てて中身を詰めていくイメージになりますので、このレイアウトを構成することがホームページ制作の第一歩ともいえる大事な作業です。

3番目の練習問題ではpositionタグを使った要素の位置指定を使っていますが、ここまで完璧にマスター出来たら簡単なホームページのレイアウト組みは出来るようになるのではないかと思います。

レイアウトを組む段階で複雑な構造にしてしまうと後々大変な思いをすることになります。作った後でも簡単にカスタマイズできるよう、シンプルでスタイリッシュなレイアウトを作れるようになりましょう。

その他のCSS練習問題

[CSS練習問題] hoverでクールなマウスオーバーエフェクトを作ろう

CSSの知識レベルチェック|サクッとできる選択式練習問題をやってみよう!

[CSS練習問題] flexboxでレイアウトを綺麗に整えよう

コメントを残す

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