【FlexBox練習】webページをイチから製作してみよう

FlexBoxの学習

このサイトはコーディングで必須スキルのFlexBoxを勉強するための勉強教材です。

こんな人にオススメ

一つでも該当するなら、ぜひ読み進めてください!

ただし、一点だけ注意点。

FlexBoxの詳しい説明をしているわけではなく、webサイトを作りながらflexBoxの挙動や使い方をマスターしたい人向けです。

また、FlexBoxのアウトプットに重きをおいているので、webサイトのデザイン・構成はガバガバです。

今後アップデートしていく予定ではありますが、ご了承いただけると嬉しいです。

れむ
れむ

質問や疑問はTwitterから連絡してね
>>れむのTwitter

FlexBoxを使ったWebサイトの完成品

まずは、完成品の挙動を見てください。以下の動画からご覧いただけます。

flexboxで使える技能を詰め込みながら、ちょうどいいレベル感で製作できます。

Web製作の流れを理解する

Web製作の流れ

だいたい3時間程度で終わることを想定しています。

また、HTML→CSS→レスポンシブ対応という流れでコードを書いていきますね!

れむ
れむ

要所要所で確認するので安心してね!

早速始めましょう!

HTMLを書いていく

それでは1stステップのHTML部分を書いていきましょう。

vscodeというエディタに記述していきます。

エディタはなんでもいいですが、オススメなのでぜひ導入して見てください。

チェックするブラウザはChromeを使用します。Chromeは必須なのでぜひダウンロードお願いします。

>>Chromeをダウンロードする。

また、フォルダ構成は以下の通りになっています。

FlexBoxの学習

今回はjsのフォルダは不要ですが、それ以外は真似しておいてください。

画像については、適宜支給させていただきます。

雛形のコードを書いていく

まずは、HTMLの雛形を作っていきます。

今から以下のコードを記述していくわけですが、書き写す必要はありません。

<!DOCTYPE html>
<html lang="ja"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="style.css">
  <title>タイトル</title> 
</head> 

<body> 

<p>Hello World</p> 

</body> 
</html>

上記はHTMLのテンプレートであるため、コピー&ペースト(以下コピペ)でOKです。

『HTML テンプレート』でググれば似たようなコードが出てくるので、安心してコピペしてください。

HTMLファイルをブラウザで開いて、Hello Worldと出現したらOKです。

ヘッダー部分を製作していく

続いてはヘッダー部分を製作していきましょう。

ここからはコピペではなく、コードを手打ちすることを推奨しています。

まずは、今までのコードのpタグで囲まれたHello Worldを削除します。

<!DOCTYPE html>
<html lang="ja"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="assets/css/style.css">
  <title>タイトル</title> 
</head> 

<body> 



</body> 
</html>

そして、以下のコードを記述しましょう。

<body> 
  <!-- body直下から記述-->
	<header>
		<nav>
			<div class="logo">
				<h1>
					<a href="">
						Remublog
					</a>
				</h1>
			</div>
			<div class="menu">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Portfolio</a></li>
					<li><a href="#">Service</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
		</nav>
	</header>/body> 

これは、ヘッダーのコードにあたります。

そして、ブラウザチェックすると以下の画像の通りになります。

FlexBoxの学習画像

画像の通りにできていたら、次へ進みましょう。

ファーストビューの作成

ファーストビューとは、webページを開いたときに一番最初に目に入る部分のことです。

一番目立つ部分であるため、ヒーロー(Hero)セクションというように呼ばれることもあります。

今からその部分を製作していきます。

</header>
<!--headerの下から記述-->
<section id="hero">
	<div class="hero-text">
		<div class="hero-text-items">
			<h2>Banner text heading</h2>
			<p>
				testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
          testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
          testtesttesttesttesttesttesttesttest
			</p>
		</div>
	</div>
</section>

ブラウザチェックでは、以下の通り表示されます。

FlexBoxの学習画像経過

次は、その下にある箇所を作っていきます。

並列セクションの作成

ここは、並列に何かを並べるときのセクションになります。

FlexBoxをCSSで記述していくときに、一番恩恵を受ける箇所でもあります。

ここはdivタグで囲まれた、main-itemの部分はコピペしていただいて構いません。


