CSSとは？意味・基礎・書き方を初心者向けにわかりやすく解説

Webページをより美しく、そして魅力的にするためには、CSSという技術が欠かせません。

CSSを使うと、文字の色やサイズ、背景画像、レイアウトなど、Webページの見た目を思い通りにカスタマイズすることができます。

本稿では、CSSの意味や基礎、具体的な書き方まで、初心者の方にもわかりやすく解説していきます。

なお、CSSは、HTMLの基礎知識があると理解が進みやすいため、以下の記事も参考にしてください。

2024.08.01

2024.08.14

自分でWebサイトを作ってみたいと思ったことはありませんか？そのWebサイトの基礎となるのが「HTML」です。 HTMLを学ぶことで、オリジナルのWebページを作成できるようになります。本稿では、HTMLの基礎知識と基本構造を初心者の方にもわかりやすく解説します。 HTMLと...

WordPressテーマ「SEEED」

企業の成長を加速させる。
あなたの商品・サービスの販売に特化したホームページを構築。

SEEED

CSSとは？

CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、Webページの見た目、つまりデザインを装飾するためのプログラミング言語です。

具体的には、以下のような装飾をCSSで指定することができます。

テキストの装飾 ：フォント、色、サイズ、太字、斜体など
背景の設定：色、画像、グラデーションなど
レイアウト：配置、枠、余白など

HTMLとCSSの関係性

HTMLとCSSは、Webページを作成する上で欠かせない二つの言語です。

HTML（HyperText Markup Language）は、Webページの構造を定義する言語です。見出し、段落、リスト、画像、リンクなどの要素を配置し、ページの骨組みを作ります。

一方で、CSSはWebページの見た目を装飾する言語です。フォント、色、背景、レイアウトなどを設定し、ページのデザインを整えます。

わかりやすく言うと、HTMLは家の骨組み、CSSは家の内装・外装に例えることができます。

HTMLで構造を作ったWebページに、CSSでテキストの装飾、背景の設定、レイアウトなどを加えることで、より魅力的なホームページやブログを作ることができます。

2024.07.28

2024.09.03

ホームページとは？Webサイトとの違い・種類・役割をわかりやすく解説

「ホームページ」という言葉は身近なものですが、「ウェブサイト」との違いやその種類についてご存じですか？本稿では、ホームページとは何か、Webサイトとの違い、そして様々な種類のホームページとその役割について、初心者の方にもわかりやすく解説していきます。ホームページとは？ホー...

メリット

デザインの一元管理：HTMLからCSSを分けることで、デザインの変更を一括で行うことができる。
メンテナンス性の向上：HTMLとCSSを分けることで、コードが見やすくなり、メンテナンスが容易になる。
ブラウザ間の互換性：CSSは、異なるブラウザでもほぼ同じ表示を実現できる。
レスポンシブデザイン：デザインをスマホやPCなど機器の画面サイズに合わせて自動的に調整できる。
アニメーションや効果：様々なアニメーションや視覚効果を記述することができる。
再利用性：作成したCSSを他のWebページでも再利用することができる。

デメリット

ブラウザ間の差異：古いブラウザや一部のブラウザでは、うまく表示されない場合がある。
学習に時間がかかる：CSSは多くの要素があり、習得するにはある程度の学習コストがかかる。
修正に時間がかかる：特に複雑なレイアウトを作成する場合、CSSの記述が複雑になり、修正に時間がかかることがある。
読み込み速度の低下リスク：CSSの記述ミスや過度なスタイルの適用は、ページの読み込み速度が低下する場合がある。

CSSの主なバージョン

他のプログラミング言語と同様に、CSSにもバージョンが存在し、新しいバージョンがリリースされるたびに、より多くの機能や表現が可能になっています。

CSS1（1996年）：初代のCSSで、フォント、色、背景などの基本的なスタイル指定を提供。
CSS2（1998年）：表示媒体によって自動的にスタイルシートを変更、音声を読み上げるブラウザや印刷にも対応。
CSS3（2011年）：グラデーション、アニメーション、柔軟なレイアウトなどが可能。

ブラウザは、新しいバージョンのCSSの機能をサポートしている限り、古いバージョンの記述も解釈できるようになっています。

しかし、特定の機能を使いたい場合や、古いブラウザとの互換性を考慮する必要がある場合には、CSSのバージョンを意識する必要があります。

例えば、CSS3の新しい機能を使いたい場合は、その機能がどのブラウザでサポートされているのか確認する必要があります。

CSSの書き方の種類

CSSの書き方の種類は主に3つあります。それぞれ初心者向けにメリット・デメリットも含めて解説します。

インラインスタイル

HTMLタグ内にstyle属性で直接記述する方法です。

<p style="color：red;">この文字は赤色です。</p>

メリット：特定の要素にだけスタイルを適用したい場合に便利。
デメリット：HTMLとCSSが混ざり合い、コードが見づらくなる場合がある。

