-本日のアジェンダ-
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の練習資料です。
【動画】
- レイアウトを定義するCSS
https://youtu.be/MeZU0DWXkbw(8分39秒)
本日の課題
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。