タグ: CSS

学科 CSS基礎⑤

-本日のアジェンダ-

1限目
学科 CSS基礎⑤
練習問題の説明

2限目
学科 CSS基礎⑤
Webページ運用・作成の困った問題

3限目
学科 CSS基礎⑤
練習問題の解説

4限目
学科 CSS基礎⑤
擬似クラスと擬似要素について

5限目
学科 CSS基礎⑤
本日の講義のまとめ

本日のテーマ

レイアウトデザイン練習問題④（Webページ運用・作成の困った問題）

練習問題：Webページ運用・作成の困った問題

【資料】

ドロップボックスの資料をダウンロードしましょう。
資料 ＞ 【STEP3】Webページの理解 ＞ レイアウトデザイン 練習問題④
Webサイト制作のWebページ運用・作成の困った問題の練習資料です。

【動画】

擬似クラス系セレクタ

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

擬似要素系セレクタ

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

本日の課題

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

学科 CSS基礎④

-本日のアジェンダ-

1限目
学科 CSS基礎④
レイアウト系のプロパティについて

2限目
学科 CSS基礎④
レイアウト系のプロパティについて

3限目
学科 CSS基礎④
ボーダー／パディング／マージンのプロパティについて

4限目
学科 CSS基礎④
その他のプロパティについて

5限目
学科 CSS基礎④
本日の講義のまとめ

本日のテーマ

Webページを自由に配置できるようになりましょう

レイアウト系プロパティ

  • width プロパティ（内容の幅）
  • max-width プロパティ（幅の最大値）
  • min-width プロパティ（幅の最小値）
  • height プロパティ（内容の高さ）
  • max-height プロパティ（高さの最大値）
  • min-heightプロパティ（高さの最小値）
  • float プロパティ（回り込み）
  • clear プロパティ（回り込みを解除）
  • position/top/left/bottom/right プロパティ（要素の配置方法）
  • z-index プロパティ（重なりの順序方法）
  • display プロパティ（要素の表示方法）
  • overflow プロパティ（ボックスからあふれた内容の処理方法）

ボーダー系プロパティ

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

パディング系プロパティ

  • padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
  • padding プロパティ（パディング一括指定）

マージン系プロパティ

  • margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
  • margin プロパティ（マージン一括措定）
  • マージンの相殺
  • マイナスマージン
  • ボックスの中央配置
  • ボックスの右端配置

その他のプロパティ

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

本日の課題

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