自主学習2-10「プロゲートHTML/CSSコース終了後の成果物を作成」

2020年9月4日 2020年9月14日

鷹の目ゴミコ

前回「自主学習2-9」にてGithubの登録まで完了しました。今回は途中になっていたプロゲートHTML/CSSコースについて、おさらいしていきます。

contents

1 プロゲートHTML/CSSコース上級編とフレックスボックス編について
2 真似っ子しながらwebページを作成しよう
3 使用した画像について
4 今回の実践でわかったことと、今後の課題
- - 4.0.1 実践は大事
  - 4.0.2 記述方法の勉強「設計思想を知ろう」
5 今回作成したwebページのコードについて
6 自主学習2-10について、講師の評価

プロゲートHTML/CSSコース上級編とフレックスボックス編について

プロゲートHTML/CSSコースの上級編の内容については、主にメディアクエリを使用したレスポンシブデザインについての学習になります。さらに番外編でフレックスボックスについても学習することができます。

※メディアクエリとフレックスボックスの基礎については自主学習1-5と1-6で学習しているので、プロゲートの内容紹介については今回省略とさせていただきます。

これでプロゲートのHTML/CSS編を全て終了しましたので、学習の成果物（実際のwebページ）を作成してみようと思います。

真似っ子しながらwebページを作成しよう

まず参考にしたのはプロゲート中級編で作ったwebページで、これを自分なりに目視で真似してゼロから作っていきます。ブラウザの開発者ツールでソースコードを確認しながらの模写ではなく、目視で真似することに挑戦しています。

ゴミコ

要素の配置にはどのタグを使えばこうなるのか？など、そういったことをゼロから経験したくて目視でのサイト模写に挑戦してみたよ。

真似っ子するページ

上記が真似するページ。これを試行錯誤しながら真似して作成したものがこちら。

真似っ子で出来上がったページ

レスポンシブデザイン対応で、スマホバージョンがこちら。

参考画像2-10-2

ゴミコ

ど…どうかな…。雰囲気は真似できているのでは…。

真似っ子した箇所

真似した箇所一覧

ヘッダー部

「タイトル」と「ログイン」をブロック要素にしてfoatタグで左右に配置。

本体部

メインタイトルとサブテキストをブロック要素で配置。
その下に「新規登録」と「or sign up with」のテキストをフレックスボックスとして縦並びで配置。
「facebook」と「twitter」もフレックスボックスとして横並びで配置。
SNSのアイコンはFont Awesome（各種アイコンをフリーで使用することのできるサイト）のURLを指定。

装飾

本体部にはレイヤーの最下部に画像を挿入。
次に背景色をグラデーションで指定。
タイトルとテキストは透過させず、アイコンのみ透過を指定。
リンクで別ページに移動させる箇所はhoverにてカーソルが乗った際のブロックの色変えを指定。

レスポンシブデザイン

本体部のテキストサイズをメディアクエリで指定。
各アイコンはフレックスボックスにより自動で縮小される。

使用した画像について

画像はイラストAC（ダウンロードの際にアンケートに応えることで、フリーでイラストが使用できるサイト）にてダウンロードしています。

今回の実践でわかったことと、今後の課題

実践は大事

今回の目視によるwebページ作成によって、「理屈ではわかっていても、実際にカタチにすることは訓練していかないと難しい」ということが分かりました。プロゲートや自主学習で過去に学習した項目であっても、実際にコードを書いてみると「思い通りの表示にならない…！」ということも多く、何度も同じキーワードで検索しては調べ、どうにかこうにかカタチになりました。

記述方法の勉強「設計思想を知ろう」

今回のwebページは見た目のボリュームがなく、HTMLの記述部分も少なかったものの（初学者ゴミコの個人的な感覚ですが）CSSでの記述が結構な量になりました。そのため、修正箇所があってもセレクタを上から順に探していくという作業がかなり非効率です。

そこでふと講師によるレッスン2回目のアドバイスにあった「設計思想を知ろう」という指摘を思い出しました。

ゴミコ

…すっかり忘れていた。設計思想についての勉強していなかったな…。

