HTML＆CSS_01
今回のテーマは「progate」の「HTML＆CSS初級編」を使って作れたものについて
※学習サイクルの詳細について知りたい方は前記事を参照ください
フェーズ１_学習
「progate」「HTML＆CSS初級編」を学習
フェーズ２_記録
テキストファイル化し以下のコードに手記入でメモ書き
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-logo">Sample</div>
<div class="header-list">
<ul>
<li>Contents_01</li>
<li>Contents_02</li>
<li>Contents_03</li>
</ul>
</div>
</div>
<div class="main">
<div class="copy-container">
<h1>サンプルページへようこそ<span>!</span></h1> /* span や a はインライン要素の為、改行が行われない*/
<h2>色々なページのベースとして使う予定です</h2>
</div>
<div class="contents">
<h3 class="section-title">画像イメージ一覧</h3>
<div class="contents-item">
<img src="https://pbs.twimg.com/profile_images/1421736526812041217/NYH8RA2G_400x400.jpg">
<p>img_01</p>
</div>
<div class="contents-item">
<img src="https://1.bp.blogspot.com/-mjkfErtfCTU/XXXObIPmwBI/AAAAAAABUto/0dQq-cQ5v64RR0IWbDgdlc10CgK2Or0jACLcBGAs/s1600/cat_wink_gray.png">
<p>img_02</p>
</div>
<div class="contents-item">
<img src="http://4.bp.blogspot.com/-1865joK51EI/Wb8gnbhjDpI/AAAAAAABGy4/ByWIh6Zt-hM-CCEzYWBxcuTJOOWz26kYwCLcBGAs/s800/pet_omocha_neko.png">
<p>img_03</p>
</div>
</div>
<div class="contact-form">
<h3 class="section-title">お問い合わせ</h3>
<p>メールアドレス（必須）</p>
<input>
<p>お問い合わせ内容（必須）</p>
<textarea></textarea>
<p>※必須内容は必ずご入力ください</p>
<input class="contact-submit" type="submit" value="送信">
</div>
</div>
<div class="footer">
<div class="footer-logo">Sample</div>
<div class="footer-list">
<ul>
<li>サンプル内容</li>
<li>サンプル画像引用先</li>
<li>お問い合わせ</li>
</ul>
</div>
</div>
</body>
</html>
CSS
body { /*タグ指定*/
font-family: "Meiryo UI"; /*フォント名*/
}
li {
list-style: none; /*リストの点消し*/
}
.header { /*クラス指定*/
background-color: #26d0c9; /*背景色*/
color: #fff; /*文字色*/
height: 90px; /*縦のサイズ*/
}
.header-logo {
float: left; /*寄せ（左寄せ）*/
font-size: 36px; /*文字サイズ*/
padding: 20px 40px; /*パディング（ボックスの内側の余白）*/
}
.header-list li { /*クラス内のタグ指定*/
float: left;
font-size: 33px 20px;
}
.main {
padding: 100px 80px;
}
.copy-container h1 {
font-size: 100px;
}
.copy-container h2 {
font-size: 50px;
}
.copy-container span {
color: red;
}
.contents {
height: 500px;
margin-top: 100px; /*マージン（ボックスの外側の余白）*/
}
.section-title {
border-bottom: 2px solid #dee7ec; /*罫線*/
font-size: 28px;
padding-bottom: 15px;
margin-bottom: 50px;
}
.contents-item {
float: left;
margin-right: 40px;
}
img {
width: 250px; /*横の幅（画像も自動で調整される模様）*/
}
.contents-item p {
font-size: 24px;
margin-top: 30px;
}
.contact-form {
margin-top: 100px;
}
input, textarea { /*タグ複数指定*/
width: 800px;
margin: 10px 0 30px 0;
padding: 20px;
font-size: 18px;
border: 1px solid #dee7ec;
}
.contact-submit {
background-color: #dee7ec;
color: #889eab;
}
.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}
.footer-logo {
float: left;
font-size: 32px;
}
.footer-list {
float: right;
}
.footer-list li {
padding-bottom: 20px;
}
メモ書き
HTML
・span a はインライン要素の為、改行されない
CSS
・font-famiry フォント名
・list-style: none; リストの点消し
フェーズ３_実践
「codepen」を使って実際にページ作成
メモ書きを行ったテキストファイルを使用する
※「0.25x」推奨
See the Pen
サンプルページ by yuta-proto-biz (@yuta-proto-biz)
on CodePen.
フェーズ４_発信
この記事自体が「フェーズ４_発信」であるのでこの欄は「所感」とします
「フェーズ２_記録」にてテキスト出力し、メモ書きを行ったことで
理解が深まると共に「フェーズ３_実践」を行う際の「設計図」になりました
格段に作成がしやすくなったと感じます