学科 HTML基礎④

-本日のアジェンダ-

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サイト制作のマークアップの練習資料です。

【動画】

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。