CSS
CSS is a language that specifies the design and layout of webpage elements, providing a way to centrally control colors, text sizes, margins, and other stylistic properties so that webpages look visually appealing.
CSS学習ガイドライン
CSSの基本概念を理解する セレクタとプロパティの基本を学ぶ カスケードと優先順位(特に重要) CSSの基本的な値と単位 カスタムプロパティ（CSS変数）を活用しよう ボックスモデルをマスターする レイアウト方法を学ぶ ダークモードとテーマ切り替え コードの整理とメンテナンス 開発・学習を助けるツール 特殊な演出・効果(応用編) よくあるつまずきポイントと対策 総合的な学習ステップ 最後に プロパティ一覧
CSSの基本概念を理解する
学習目的
「HTML＝構造」と「CSS＝デザイン」の役割分担を把握し、Webページのスタイル指定の全体像をつかむ。
主な内容
CSSとは何か？ HTMLとの関係性
CSSの適用方法（外部/内部/インラインスタイルの違い）
セレクタとプロパティの基本を学ぶ
学習目的
「どの要素に」「どんなスタイルを当てるか」の基本ルールを理解し、代表的なセレクタとプロパティを使えるようになる。
主な内容
要素セレクタ、クラスセレクタ、IDセレクタ
グループセレクタ、子孫セレクタ、子セレクタ、兄弟セレクタなど
よく使うプロパティ(色、背景、文字サイズ など)
Selectors 「セレクタ」
属性セレクタ pseudo-class（疑似クラス） HTML要素に特定の状態がある場合にスタイルを適用するためのものです。
:after 要素の直後に内容を挿入する。
:before 要素の直前に内容を挿入する。
:focus フォーカスが当たった要素にスタイルを指定するための CSSの擬似クラスで、アクセシビリティの向上に役立ちます。
pseudo-element（擬似要素） コンテンツ内に生成された仮想的な要素を指定するための仕組みです。
::first-letter 要素の最初の文字にスタイルを適用する。
::focus-within フォーカスを持っているか、フォーカスを持った要素を含む要素を表します。
nth selectors（n番目系セレクタ） 特定の順番に位置する子要素を指定して選択するためのセレクタです。
カスケードと優先順位(特に重要)
学習目的
スタイルが競合した場合に「最終的にどれが適用されるか」を把握し、思い通りのデザインを得る。
主な内容
カスケード(Cascade)の仕組み
スペシフィシティ(優先度): ID > クラス > 要素
!importantの取り扱い方と注意点
CSSの基本的な値と単位
学習目的
CSSで使われる様々な値や単位を知り、柔軟にレイアウトやスタイルを指定できるようになる。
主な内容
色の指定方法（キーワード・16進数・RGB・HSL など）
CSSの単位（px, em, rem, %, vw, vh など）
グローバル値（inherit, initial, unset, revert）の概要
色の指定方法 CSSでは、キーワードや16進数（Hex）、RGB/RGBA、HSL/HSLAなど複数の形式で色を指定でき、それぞれ透明度やブラウザ対応を考慮しながら目的に応じて使い分けるのがポイントです。
CSSの単位 CSSの単位は、要素のサイズや位置を指定するためのもので、固定された値を持つ絶対単位と、他の要素や画面サイズに応じて変動する相対単位に分かれています。
viewport units ビューポート単位。画面いっぱいに要素を表示する方法。
グローバル値
inherit 要素のプロパティの計算値を親要素から取得するよう指定します。
initial 要素にプロパティの初期値 (または既定値) を設定します。
unset プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。
カスタムプロパティ（CSS Variables）を活用しよう
学習目的
コードの保守性を高める“変数”の仕組みを理解し、テーマカラーや余白などを一括管理できるようになる。
主な内容
カスタムプロパティの定義方法(:root { --変数名: 値; })
var(--変数名) での参照方法
カスケードを活かしたスコープ管理・テーマ切り替え
Custom Properties（カスタムプロパティ : CSS Variables） CSS内で変数を宣言して動的に値を管理できる機能で、デザインの一貫性や保守性を高めるのに役立つ仕組みです。
ボックスモデルをマスターする
学習目的
要素を“箱”として扱う概念を理解し、余白や枠線を自在にコントロールできるようになる。
主な内容
ボックスモデル(コンテンツ + パディング + ボーダー + マージン)
block / inline / inline-block の違い
box-sizing (content-box と border-box) の使い分け
ボックスモデル
レイアウト方法を学ぶ
学習目的
文字や要素を配置する様々な手法を知り、レスポンシブにも対応できる多様なレイアウトを実現する。
主な内容
横並びリストを作るコツ（display: inline-block や flex 等）
floatレイアウト(レガシーな手法)
Flexbox(最も一般的なモダンレイアウト)
Gridレイアウト(二次元レイアウトに最適)
メディアクエリによるレスポンシブデザイン
Horizontal list CSSを使用して横並びリストを作成するには、ul要素にdisplay: flex;とflex-wrap: wrap;を設定し、li要素に適切なマージンを追加します。
Flexbox コンテナ内のアイテムの配置、方向、順序を柔軟に管理できるレイアウトモデルです。
Grid layout グリッドレイアウトは、Webページのコンテンツを行と列に分割して配置するための強力かつ柔軟なレイアウトシステムです。
ダークモードとテーマ切り替え
学習目的
OSやブラウザのカラースキームに対応したダークモードをはじめ、多彩なテーマを切り替えるためのアプローチを学ぶ。
主な内容
prefers-color-scheme メディアクエリ
カスタムプロパティによるカラーテーマ管理
ライト / ダークモード実装の例
Dark mode CSS で Web サイトをダークモードに対応させる方法
コードの整理とメンテナンス
学習目的
プロジェクト規模が大きくなっても管理しやすいCSSの書き方や命名規則、ファイル構成を理解する。
主な内容
コメントの使い方と分かりやすいセクション分け
クラス名の付け方(BEMなどの命名規則)
ファイル分割・管理方法
カスタムプロパティを用いた一元管理
開発・学習を助けるツール
学習目的
実装・デバッグ・デザインを効率化するツールやリソースを知り、学習効率を高める。
主な内容
ブラウザの開発者ツール(DevTools)の使い方
ベンダープレフィックスへの対処（Autoprefixerなどのビルドツール）
CSSフレームワーク(Bootstrap, Tailwind CSSなど)との付き合い方
オンライン学習サイト(MDN Web Docs, CSS-Tricksなど)の活用
Vendor prefix ベンダープレフィックスとは、各ブラウザが新しい CSS機能を正式にサポートする前に、それらを試験的に適用できるようにするためのブラウザ固有の接頭辞です。
特殊な演出・効果(応用編)
学習目的
基礎を終えたあとに取り組むことで、より高度な視覚効果やインタラクションを実装できるようになる。
主な内容
点滅するCSS（非推奨のblinkやアニメーションによる実装）
3D効果（3Dトランスフォーム、perspectiveの考え方）
トランジションやアニメーションの基礎
点滅する CSS animation と @keyframes を使って、文字や要素を点滅させてみます。
3D effect 3D効果とは、要素に奥行きを持たせ、視点やパースペクティブを設定することで、ウェブページ上で立体的に見せる技術です。
よくあるつまずきポイントと対策
学習目的
初学者が陥りがちな問題を把握し、トラブルシューティングや回避手段を身につける。
主な内容
ブラウザ互換性や古いIE対応
Box-sizingの違いによるサイズ計算ミス
カスケードの理解不足によるデザイン崩れ
!important の濫用による管理の複雑化
総合的な学習ステップ
学習目的
個々の知識を組み合わせ、実際にWebページやアプリケーションを作りながら総合的なスキルを身につける。
主な内容
小規模ページの制作(プロフィール、ブログレイアウト 等)
FlexboxやGridを活用した複数のレイアウトパターン
バージョン管理(Git)を利用して履歴を追えるようにする
他人のコード(OSSやチーム開発)を読んだり修正したりして実践力を養う
最後に
学習目的
CSS学習を継続するモチベーションと、今後の発展的な学習(デザイン・UI/UX・アクセシビリティ等)へと繋げる足がかりを得る。
主な内容
実務や趣味の制作で試行錯誤を重ねる重要性
デザイン面やアクセシビリティにも興味を持ち、よりよいUI/UXを志向する
実践を通じて分からない点はブラウザ開発者ツールや公式ドキュメント(MDN)で積極的に検証・調査する習慣をつける
Properties
/* 〜 */ comment
align-content コンテナ内全体の交差軸方向（初期値では縦方向）の揃え位置を指定する。
align-items フレックスボックスやグリッドコンテナ内の要素の垂直方向（縦方向）の配置を制御する。
align-self コンテナ内の個別アイテムの縦方向の揃え位置を指定する。
alignment-adjust テキストや要素のベースラインを微調整して、垂直方向の配置を制御するためのプロパティです。
alignment-baseline SVGなどでテキストのベースラインを親要素や周囲のテキストに対してどこに合わせるかを指定するためのものです。
animation アニメーションについてまとめて指定する。
animation-delay アニメーションがいつ始まるかを指定する。
animation-direction アニメーションが正方向、逆方向、または交互に再生されるかどうかを指定するために使用されます。
animation-duration アニメーション１回分の時間の長さを指定する。
animation-fill-mode アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。
animation-iteration-count アニメーションの繰り返し回数を指定する。
animation-name 要素に適用するアニメーションの名前を指定し、その名前は同じ CSSファイル内で定義された @keyframesルールと一致させる必要があります。
animation-play-state 再生中か一時停止かを指定する。
animation-timing-function アニメーションのタイミング・進行割合を指定する。
appearance プラットフォームにおける標準的な UI の外観にする。
aspect-ratio アスペクト比を定義する。
attr() [function] HTML要素の属性値をスタイルシート内で利用できるようにする機能です。
backface-visibility 3D空間で変形する要素の背面の表示方法を指定する。
background 背景に関するすべてのプロパティをまとめて一括指定できる。
background-attachment 背景画像の固定・移動を指定する。
background-break インライン要素の背景画像の繰り返し方法を指定する。
background-clip 背景の適用範囲を指定する。
background-color 要素の背景色を指定するために使用されます。
background-image 背景画像を指定する際に使用します。
background-origin 背景の基準位置を指定する。
background-position 背景画像の表示開始位置を指定する。
background-repeat 背景画像のリピートの仕方を指定する。
background-size 背景画像のサイズを指定する際に使用します。
baseline-shift テキストの特定範囲のベースラインを指定し直す。
binding 結合するスタイル規則の参照。
bookmark-label ブックマークのラベル（名前）の指定。
bookmark-level 階層構造のブックマークのレベル指定。
bookmark-target ブックマークのリンク先の指定。
border ボックスの上下左右のボーダー（境界）のスタイル・太さ・色に対して同じ値をまとめて指定することができます。
border-block-end-width 要素の論理的なブロックの終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。
border-block-start-color 要素の上側にあるボーダーの色を指定する。
border-block-start-width 要素の始点側に配置されるボーダーの幅を設定する。
border-bottom 要素の下端に線（ボーダー）を指定して、色・太さ・線の種類などを設定できるプロパティです。
border-bottom-color 下側のボーダーの色を指定する。
border-bottom-left-radius ボックスの左下の角丸を指定する。
border-bottom-right-radius ボックスの右下の角丸を指定する。
border-bottom-style 要素の下辺に引く線の種類（実線・点線・破線・二重線など）を指定し、デザインを制御できるプロパティです。
border-bottom-width 下側のボーダーラインの太さを指定する。
border-collapse セルの枠線（ボーダー）の表示の仕方を指定する。
border-color ボーダー色の一括指定。
border-image 画像ボーダーを指定する。
border-image-outset ボーダーイメージ領域がボーダーボックスを超えて拡がる量を指定する。
border-image-repeat 画像ボーダーの繰り返し方法を指定する。
border-image-slice ボーダー画像の使用範囲を指定する。
border-image-source 画像ボーダーに使用する画像ファイルを指定する。
border-image-width 画像ボーダーの太さを指定する。
border-inline-end-width border-inline-start-width border-left 要素の左側にだけボーダー（太さ・色・線のスタイル）をまとめて設定できるプロパティです。
border-left-color 左側のボーダーの色を指定する。
border-left-style 要素の左側に表示するボーダーの「線の種類」を個別に指定する。
border-left-width 左側のボーダーラインの太さを指定する。
border-radius ボックスの角丸をまとめて指定する。
border-right 右側のボーダーのみの色・太さ・スタイル
border-right-color 右側のボーダーの色を指定する。
border-right-style 右側のボーダーのスタイルを指定する。
border-right-width 右側のボーダーラインの太さを指定する。
border-spacing セルのボーダーの間隔を指定する。
border-style ボーダーのスタイルを一括指定する。
border-top 上側のボーダーのみの色・太さ・スタイル
border-top-color 上側のボーダーの色を指定する。
border-top-left-radius ボックスの左上の角丸を指定する。
border-top-right-radius ボックスの右上の角丸を指定する。
border-top-style 上側のボーダーのスタイルを指定する。
border-top-width 上側の境界線（border）の幅（width）を指定する。
border-width ボーダーの太さを一括指定する。
bottom 要素の下端を基準にして、指定された距離分だけ上に位置を調整するプロパティです。
box-decoration-break ボックスが改行する際の表示形式を指定する。
box-shadow ボックスに影をつける。
box-sizing ボックスサイズの算出方法を指定する。
break-after ボックス後でのカラムの区切り方法を指定する。
break-before ボックス前でのカラムの区切り方法を指定する。
break-inside ボックス途中でのカラムの区切り方法を指定する。
calc() calc()関数は算術演算を行い、その結果を要素のサイズやマージン、パディングなどに指定することができます。
caption-side テーブル（表）のキャプションの位置を指定する
clear 回り込みを解除する
clip ボックスを切り抜き表示（クリッピング）する
clip-path 指定された形状で要素を切り抜くことができる。
color 文字の色（前景色）を設定します。
color-profile 色の表現方法を定義する。
column-count ブロック要素を複数の列に分割する。
column-fill 複数の列を持つコンテンツを均等に配置するためのプロパティで、"balance"値を指定することで余白を最小限に抑えられます。
column-gap アイテム同士の縦方向の間隔を指定する。
column-rule マルチカラムレイアウトの境界線を設定する。
column-rule-color 多列レイアウトで各列の境界線の色を指定する。
column-rule-style カラムの区切り線のスタイルを指定する。
column-rule-width 多列レイアウトで列間の縦線の太さを指定する。
column-span 複数のカラムを持つレイアウトで、カラムの境界をまたぐ要素を指定する。
column-width カラム幅を指定する。
columns 要素内のテキストを複数の列に分割する。
content 主に擬似要素を使用して、HTMLに記述されていないテキストや画像などのコンテンツをWebページに追加するために用いられます。
counter() [function] Webページ内で項目の自動番号付けを管理するために使用されます。
counters() [function] Webページ内のネストされた要素に自動的に階層的な番号付けを行うための関数です。
counter-increment 要素の連番（カウンタ）の値を進める。
counter-reset 要素の連番（カウンタ）の値をリセットする。
cursor カーソルの形状を指定する。
direction 文字表記の方向（左右）を指定する。
display 要素の表示形式を指定する。
empty-cells 空白セルのボーダーの表示・非表示を指定する。
:first-of-type 同じ親要素内にある特定のタグタイプの最初の要素にスタイルを適用するためのCSSセレクタです。
flex フレックスアイテムの伸縮性、縮小性、および基本的なサイズを一度に定義するためのショートハンドです。
flex-basis Flexboxレイアウト内の要素の初期メインサイズを指定します。
flex-direction フレックスコンテナ内のアイテムの配置方向を指定する。
flex-grow フレックスボックス内のアイテムが利用可能な追加スペースをどのように分割して占めるかを決定するための比率を設定します。
flex-shrink フレックスボックス内のアイテムがコンテナーの空間が不足した際にどれだけ縮小するかを定義する数値を指定します。
flex-wrap Flexboxコンテナ内の要素の折り返し（改行）の挙動を制御します。
Flexbox コンテナ内のアイテムの配置、方向、順序を柔軟に管理できるレイアウトモデルです。
float 左または右に寄せて配置する。
font フォントに関する指定をまとめて行う。
font-family フォントの種類を指定する。
font-size フォントのサイズを指定する。
font-size-adjust フォントのサイズを調整する。
font-stretch フォントの形状を幅広・幅狭にする。
font-style フォントをイタリック体・斜体にする。
font-variant フォントをスモールキャップにする。
font-weight フォントの太さを指定する。
gap グリッドやフレックスコンテナ内のアイテム間のスペースを簡単に設定するためのプロパティです。
grid-auto-flow グリッド内の未配置アイテムを行または列方向に自動的に並べる方法を指定するためのものです。
grid-column 列グリッドの開始と終了についてまとめて指定する。
grid-row グリッドレイアウトにおいて要素が配置される開始行と終了行を指定するプロパティです。
grid-template-columns グリッドトラックの横方向のサイズリストを指定する。
grid-template-rows グリッドレイアウトにおける各行の高さ（サイズ）を指定して、行方向のレイアウトをコントロールするためのものです。
height 高さを指定する。
justify-content 要素の水平方向（横方向）の配置を調整し、余白やスペースの使い方を制御します。
justify-items コンテナ内のアイテムの主軸方向（初期値では横方向）のデフォルト揃え位置を指定する際に使用します。
justify-self コンテナ内の個別アイテムの横方向（主軸方向）の揃え位置を指定する。
:last-of-type 指定された要素の兄弟要素の中で最後の特定の要素を選択するために使用されます。
left 左からの配置位置（距離）を指定する。
letter-spacing 文字の間隔を指定する。
line-height 行の高さを指定する。
list-style リストアイテムのマーカー（形や位置、画像など）を一括して指定し、リストの見た目を自由にカスタマイズできるショートハンドプロパティです。
list-style-image リストのマーク画像。
list-style-position リストのマークの表示位置を指定する。
list-style-type リストの先頭に表示するマーカー文字の種類を指定する。
margin マージンに関する指定をまとめて行う。
margin-bottom 下マージンを指定する。
margin-left 左マージンを指定する。
margin-right 右マージンを指定する。
margin-top 上マージンを指定する。
marker-offset リストマーカーとリスト内容の間隔を指定する。
max-height 高さの最大値を指定する。
max-width 要素の最大幅を指定する。
min-height 高さの最小値を指定する。
min-width 幅の最小値を指定する。
object-fit 画像やビデオがそのコンテナ要素にどのように収まるか（縦横比を保つかどうかなど）を指定するプロパティです。
opacity 0.0～1.0の数値で要素全体の透明度を指定し、その中の子要素も含めて一括して「どれだけ透けて見えるか」を制御できるプロパティです。
orphans テキストブロックの最後の行に少なくともいくつの単語を残すかを制御する。
outline アウトラインのスタイル・太さ・色を指定する。
outline-color 要素のアウトライン（輪郭）の色を指定する。
outline-offset アウトラインの位置を指定する。
outline-style アウトラインのスタイルを指定する。
outline-width 要素の周囲に描かれるアウトラインの太さを指定する。
overflow はみ出た要素の表示方法を指定する。
overflow-x ボックスの範囲内に内容が収まらない場合に、はみ出た要素の左右の表示方法を指定する。
overflow-y はみ出た要素の上下の表示方法を指定する。
padding パディングに関する指定をまとめて行う。
padding-bottom 要素の下部に余白（内側のスペース）を設定する。
padding-left 要素の左側の余白（内側のスペース）を設定する。
padding-right 要素の右側の余白（内側のスペース）を設定する。
padding-top 要素の上部に余白（内側のスペース）を設定する。
page-break-after break-after 印刷時の改ページ位置を指定する。
page-break-before 印刷時に要素の前で強制的に改ページを行い、新しいページの先頭に配置するためのプロパティです。
page-break-inside 印刷やページ分割時に要素内で改ページを制御する。
perspective 要素に3D効果を与える際の視点の距離を設定し、その要素の奥行き感を調整するためのものです。
perspective-origin 3D変換において視点の位置を設定し、要素がどの方向から見られるかを決定するプロパティです。
position ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する。
prefers-color-scheme
quotes 引用符を設定する
right 右の位置指定
row-gap アイテム同士の横方向の間隔を指定する。
tab-size テキスト内のタブ文字の幅を設定する。
table-layout テーブルの幅と列の幅の調整方法を指定する。
text-align 行揃えの位置・均等割付を指定する。
text-align-all 全ての行の揃え位置・均等割付を指定する。
text-align-last テキストコンテンツの最後の行の水平方向の位置を指定する。
text-decoration テキストの下線・上線・取消線・点滅を指定する。
text-decoration-color text-decoration-lineプロパティでテキストにつけた傍線の色を指定する。
text-decoration-line テキストに傍線をつける。
text-decoration-skip テキスト傍線のスキップ方法を指定する。
text-decoration-style テキスト傍線のスタイルを指定する。
text-decoration-thickness text-decoration-lineプロパティで指定された下線、上線、打ち消し線、または二重線の太さを変更する。
text-indent インデント（字下げ）を制御する。
text-orientation 縦書きを指定した場合の文字の表示方向を指定します。
text-overflow コンテナの幅を超えたテキストを切り取るか、省略記号（…）で表示するかを指定するプロパティです。
text-shadow テキストに影をつける。
text-size-adjust 一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。
text-transform 大文字・小文字・全角文字への変換を指定する。
text-underline-offset テキストの下線を基準位置からどれだけ離すか（オフセット）を指定し、可読性やデザイン面での調整を柔軟に行えるようにするためのプロパティです。
top 上からの配置位置（距離）を指定する。
touch-callout 対象を長押しすることで現れるコールアウト表示を制御します。
transform 要素に2D変形、または、3D変形を適用する。
transform-style 要素の子要素が3D変換の影響を受けるかどうかを指定するためのもので、flatは2D平面上で描画し、preserve-3dは3D空間内で描画します。
transition transition効果（時間的変化）をまとめて指定する。
unicode-bidi Unicode の文字表記の方向を上書きする。
user-select ユーザーが文章や画像などの要素を範囲選択できるかどうかを制御します。
vertical-align インライン要素やテーブルセル内のテキストや画像を上下方向に揃えるために使います。
visibility ボックスの表示・非表示を指定する。
white-space 要素内の空白や改行の扱いと、テキストの折り返し方法を指定するためのものです。
widows 改ページされる際の次ページの最低行数を指定する。
width 要素の幅を指定する。
word-spacing テキスト内の単語の間隔を調整する。
writing-mode 縦書き・横書きの別と行ブロックを並べる方向を指定します。
z-index 要素のスタッキングコンテキスト内での優先順位（重なり）を調整するために使用される。
@font-face インターネット上のフォントを適用する。
@keyframes アニメーションの動きを指定する。
@media デバイスの画面サイズや特性に応じてスタイルを動的に切り替えるためのルールです。
Home HTML (HyperText Markup Language) ウェブページの基本的な構造を作成します。見出し、段落、リンク、画像などの要素を定義します。
CSS (Cascading Style Sheets) ウェブページのデザインやレイアウトを設定します。色、フォント、レイアウトなどのスタイルを指定します。
JavaScript ウェブページにインタラクティブな動作を追加します。フォームの検証、アニメーション、リアルタイムのデータ処理などを行います。
PHP (Hypertext Preprocessor) サーバー上で動作してデータベースと連携し、動的なWebページを簡単に作成できるスクリプト言語です。