CSS入門｜ロードマップに沿ったCSS解説

CSS
CSS

CSSの基礎

CSS（カスケーディング・スタイル・シート）は、ウェブサイトの見た目を整えるための言語です。たとえば、HTMLで作ったページに色をつけたり、文字の大きさやフォントを変えたり、レイアウトをきれいに並べたりするときに使います。

CSSを使うと、デザイン部分とHTMLの内容を分けられるので、サイトの管理や更新がとてもラクになります。「セレクター」という仕組みでHTMLの特定の要素を選び、その部分だけにスタイルを適用することができます。さらに、「メディアクエリ」という機能を使えば、スマホやタブレット、パソコンなど、どの画面サイズでも見やすいレスポンシブデザインを作ることができます。

CSSにはいくつか重要な考え方があります。スタイルが上書きされる順序を決める「カスケード」、親要素のスタイルを子要素が受け継ぐ「継承」、そしてどのスタイルを優先するかを判断する「詳細度」です。

最近のCSSでは、レイアウト作成に便利な「Flexbox」や「Grid」、そして動きをつける「アニメーション」や「トランジション」など、見た目や使いやすさをさらに向上させる機能もそろっています。

CSSの書き方と仕様

基本の書き方

　基本書式は、HTMLの中の、「どの部分の（セレクタ）」、「何を（プロパティ）」、「どのように変更する（値）」かを指定していきます。

セレクタ { プロパティ: 値; }

カスケード（Cascade）

複数のCSSルールが同じ要素に当たったとき、どれを適用するかを決める仕組みです。
CSSは「後から書かれたものほど優先」される傾向があります。
例：

p { color: blue; }
p { color: red; }

→ 最後に書いた color: red; が適用されます。

継承（Inheritance）

親要素に指定したスタイルが子要素にも引き継がれる仕組みです。
例えば、親の <div> に文字色を指定すると、中の <p> や <span> も同じ色になります（ただし、すべてのプロパティが継承されるわけではありません）。
例：

div { color: green; }

→ <div> の中の文字もすべて緑色になります。

詳細度（Specificity）

複数のルールが競合したとき、どのルールが「より強いか」を決める点数ルールです。

  • タグ名（例: p） → 弱い
  • クラス名（例: .title） → 中くらい
  • ID（例: #main） → 強い
  • !important → 最強（ただし多用はNG）

例：

p { color: blue; }
.title { color: red; }
#main { color: green; }

→ ID指定の #main が最も強く、緑色が適用されます。

セレクタについて

クラスセレクター（.class）

  • 使い方
    HTML要素に class 属性をつけ、そのクラス名をセレクターとして指定します。
  • 特徴
    • 複数の要素に同じスタイルを適用できる
    • 1つの要素に複数のクラスを設定できる
  • 例
<p class="highlight">重要な文章</p>
.highlight {
  color: red;
}

IDセレクター（#id）

  • 使い方
    HTML要素に id 属性をつけ、そのID名をセレクターとして指定します。
  • 特徴
    • ページ内で一つ（1回だけ）に使うことが前提
    • 詳細度（優先度）が高いため、乱用すると管理が難しくなる
  • 例
<h1 id="main-title">見出し</h1>
#main-title {
  font-size: 2em;
}

属性セレクター（[attr=value]）

  • 使い方
    特定の属性や値を持つ要素にスタイルを適用します。
  • 特徴
    • リンクやフォームなど、属性ベースで絞り込み可能
  • 主な形式
    • [attr] → 属性がある要素
    • [attr="value"] → 属性値が一致
    • [attr^="value"] → 指定の文字列で始まる
    • [attr$="value"] → 指定の文字列で終わる
    • [attr*="value"] → 指定の文字列を含む
  • 例
a[target="_blank"] {
  color: blue;
}

擬似クラス（:hover など）

  • 使い方
    要素の状態や位置に応じてスタイルを適用します。
  • 主な種類
    • ユーザー操作系：:hover（マウスオーバー）、:focus（フォーカス時）、:active（クリック中）
    • 構造系：:first-child（最初の子要素）、:nth-child(odd)（奇数番目）
    • 状態系：:disabled（無効）、:checked（選択済み）
  • 例
button:hover {
  background-color: orange;
}

