本日のアジェンダ
1限目
学科 HTML/CSS基礎⑥
CSSの記述方法について
2限目
学科 HTML/CSS基礎⑥
CSSの記述方法について
3限目
学科 HTML/CSS基礎⑥
Webページ制作実践
4限目
学科 HTML/CSS基礎⑥
Webページ制作実践
5限目
学科 HTML/CSS基礎⑥
本日の講義のまとめ
本日のテーマ
CSSの記述をしましょう
本日のレポート
記述しながら分からなかったことの振り返り
padding・margin プロパティ（一括措定）
1つ指定：「上下左右」のすべての指定になります。
2つ指定：「上下」と「左右」の順で指定します。
3つ指定：「上」と「左右」と「下」の順で指定します。
4つ指定：「上」と「右」と「下」と「左」の順で指定します。
background-repeat: no-repeat
これを指定しないと画像が繰り返し表示（初期値）になる
justify-content: space-between;
横並びの要素を両端揃えで均等に配置する指定
★左側に寄っていたGNが右端揃えになった（左端にはTOPロゴ）
align-items: center;
要素の中央揃え ※flexプロパティ
★GNが上段揃えから中央揃えに変わった。
HTMLとCSSの「em」は全く異なる意味合いなので注意
margin: 0 auto;
width プロパティでボックスの幅を指定した状態で左右のマージンを「auto」に設定（例えば「margin: 0 auto;」）するとボックスを親要素の中央に配置することができます。
Flex-wrap: wrap;
要素を縦横に並べた際に、折り返しの指定をするためのプロパティ
HTMLでclass名を複数付けたいとき、空白をあける
例： <div class=”purposeWrapper gift”>
→ この要素のクラス名はpurposeWrapper と gift ということになる。
flex-direction: row-reverse;
要素の配置方向を右端から左に設定。書字方向とは逆になる。「row」は要素の配置方向と同じ順になる。
｜ ←①②③｜
line-height: 2;
「2」を値に設定してフォントサイズを10pxにすると、行間は、
「（20px（行の高さ：フォントサイズの2倍）- 10px（フォントの大きさ））÷ 2 = 5px」となります。
つまりフォントの上下に5pxずつの余白が生まれる計算です。
制作物（本日までの途中経過）
感想
今日は実際にCSSの記述を進めていった。
昨日のオンライン授業で説明を受けたプロパティを見返しながら進めたのでなんとなく理解はできた。