内部スタイルシート

HTMLの<head>タグ内に<style>タグを入れて、その中にCSSを記述する方法です。

<head>
   <style>
      p {
         color：green;
      }
   </style>
</head>

メリット：複数の要素に同じスタイルを適用したい場合に便利。
デメリット：HTMLファイルが大きくなる場合がある。

外部スタイルシート

HTMLファイルとは別のCSSファイルを作成し、HTMLの<head>要素内にある<link>タグで読み込む方法です。

一般的には、この外部スタイルシートが最も推奨される記述方法です。

<head>
   <link rel="stylesheet" href="style.css">
</head>

メリット：HTMLファイルとCSSファイルを分離できるため、保守性が向上する。
デメリット：複数のCSSファイルを指定した場合、ファイルの数が多くなる。

CSSの基本的な書き方

CSSは、セレクタ、プロパティ、値の3つで構成されています。

セレクタ：スタイルを適用したいHTML要素を指定（h1〜h6、 pなど）
プロパティ：変更したい要素の属性を指定（色やフォントサイズなど）
値：プロパティに設定する値を指定（色名やフォントサイズの数値など）

以下のCSSの例では、pがセレクタ、colorがプロパティ、blueが値に該当します。

p {
   color：blue;
}

この例を元に、CSSの書き方の手順を解説します。

セレクタ（pなど）を指定
波カッコ（｛）を記述して改行
プロパティ（colorなど）を指定し、コロン（:）を記述
値（blueなど）を指定し、セミコロン（;）で記述して改行
波カッコ（}）で閉じる

セレクタ、プロパティ、値には、様々な種類があります。以下、記述方法と併せて初心者向けに解説します。

セレクタの種類

セレクタとは、スタイルを適用したいHTML要素（h1〜h6、 pなど）を指定するためのものです。複数のセレクタを組み合わせて、より詳細な指定を行うこともできます。

CSSには様々な種類のセレクタがあり、それぞれ特徴があります。以下、初心者向けに主なセレクタをご紹介します。

要素セレクタ

要素セレクタとは、HTMLの要素の種類（タグ名）を指定して、その種類の全ての要素に同じスタイルを一気に適用するための方法です。

例えば、全ての段落（p要素）の文字色を青色にしたい場合、要素セレクタを使います。

<p>ここにテキストが入ります。</p>

p {
   color: blue;
}

上記のCSSでは、pというセレクタを使って、全ての段落の文字色を青色に設定しています。

要素セレクタは、HTMLのタグ名（p、h1、divなど）をそのままセレクタとして使用します。

クラスセレクタ

クラスセレクタとは、HTMLの要素にクラス属性を追加することで、その要素に特定のスタイルを適用することができます。

このクラス属性の値をクラス名といいます。CSSでは、このクラス名を使って、複数の要素に同じスタイルを一括で設定することができます。

<p class="highlight">ここに強調したいテキストが入ります。</p>

上記のHTMLコードでは、<p>タグにclass="highlight"という属性が追加されています。このhighlightがクラス名です。

.highlight" {
    background-color: yellow;
}

上記のCSSコードでは、.highlightというクラス名を持つ要素の背景色を黄色に設定しています。つまり、HTMLの<p>タグにclass="highlight"と指定した部分の背景色が黄色になるということです。

※クラス名は、半角英数字とハイフン（-）を使って自由に付けることができます。
※CSSの中で、クラス名の前には必ずドット（.）をつけます。これはクラスセレクタであることを示すための記号です。

IDセレクタ

IDセレクタとは、HTMLの要素にID属性を追加し、固有のID名を付け、スタイルを適用することができます。

<h1 id="page-title">ここにページタイトルが入ります。</h1>

上記のHTMLコードでは、<h1>タグにid="page-title"という属性が追加されています。このpage-titleがID名です。

#page-title {
   text-align: center;
}

上記のCSSコードでは、#page-titleというIDを持つ要素のテキストを中央揃えにしています。つまり、HTMLの<h1>タグにid="page-title"と指定した部分のテキストが中央に表示されるということです。

※ID名は、ページ内で一度しか使用できません。重複のない固有の名前を付けるようにしましょう。
※CSSの中で、ID名の前には必ずシャープ（#）をつけます。これは、IDセレクタであることを示すための記号です。

子孫セレクタ

子孫セレクタとは、ある要素の中に含まれる、全ての子孫要素（子要素、孫要素、ひ孫要素など）に、一括でスタイルを適用するためのセレクタです。

<div class="container">
   <p>これは子要素です。</p>
   <p>これも子要素です。</p>
      <div>
         <p>これは孫要素です。</p>
      </div>
</div>

.container p {
   color: blue;
}

上記のCSSでは、.containerというクラスを持つdiv要素（親要素）に含まれる全てのp要素（子要素、孫要素）の文字色を青色に設定しています。

