2時間かかった…。実戦編。paddingとmarginの違いはしっかり理解せねば。#デイトラ #30DAYSトライアル
— オサナイユウタ🎸🍺🖥 (@osanaiyuta) January 30, 2020
「HTML & CSS 道場コース 初級編」コースを修了しました！ https://t.co/q492CRAkwZ #Progate
5日目で慣れてきたぜ！と思って調子に乗ってたら、全然覚えてなくてヒーヒーでした。 初級だけで2時間…。CDかけながら歌ってたらいい感じだったのに、カラオケで歌ったら全然ダメだった感じと似ています。精進します。
実際に使ったhtml&cssコードとメモ
・HPの基本htmlメモ
<html>
<head>◯◯◯</head>
<body>
<div class="header">
<div class="header-logo">◯◯◯</div>
<div class="header-list">
<ul>
<li>◯◯◯</li>
<li>◯◯◯</li>
<li>◯◯◯</li>
</ul>
</div>
</div>
<div class="main">
<div class="copy-container">
<h1>◯◯◯</h1>
<h2>◯◯◯</h2>
</div>
</div>
<div class="footer">
◯◯◯
</div>
</body>
</html>
・それぞれの<li>に指定しないと全部の<li>にcssがかかってしまう
・paddingとmarginはどちらも余白を調整するもの。ボックスモデルを理解するとわかりやすい。
内側から順に
①要素（文字や画像）
②padding（要素の余白）
③枠線
④margin（枠線の外側の余白）
詳しくはこちらのサイトから。
・先にHTMLを書き上げてからCSSで装飾するイメージ
関連記事
