本日のテーマ

レイアウト系プロパティを理解しましょう。

CSS:レイアウト系プロパティ

・poaition/top/left/bottom/rightプロパティ（要素の配置方法）

・z-indexプロパティ（重なりの順序方法）

CSS:ボーダー系プロパティ

・border-styieプロパティ（ボーダースタイル）・border-colorプロパティ（ボーダー色）・border-widthプロパティ（ボーダー幅）・borderプロパティ（ボーダー　一括指定）・border-top/bottml/-left/-right（ボーダー上下左右一括指定）

CSS:その他のプロパティ

・border-radiusプロパティ（ボーダーの丸み）・box-shadowプロパティ（ボックスの影）・box-sizingプロパティ（ボックスのサイズの計算）・contenプロパティ（挿入コンテンツ）object-fitプロパティ（画像トリミング）・object-positionプロパティ（画像の配置位置指定）

CSS:擬似クラス系セレクタ

・link擬似クラス（未訪問リンクスタイル）・visited擬似クラス（訪問済リンクスタイル）・hover擬似クラス（オンカーソルスタイル）・active擬似クラス（アクティブスタイル）・first-child/last-child擬似クラス（先頭・最終の子要素指定）・nth-child擬似クラス（n番目の子要素指定）・not-child擬似クラス（指定値以外の要素指定）

CSS:擬似要素セレクタ

・first-letter擬似要素（要素の1文字目を指定）・first-line擬似要素（要素の1行目を指定）・before/after擬似要素（要素の直前・直後にコンテンツの挿入）

学科 HTML/CSS基礎⑦【オンライン】

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎⑦
CSSのプロパティについて

2限目
学科 HTML/CSS基礎⑦
CSSのプロパティについて

3限目
学科 HTML/CSS基礎⑦
CSSのプロパティと値を考える

4限目
学科 HTML/CSS基礎⑦
Webページ制作実践

5限目
学科 HTML/CSS基礎⑦
Webページ制作実践

本日のテーマ

レイアウト系プロパティを理解しましょう

CSS：レイアウト系プロパティ

  • position/top/left/bottom/right プロパティ（要素の配置方法）
  • z-index プロパティ（重なりの順序方法）

CSS：ボーダー系プロパティ

  • border-style プロパティ（ボーダースタイル）
  • border-color プロパティ（ボーダー色）
  • border-width プロパティ（ボーダー幅）
  • border プロパティ（ボーダー一括指定）
  • border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）

CSS：その他のプロパティ

  • border-radius プロパティ（ボーダーの丸み）
  • box-shadow プロパティ（ボックスの影）
  • box-sizing プロパティ（ボックスサイズ計算）
  • content プロパティ（挿入コンテンツ）
  • object-fit プロパティ（画像トリミング）
  • object-position プロパティ（画像の配置位置指定）

CSS：擬似クラス系セレクタ

  • link 擬似クラス（未訪問リンクスタイル）
  • visited 擬似クラス（訪問済リンクスタイル）
  • hover 擬似クラス（オンカーソルスタイル）
  • active 擬似クラス（アクティブスタイル）
  • first-child/last-child 擬似クラス（先頭・最終の子要素指定）
  • nth-child 擬似クラス（n 番目の子要素指定）
  • nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
  • not 擬似クラス（指定値以外の要素指定）

CSS：擬似要素系セレクタ

  • first-letter 擬似要素（要素の 1 文字目を指定）
  • first-line 擬似要素（要素の 1 行目を指定）
  • before/after 擬似要素（要素の直前・直後にコンテンツの挿入）

本日の課題

本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。