子要素、孫要素、ひ孫要素など、階層がどれだけ深くても、全ての子孫要素にスタイルが適用されます。
子孫セレクタでは、親要素と子孫要素の間を空白で区切ります。

子セレクタ

子セレクタとは、ある要素の直接の子要素にのみスタイルを適用するためのセレクタです。子孫セレクタと違い、孫要素やひ孫要素には適用されません。

以下の例では、コンテンツをグループ化するdiv要素の直下にあるp要素のみ青色が適用され、次のp要素には適用されません。

<div class="container">
   <p>これは子要素です。</p>
   <p>これも子要素です。</p>
      <div>
         <p>これは孫要素です。</p>
      </div>
</div>

.container > p {
color: blue;
}

上記のCSSでは、.containerというクラスを持つ要素の直接の子要素であるp要素のみ、文字色を青色に設定しています。

つまり、2番目のdiv要素内にあるp要素（孫要素）は、青色になりません。

※子セレクタでは、親要素と子要素の間に>記号を使用します。

隣接セレクタ

隣接セレクタとは。ある要素の直後に位置する兄弟要素にのみスタイルを適用するためのセレクタです。

<p>これは段落1です。</p>
<p class="highlight">これは段落2です。</p>
<p>これは段落3です。</p>

p + .highlight {
   background-color: yellow;
}

上記のCSSでは、p要素の直後に続く.highlightというクラスを持つ要素（2番目の段落）にのみ、背景色を黄色に設定しています。

※必ず直接隣り合っている要素にのみスタイルが適用されます。間に他の要素があると適用されません。
※隣接セレクタでは、要素と要素の間に+記号を使用します。

プロパティの種類

CSSのプロパティとは、HTML要素に色やフォントサイズなど、どのようなスタイルを適用するかを指定するためのものです。

すでにセレクタのコード例でいくつかご紹介していますが、プロパティは値とペアで構成され、以下のように記述します。

p {
   color: blue;
   font-size: 16px;
   font-family: 游ゴシック
}

このCSSの例では、プロパティがcolor、font-size、font-familyとなり、値がblue、16px、游ゴシックとなります。

以下、初心者が知っておきたい主なプロパティをご紹介します。

テキストに関するプロパティ

プロパティ	スタイルの指定	主な値
`color`	文字の色	`red`(色名), `#ff0000`(16進数)など
`font-size`	文字の大きさ	`px`(※1), `em`(※2)など
`font-family`	フォントの種類	メイリオ, `游ゴシック`, `游明朝`など
`font-weight`	文字の太さ	`bold`(太字), `lighter`(少し細く)など
`text-align`	文字の水平方向	`left`(左寄せ), `center`(中央寄せ), `right`(右寄せ)など

※1：px（ピクセル）とは、デジタル画像やWebページにおいて、長さやサイズを表す単位の一つです。
※2：em（エム）とは、親要素のフォントサイズを基準とした相対的な長さの単位です。

CSSでテキストの見た目を調整するために使用するプロパティのことを、テキストに関するプロパティと言います。

フォントの種類から文字の色、大きさ、太さ、水平方向の位置などを指定することができます。

ボックスモデルに関するプロパティ

CSSのボックスモデル

プロパティ	スタイルの指定	主な値
`margin`	要素の外側の余白	`auto`(自動調整), `px`, `em`, `%`など
`border`	要素の周囲の枠線	`solid`(実線), `dotted`(点線)など
`padding`	要素の内側の余白	`px`, `em`, `%`など
`height`	要素の高さ	`px`, `em`, `%`など
`width`	要素の幅	`px`, `em`, `%`など

CSSでWebページを作成する際、全ての要素はボックスとして扱われます。

このボックスは、要素を囲む枠のようなもので、要素の大きさや位置、周囲との関係を決定します。この概念をボックスモデルと呼びます。

このボックスは、margin（マージン）、border（ボーダー）、padding（パディング）、コンテンツ領域（要素）の4つの部分で構成されています。

要素の外側・内側の余白の幅や高さ、要素の周囲の枠線、要素の高さや幅などを指定することができます。

2023.08.07

2024.08.14

CSSで枠線（ボーダー）をデザインする方法：borderプロパティ

Webサイトやブログ記事で使用頻度が高い枠線（ボーダー）。枠線で囲まれたポイントや注意点。このように一部を強調したり、要点をまとめる際に使うことが多いでしょう。これほんの少しだけCSSの知識があれば、自由にデザインできるんですよね。色や枠線のタイプもお好みで変更できるので、当記事でご...

その他のプロパティ

プロパティ	スタイルの指定	主な値
`background-color`	背景色	`red`(色名), `#ff0000`(16進数)など
`display`	要素の表示方法	`block`(※1), `inline`(※2), `inline-block`(※3)など
`position`	要素の位置	`static`(初期値), `relative`(相対位置), `absolute`(絶対位置), `fixed`(固定位置)など