-2025/10/21のアジェンダ-
1限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて
2限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて
3限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて
4限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて
5限目
学科 HTML/CSS基礎⑤
本日の講義のまとめ
本日のテーマ
CSSのプロパティを理解しましょう
※★の付いているところは特に重要なところ。
CSS：バックグランド系プロパティ
- background-color プロパティ（背景色）★
- background-attachment プロパティ（背景画像の位置）
- background-image プロパティ（背景画像のファイル）★
- background-repeat プロパティ（背景画像の繰り返し）
- background プロパティ（背景の一括指定）
- background-size プロパティ（背景画像のサイズ）★
- background-position プロパティ（背景画像の表示開始位置）
CSS：テキスト系プロパティ
- color プロパティ（文字の色）
- opacityプロパティ（透明度）
- text-align プロパティ（文字の配置）
- text-decoration-color プロパティ（文字飾りの色）
- text-decoration-style プロパティ（文字飾りの線種）
- text-decoration-thickness プロパティ（文字飾りの線の太さ）
- text-decoration プロパティ（文字の飾りの一括指定）
- text-shadow プロパティ（文字の影）
CSS：フォント系プロパティ
- font-family プロパティ（フォントの種類）
- font-size プロパティ（フォントのサイズ）
- font-weight プロパティ（フォントの太さ）
- font-style プロパティ（フォントのスタイル）
- line-height プロパティ（行の高さ）
- font プロパティ（フォント一括指定）
（CSS：リスト系プロパティ）
- list-style-type プロパティ（リストマーカーの種類）
- list-style-image プロパティ（リストマーカーの画像）
- list-style-position プロパティ（リストマーカーの位置）
- list-style プロパティ（リストマーカーの一括指定）
CSS：レイアウト系プロパティ★
- width プロパティ（内容の幅）★
- max-width プロパティ（幅の最大値）
- min-width プロパティ（幅の最小値）
- height プロパティ（内容の高さ）★
- max-height プロパティ（高さの最大値）
- min-heightプロパティ（高さの最小値）
- float プロパティ（回り込み）
- clear プロパティ（回り込みを解除）
- position/top/left/bottom/right プロパティ（要素の配置方法）
- z-index プロパティ（重なりの順序方法）
- display プロパティ（要素の表示方法）★（ブロック指定幅、横変更可能。<p>が<span>と同じ機能になる。）
- overflow プロパティ（ボックスからあふれた内容の処理方法）
CSS：ボーダー系プロパティ
- border-style プロパティ（ボーダースタイル）
- border-color プロパティ（ボーダー色）
- border-width プロパティ（ボーダー幅）
- border プロパティ（ボーダー一括指定）
- border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）
CSS：パディング系プロパティ（内側の余白）★
- padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
- padding プロパティ（パディング一括指定）
CSS：マージン系プロパティ（外側の余白）★
- margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
- margin プロパティ（マージン一括措定）
- マージンの相殺
- マイナスマージン
- ボックスの中央配置
- ボックスの右端配置
CSS：その他のプロパティ
- border-radius プロパティ（ボーダーの丸み）
- box-shadow プロパティ（ボックスの影）
- box-sizing プロパティ（ボックスサイズ計算）
- content プロパティ（挿入コンテンツ）
- object-fit プロパティ（画像トリミング）
- object-position プロパティ（画像の配置位置指定）
メモ：
p {
color: red;
}p {
background-color: red;
color:yellow
text-size:50px
}span {
background-color: blue;
color:pink
}構造化タグ <header>、<main>、<footer>
グループ化タグ <div> ブロックレベル（横幅を全面描画している。）
div.abc {
width: 200px;
height:200px;
background-color: blue;
}
ブロック：横幅全面に描画される。縦に積み上がっていく。
インライン：文字数で幅が変わる。
HTMLは左からちみ重なっていくのが初期値。
制作物：