ということで、次回は設計思想について詳しく学習していこうと思います。

今回作成したwebページのコードについて

HTMLの全文表示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
		<!-- スタイルシートの読み込み -->
		<link rel="stylesheet" href="./style01.css">
		<title>ウチの台所</title>		
		<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
	</head>
	
	<body>
	 <header>
	  <div class="header_name">ウチの台所</div>
	  <div class="header_login">ログイン</div>	
	 </header>

	 <div class="background">
	
		 <div class="main_title">
	 	 	
	 	 	<div class="main_title_box">
		 		<div class="main_title_maintext">
		 		今日も今日とて、ウチごはん<br><span class="apri_name">「ウチの台所」</span>
		 		</div>
		 		
		 		<div class="main_title_subtext">
		 		「ウチの台所」は毎日の食卓をシンプルに記録するサービスです。<br>心を込めて作った毎日のごはんたち、写真で記録しませんか？
		 		</div>
		 	</div>
			
				<div class="main_title_icon">

					<div class="iconbox1">
						<div class="main_title_icon1">
						新規登録はこちら
					    </div>

					    <div class="main_title_icon_text">
					    or sign up with
						</div>
					</div>

						<div class="iconbox2">

							<div class="main_title_icon2">
							<i class="fab fa-facebook-f"></i>
							Facebookで登録
						    </div>

						    <div class="main_title_icon3">
						    <i class="fab fa-twitter"></i>
							Twitterで登録
						    </div>

						</div>

		 		</div>
		 	
		</div>


	</body>
</html>

CSSの全文表示

@charset="UTF-8";

*
{
	font-family: sans-serif;
}

header
{
width: auto;		/* 横幅 */
height: 45px ;		/* 高さ */
font-size: 30px;
color: darkslategray;
background-color: aliceblue;
}

.header_name
{
float: left;
}

.header_name:hover
{
opacity:0.5;
color: white;
background-color: lightblue;
}

.header_login
{
float: right;
}

.header_login:hover
{
opacity:0.5;
color: white;
background-color: lightblue;
}

.background
{
position: relative;
width: 100%;
height: 600px; 
background-image: url(./main_img.jpg);
background-position: center;
}

.main_title
{
position: absolute;
width: 100%;		/* 横幅 */
height: 600px ;		/* 高さ */
background: linear-gradient(rgb(123,104,238,0.5), rgb(245,255,250,0.5));
color: darkslategray;
font-weight: bold;
}

.main_title_box
{
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
margin: 50px 50px 50px 50px;
}

.main_title_maintext
{
font-size: 40px;
margin: 10px 50px 10px 50px;
}

.apri_name
{
font-size: 60px;
display: inline-block;
width: 100%;
text-align: center;
}

.main_title_subtext
{
font-size: 20px;
margin: 10px 50px 10px 50px;

}

.main_title_icon
{
text-align: center;
font-size: 12px;
margin: 50px 50px 50px 50px;
padding: 10px 10px 10px 10px;
color: white;
}

.iconbox1
{
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;

}

.main_title_icon1
{
background-color: #239b76;
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
opacity: 0.5;
border-radius: 5px;
}

.main_title_icon1:hover
{
background-color: #239b76;
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
opacity: 1.0;
border-radius: 5px;
}

.main_title_icon_text
{
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
color: darkslategray;
}



.iconbox2
{
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;

}

.main_title_icon2
{
background-color: #3b5998;
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
opacity: 0.5;
border-radius: 5px;
}

.main_title_icon2:hover
{
background-color: #3b5998;
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
opacity: 1.0;
border-radius: 5px;
}

.main_title_icon3
{
background-color: #55acee;
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
opacity: 0.5;
border-radius: 5px;
}

.main_title_icon3:hover
{
background-color: #55acee;
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
opacity: 1.0;
border-radius: 5px;
}

@media screen and (max-width:480px) { 
    /*　画面サイズが480pxからはここを読み込む（スマホサイズ）　*/
.apri_name,.main_title_subtext,.main_title_maintext
{
	font-size: 15px;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	
}
}