-本日のアジェンダ-
1限目
学科 HTML基礎④
CSSの基本事項について
2限目
学科 HTML基礎④
練習問題の説明
3限目
学科 HTML基礎④
マークアップの練習
4限目
学科 HTML基礎④
練習問題の解説
5限目
学科 HTML基礎④
本日の講義のまとめ
本日のテーマ
レイアウトデザイン練習問題①（マークアップの練習）
CSSの基本構造について
- HTML ファイルとは別に記述する場合
- HTML ファイル内に記述する場合
- HTML タグにインラインで記述する場合
セレクタの記載方法
- 全称セレクタ
- 型セレクタ
- id セレクタ（#）
- class セレクタ（.）
- 子孫結合子セレクタ
- 子結合子セレクタ（>）
- 隣接兄弟結合子セレクタ（+）
- 一般兄弟結合子セレクタ（~）
幅・高さの単位
- px（ピクセル値）
- %（要素の割合（百分率））
- em（要素の割合）
- rem（ルート要素の割合）
- vw（画面の表示幅の割合）
- vh（画面の高さの割合）
- calc 関数（値の計算）
色の指定方法
- カラーネーム
- #rgb（ハッシュ（#）で始まる 16 進数 3 桁）
- #rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
- #rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
- rgb(r,g,b)（rgb 関数）
- rgba(r,g,b,a)（rgba 関数）
- hsl(h,s,l)（hsl関数）
- hsla(h,s,l,a)（hsla関数）
- 線形グラデーション（linear-gradient 関数）
- 放射グラデーション（radial-gradient 関数）
練習問題：マークアップの練習
【資料】
ドロップボックスの資料をダウンロードしましょう。
資料 ＞ 【STEP3】Webページの理解 ＞ レイアウトデザイン 練習問題①
Webサイト制作のマークアップの練習資料です。
【動画】
- マークアップの練習
https://youtu.be/LB0vybRdUgA（14分21秒）
本日の課題
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。