-本日のアジェンダ-
1限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて
2限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて
3限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて
4限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて
5限目
学科 HTML/CSS基礎⑤
本日の講義のまとめ
本日のテーマ
CSSのプロパティを理解しましょう
検証ツールで既存の物を編集も出来るし、新たに書き加えることも出来る。
＝シュミレーターで確認して、そのままコピペして本編に貼れる！
カラーは１６進数の組み合わせ
＃００００００ 黒
から
＃ｆｆｆｆｆｆ 白
まで。
CSS：バックグランド系プロパティ
- background-color プロパティ（背景色）⇐ point! ページ作成の際に色を付けながら作業するとやりやすい。
- background-attachment プロパティ（背景画像の位置）
- background-image プロパティ（背景画像のファイル）
- background-repeat プロパティ（背景画像の繰り返し）
- background プロパティ（背景の一括指定）
- background-size プロパティ（背景画像のサイズ）
- background-position プロパティ（背景画像の表示開始位置）
参考サイト
- CSSのbackground-imageを使いこなす! 使い方から調整まで徹底解説
- 【CSS】背景色・背景画像をマスター！backgroundの使い方
- 【CSS】使える背景パターン、実装サンプル25選（コピペで簡単です）
CSS：テキスト系プロパティ
- color プロパティ（文字の色）
- opacityプロパティ（透明度）
- text-align プロパティ（文字の配置）
- text-decoration-color プロパティ（文字飾りの色）
- text-decoration-style プロパティ（文字飾りの線種）
- text-decoration-thickness プロパティ（文字飾りの線の太さ）
- text-decoration プロパティ（文字の飾りの一括指定）
- text-shadow プロパティ（文字の影）
参考サイト
CSS：フォント系プロパティ
- font-family プロパティ（フォントの種類）
- font-size プロパティ（フォントのサイズ）※単位はピクセル（px）％とか他の単位でも可。
- font-weight プロパティ（フォントの太さ）
- font-style プロパティ（フォントのスタイル）
- line-height プロパティ（行の高さ）
- font プロパティ（フォント一括指定）
参考サイト
- 【2025年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
- 【font-family】CSS文字フォント指定の基本と注意点を徹底解説！
- 【CSS】フォントの設定を一括指定するfontプロパティの使い方と値一覧
CSS：リスト系プロパティ
- list-style-type プロパティ（リストマーカーの種類）
- list-style-image プロパティ（リストマーカーの画像）
- list-style-position プロパティ（リストマーカーの位置）
- list-style プロパティ（リストマーカーの一括指定）
参考サイト
- CSSのlist-styleプロパティの使い方｜指定できる全ての値とおすすめデザイン3選
- CSSでリストを素敵にするlist-styleの使い方+もっと自由な作り方
- 【CSS】list-style-typeの使い方：箇条書きのマーカー種類を変える
CSS：レイアウト系プロパティ
- width プロパティ（内容の幅）ウィズス／横幅のこと ⇐覚える！！
- max-width プロパティ（幅の最大値）
- min-width プロパティ（幅の最小値）
- height プロパティ（内容の高さ）ヘイト／高さのこと ⇐覚える！
- max-height プロパティ（高さの最大値）
- min-heightプロパティ（高さの最小値）
- float プロパティ（回り込み）
- clear プロパティ（回り込みを解除）
- position/top/left/bottom/right プロパティ（要素の配置方法）
- z-index プロパティ（重なりの順序方法）
- display プロパティ（要素の表示方法）インラインのものをブロックに変更、または逆もできる。⇐覚える！まとめサイトの表示ルール確認。
- overflow プロパティ（ボックスからあふれた内容の処理方法）
参考サイト
- CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう
- 【初心者向け！】CSS floatプロパティを図解で分かりやすく解説！
- CSSのpositionを総まとめ！absoluteやfixedの使い方は？
CSS：ボーダー系プロパティ
- border-style プロパティ（ボーダースタイル）
- border-color プロパティ（ボーダー色）
- border-width プロパティ（ボーダー幅）
- border プロパティ（ボーダー一括指定）
- border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）
参考サイト
- 【CSS】borderプロパティで枠線（ボーダー）をデザインする方法を解説
- 【CSS入門】borderを使いこなすための3つのステップ
- 【CSS入門】border（枠線）の設定方法をサンプルコードで解説！
CSS：パディング系プロパティ 【内側に余白】⇐覚える！
- padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
- padding プロパティ（パディング一括指定）
参考サイト
- CSSのmarginとは？paddingとは？余白の指定方法まとめ
- HTMLのpaddingの使い所とは？設定方法についてわかりやすく解説
- CSSのmarginやpaddingを完全に理解して余白を制す
CSS：マージン系プロパティ【外側に余白】⇐覚える！
- margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
- margin プロパティ（マージン一括措定）
- マージンの相殺
- マイナスマージン
- ボックスの中央配置
- ボックスの右端配置
参考サイト
- 【CSS】margin の相殺を理解する
- CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック
- ネガティブ(マイナス)マージンの使い方と注意点【CSS】
CSS：その他のプロパティ
- border-radius プロパティ（ボーダーの丸み）
- box-shadow プロパティ（ボックスの影）
- box-sizing プロパティ（ボックスサイズ計算）
- content プロパティ（挿入コンテンツ）
- object-fit プロパティ（画像トリミング）
- object-position プロパティ（画像の配置位置指定）
参考サイト
- 今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
- 【CSS】box-shadowで影をつける方法とサンプル集
- 1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
基本ルール
HTMLは左側に積みあがっていく。初期設定のような感じ。⇐覚える！
バックグラウンド・フォント系プロパティ
HTML
<body>
<p>これはpタグだよ</p>
<span>これはspanタグだよ</span>
<p>これはpタグだよ</p>
<span>これはspanタグだよ</span>
</body>
CSS
@charset “utf-8”;
p{
background-color:blue;
color:yellow;
text-align:center;
font-size:50px;
}
span{
background-color:blue;
color:pink
}
レイアウト・パディング・マージン系プロパティ
HTML
<body>
<div class="oya"> 親子の関係だと中に入る。（四角の中に四角）
<div class="kodomo"> ※中に入れずに並べて書くと四角が上下に並ぶ
</div>
</div>
</body>CSS
@charset “utf-8”;
div.oya{
width:200px;
height:200px;
background-color:gray;
padding-left:50px;
margin-left:50px;
}
div.kodomo{
background-color:blue;
width:100px;
height:100px;
margin-left:50px;
}
本日の感想
レイアウトに直接関わるCSSの記述の方法を学んだ。どれを使えばどのように変更できるか、概要はなんとなく理解できたように思う。次回の実践でより理解を深めていきたいと思う。
コメントを残す