<!--heroセクションの下に記述-->
<section class="main"> 
	<div class="main-content">
        <!--このmain-itemはコピペしてOKです-->
		<div class="main-item">
			<h2>Main Heading h2</h2>
			<p>テストテストテストテストテストテストテストテストテストテストテストテストテストテスト
				テストテストテストテストテストテストテストテストテストテストテストテストテストテスト
			</p>
		</div>
		<div class="main-item">
			<h2>Main Heading h2</h2>
			<p>テストテストテストテストテストテストテストテストテストテストテストテストテストテスト
				テストテストテストテストテストテストテストテストテストテストテストテストテストテスト
			</p>
		</div>
        <div class="main-item">
			<h2>Main Heading h2</h2>
			<p>テストテストテストテストテストテストテストテストテストテストテストテストテストテスト
				テストテストテストテストテストテストテストテストテストテストテストテストテストテスト
			</p>
		</div>
	</div>
</section>

ブラウザチェックするとこんな感じになります。

FlexBoxの学習画像経過

それでは、最後にコンタクトのフォームを作っていきましょう。

コンタクトセクション

最後に、コンタクトセクションを作っていきましょう。

ちなみに、実際にメールなどを送るようにするには、phpやwordpressなどのツールを導入する必要があります。

あくまで、HTMLとCSSの練習として対応してください。

<!--並列セクションの下に記述-->
<section id="contact">
	<div class="contact-container">
		<div class="contact-items">
			<h2>Contact us</h2>
			<input type="text" placeholder="お名前">
			<input type="text" placeholder="メールアドレス">
			<textarea name="" placeholder="お問い合わせ内容" id="" cols="20" rows="20"></textarea>
			<button>Submit</button>
		</div>
	</div>
</section>
</body>
</html>

ブラウザチェックするとこんな感じになります。

FlexBoxの学習画像経過

以上でHTMLの記述は完了です。

れむ
れむ

ほならば、CSSの記述を初めていきましょう!

CSSの記述【FlexBox頑張りましょう】

それでは、いよいよ本番です。

FlexBoxを含めたCSSを記述していきましょう。

共通部分を設定していく

まずは、大きくサイトに関わる部分を調整しましょう。

*{
    margin: 0;padding: 0;
}
section {
	padding: 70px 0;
}

共通セクションと呼ばれる、全体に関わる部分を処理していきます。

ブラウザチェックをすると、cssが適応されていることがわかります。

FlexBoxの学習画像経過

ヘッダー部分のCSSを記述していく

まずはヘッダー部分とFlexBoxを記述していきます。

FlexBoxがちんぷんかんぷんという方は、こちらの記事を読んでさらっと頭に入れておいてください。

ガチガチに覚える必要はなく、実践する中で適宜調べて覚えましょう。

では、コードを書いていきます。

header {
	background-color: #000;
}
.logo{
	flex: 1;
	padding: 18px 0;
}
.logo a {
	color: #fff;
  text-decoration: none;
}
.menu {
	flex: 3;
}

この状態を簡単に解説すると、以下の画像的な感じです。

FlexBoxの学習画像経過

要するに、flexが1:3の割合で占領しているイメージです。

実際にブラウザチェックをすると以下のようになります。

FlexBoxの学習画像経過

次に、リスト要素の色を変えたり、横並びにしていきましょう。

.menu ul {
	display: flex;
	list-style: none;
}
.menu ul li {
	flex: 1;
	text-align: center;
}
.menu ul li a{
	color: white;
	font-size: 20px;
	text-decoration: none;
}

これも同様ですね。

FlexBoxの学習画像経過

親要素menu ulがdisplay:flex;になっています。

その上で、子要素であるリストliに、flex1を指定されており、均等に配分されるということです。

ブラウザチェックするとこんな感じ

FlexBoxの学習画像経過

いい感じのヘッダーができました!

ファーストビューのcss

続いてはファーストビューを作っていきます。

背景で使うimgについては、以下からダウンロードをお願いします。