擬似要素（::before / ::after など）

  • 使い方
    実際のHTMLに存在しない仮想要素を作り、装飾に使います。
  • 主な種類
    • ::before → 要素の先頭に追加
    • ::after → 要素の末尾に追加
    • ::first-letter → 最初の1文字
    • ::first-line → 最初の1行
  • 例
p::before {
  content: "★";
  color: gold;
}

まとめ表

セレクター種類記述例適用対象主な用途
class.box複数OKグループ化
id#header1つのみ固有要素
属性[type=text]条件一致属性指定
擬似クラス:hover状態依存インタラクション
擬似要素::before仮想要素装飾

基本的にはclassセレクターを仕様してコーディングをしていき、今後改修などが起こっても増えない要素に対してのみidセレクターを使うことが多いです。

レイアウトの作成

レイアウトを作成するということは、ページ上のコンテンツを適切に配置することを意味します。

最新のCSSでは、Flexbox（行と列）とCSS Grid（2Dレイアウト）が使用されることが多く。レスポンシブデザインにより、サイトはあらゆるデバイスに適合します。BootstrapやTailwindなどのフレームワークは、開発を迅速化するのに役立ちます。優れたレイアウトは、何が重要か、ユーザーがページ内をどのように移動するか、そして誰もが使いやすいかどうかを考慮しています。これにより、サイトの見栄えが良く、操作性も向上します。

レスポンシブウェブデザイン

レスポンシブウェブデザインは、大きなデスクトップから小さなスマートフォンまで、あらゆるデバイスでウェブサイトを美しく表示します。柔軟なレイアウト、サイズ変更可能な画像、そしてCSSメディアクエリを用いて、画面サイズに応じてサイトの表示方法を変化させます。これにより、ユーザーはどのデバイスを使用していても優れたエクスペリエンスを得ることができ、開発者はデバイスごとに個別のサイトを作成する必要がなくなります。

📱 スマートフォン（縦向き）

デバイス例解像度（px）幅（CSS px）
iPhone SE (第2世代)750×1334375
iPhone 12/13/141170×2532390
iPhone 14 Pro1179×2556393
iPhone 14 Pro Max1290×2796430
Pixel 61080×2400412
Galaxy S221080×2340360

📱 スマートフォン（横向き）

デバイス例解像度（px）幅（CSS px）
iPhone 14 Pro（横）2556×1179852
Pixel 6（横）2400×1080915

💻 タブレット

デバイス例解像度（px）幅（CSS px）
iPad (9.7インチ)1536×2048768
iPad Air (10.9インチ)1640×2360820
iPad Pro (12.9インチ)2048×27321024
Galaxy Tab S81600×2560800

🖥 ノートPC・デスクトップ

カテゴリ解像度（px）幅（CSS px）
小型ノートPC1366×7681366
標準HD1920×10801920
WQHD2560×14402560
4K UHD3840×21603840

これだけさまざまなデバイスサイズがあり、開発者はどこまで対応するか悩みますね。一般的にはクライアント次第ではありますが、スマホ：タブレット：デスクトップの３分割にすることが多く感じます。

メディアクエリの書き方

スマホやタブレットなど、さまざまな画面サイズでブログが見やすくなるようにするのがレスポンシブデザインです。CSSの「メディアクエリ」を使って画面幅に応じたスタイルを書き分けることで、どんなデバイスでも崩れないようにデザインすることができます。

メディアクエリの目安

デバイス種類画面幅（px）目安
📱 スマートフォン（縦）～480px
📱 スマートフォン（横）／小型タブレット481px ～ 768px
💻 タブレット（縦）769px ～ 1024px
💻 ノートPC／小型デスクトップ1025px ～ 1280px
🖥 標準デスクトップ1281px ～ 1440px
🖥 大型モニター（フルHD以上）1441px ～ 1920px
🖥 超大型ディスプレイ（4K以上）1921px～

書き方

CSSに下記を記入し…の部分に通常のCSSを書いていってください。

/* スマホ縦 */
@media (max-width: 480px) { … }

/* スマホ横・小型タブレット */
@media (max-width: 768px) { … }

/* タブレット縦 */
@media (max-width: 1024px) { … }

/* ノートPC・デスクトップ */
@media (max-width: 1280px) { … }

まとめ

CSSの基本構造からボックスモデル、Flexbox・Grid、レスポンシブデザインまでを押さえることで、初心者でもブログの見た目を自由にデザインできるようになります。ロードマップに沿った学習を進めながら、実際にコードを書きつつCSSの書き方を身につけていきましょう。