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

学科 CSS基礎③

-本日のアジェンダ-

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

2限目
学科 CSS基礎③
練習問題の説明

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

4限目
学科 CSS基礎③
練習問題の解説

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

本日のテーマ

レイアウトデザイン練習問題③(レイアウトを定義するCSS)

本日は、レイアウト系のCSSを中心に説明しますが、一部のプロパティと各プロパティの詳細説明は「CSS基礎④」で説明します。

レイアウト系プロパティ

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

ボーダー系プロパティ【CSS基礎④で説明】

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

パディング系プロパティ

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

マージン系プロパティ

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

その他のプロパティ【CSS基礎④で説明】

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

練習問題:レイアウトを定義するCSS

【資料】

ドロップボックスの資料をダウンロードしましょう。
資料 > 【STEP3】Webページの理解 > レイアウトデザイン 練習問題③
Webサイト制作のレイアウトを定義するCSSの練習資料です。

【動画】

本日の課題

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