学科 HTML/CSS基礎⑤【オンライン】2025年10月21日　

講師：小谷　翔吾　先生

-本日のアジェンダ-

本日のテーマ

CSSのプロパティを理解しましょう


CSSの記述・検証ツールの活用

【まとめサイト】

• HTMLとCSSの基礎をまとめたサイト
  https://samplesdl.me/training_html-css/

【動画】

• CSSの記述方法とプロパティ・検証ツールの活用
  https://youtu.be/j-LrqX5K9SM（6分43秒）

CSS：バックグランド系プロパティ

• background-color プロパティ（背景色）
• 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のopacityで要素をちょっと透明にする方法と活用法まとめ
• 【CSS text-decorationの使い方】文字テキストの装飾方法
• 文字に影（ドロップシャドウ）を付ける

CSS：フォント系プロパティ

• font-family プロパティ（フォントの種類）
• font-size プロパティ（フォントのサイズ）
• 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」プロパティー

【感想】
CSSの各プロパティは一見似ている部分も多く、最初は混乱しやすいが、実　　　　際に操作してみることで違いが理解できるようになると感じました。
特に、paddingは要素の内側の余白、marginは外側の余白という区別を意識すると、デザインが思い通りに整いやすくなると思います。
また、HTMLの左詰めが基本であることを知ることで、今後の配置調整の際に基準が明確になりました。小さな設定の積み重ねが、全体の見やすさやデザイン性につながるという点が印象的でした。今後は、今回学んだ内容を意識しながら、より実践的なレイアウト作りに取り組んでいきたいです。