#hero {
	background: url("img/pc1.jpg");
	width: 100%;
	background-size: cover;
}
.hero-text {
	display: flex;
	padding: 15% 0;
}
.hero-text-items {
	color: #fff;
	text-align: center;
	width: 50%;
	margin: 0 auto;
	overflow-wrap: break-word;
}
.hero-text-items h2 {
	font-size: 3em;
	margin: 0 0 20px 0;
}
.hero-text-items p {
	font-size: 18px;
}

あまりFlexBox関係ないので、サクサク進めます。

ブラウザチェックは以下の通りになっていれば成功です!

FlexBoxの学習画像経過

並列セクションのCSS

次は、FlexBoxの恩恵を最大限享受できるポイントです。

.main-content {
	display: flex;
	flex-flow: row wrap;
	padding: 5% 0;
}
.main-block {
	flex: 1;
	padding: 3%;
	text-align: center;
}

ここでのキーワードは、Flex-flowというcssです。

flex-directionプロパティ(row)・ flex-wrapプロパティ(wrap)の値を、flex-flowプロパティ一つでまとめて指定できます。

rowの意味は、横並びにするという意味です。

wrapの意味は、幅が狭くなったら折り返す(=レスポンシブ)という意味になります。

ブラウザチェックの結果がこちらの画像です。

FlexBoxの学習画像経過

横並びになっていれば大成功です!

コンタクトセクションの作り方

背景の画像についてはこちらからダウンロードお願いします。

#contact {
	background: url("img/pc3.jpg");
	background-size: cover;
}
.contact-items {
	display: flex;
	align-items: center;
	flex-direction: column ;
}

ブラウザチェックするとこんな感じになります。

FlexBoxの学習画像経過

次に、細かいレイアウトを設定していきます。

.contact-items h2 {
	color: #fff;
	font-size: 40px;
	margin: 0 0 18px 0;
}
.contact-items input[type="text"] {
	border-radius: 10px;
	margin: 15px;
	padding: 15px;
	width: 50%;
}
.contact-items textarea {
	border-radius: 10px;
	height: 150px;
	padding: 15px;
	width: 50%;
}
.contact-items button {
	background: #2d89b9;
	color: #fff;
	display: block;
	font-size: 20px;
	margin: 25px 0 0 0 ;
	padding: 15px 80px;
	text-decoration: none;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.5s;
}
.contact-items button:hover {
	background: #4a8fb2;
}
FlexBoxの学習画像経過

こんな感じになっていれば成功です。

レスポンシブ対応をしていく

お疲れ様です。まずはこの状態で、画面幅をグイングインいじってみてください。

このように、ある程度はレスポンシブ対応をしていることがわかっていただけると思います。

ですが、細かい箇所はまだまだ対応できていないので、調整していきたいと思います。

ヘッダーのレスポンシブ調整

@media screen and (max-width:780px) {
	nav{
		flex-direction: column;
		text-align: center;
	}
	.logo{
		padding: 18px 0 0;
	}
}
FlexBoxの学習画像経過
.menu ul {
	flex-direction: column;
	margin: 0 ;
}
.menu ul li {
	padding: 5px;
}
FlexBoxの学習画像経過

ファーストビューのレスポンシブ対応

.hero-text-items{
	width: 90%;
	margin: 0 auto;
}
.hero-text-items h2 {
	font-size: 1.5em;
}
FlexBoxの学習画像経過

並列セクションのレスポンシブ対応

.main-content {
	flex-direction: column;
}
FlexBoxの学習画像経過

コンタクトセクションのレスポンシブ対応

.contact-items input[type="text"] {
	width: 70%;
}
.contact-items textarea {
	width: 70%;
}
FlexBoxの学習画像経過

FlexBoxで簡単にwebサイトを完成

それでは、最後の最後にfontをいじっていきます。

fontを少しいじるだけで、雰囲気を大きく変えることができます。

cssの一番上に、以下のコードを記述してください。

@import url('https://fonts.googleapis.com/css?family=Rock+Salt');
*{
		margin: 0;padding: 0;
		font-family: 'Rock Salt', cursive;
}
p,button {
	font-family: Arial, Helvetica, sans-serif;
}

一気に、webサイトの表情を変えることができました。

FlexBoxの学習画像経過

以上でflexboxに関する学習教材は終了です!

感想や疑問点などをいただけると喜びます!

>>れむに連絡する