CSSの概要

テキスト目次 > HTMLとCSSの基礎 > CSSの概要

CSSでできることから、書式・記述方法、プロパティ・セレクタの使い方などを一から丁寧に解説しています。CSSの基本をマスターしておけば、WebサイトやHTMLメールの簡単なデザイン変更は、自分自身で行うことができるようになります。

目次

CSSでできること

CSSとは、HTMLで記述された文章をWebブラウザやメールクライアントにどのように表示するかを定義するための言語です。例えばCSSでは、以下のようなことを定義することができます

  • 文字の色、サイズ、行間、行揃えなどの指定
  • 背景色、背景画像、ボーダー、角丸などの指定
  • レイアウト、余白の調整

　CSSは、主に見た目の装飾に関することを定義し、HTMLはページの文章構造を定義します。そのためCSSとHTMLは常にセットで使用されます。CSSを記述するためには、まず構造化されたHTMLソース（h1 > h2 > h3などの構造）を作成し、そのHTMLに対してCSSのスタイルを実装していきます。

CSS実装前のHTMLプレビュー

上記は、まだCSSを実装していないHTMLをプレビューしたものです。まだ文章構造のみでWEBページとして見られるデザインの体を成していません。

CSS実装後のHTMLプレビュー

上記が、同じHTMLに対してCSSを実装したプレビューです。レイアウトや見た目の装飾が整い、見やすいデザインになっています。CSSが見た目を制御していることがよくお分かり頂けると思います。

CSSの基本書式

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

セレクタ

　セレクタとは、セレクト（選択する）という名前の通り、どの部分にCSSを適用させるかを選択する役割を果たします。例えば、「h1、h2、p、img」などの要素や、「id=”属性名” class=”属性名”」などのidやclassに指定した属性名のことを指します。セレクタの指定方法は、後半で詳しく解説します。

プロパティ

　プロパティとは、適用するCSSのスタイルの種類のことです。例えば、文字サイズを変更したい場合の「font-size」や、背景色を変更したい場合の「background-color」などのことを指します。

　CSSには、様々なプロパティが用意されており、実現したいデザインに応じてプロパティを使い分けます。初心者がまず覚えておきたい基本的なCSSプロパティを記事の後半で紹介しています。

値

　値とは、セレクタに適用するプロパティを「どのように変更するのか」の具体的な数値のことです。例えば、プロパティに文字サイズを変更する「font-size」が指定されている場合の「24px」「1.5em」「100%」などを指します。指定する値は、プロパティによって異なります。

具体的な記述手順

h1 {
    font-size: 24px;
}
HTML

　上記は、「h1（見出し）」の、「font-size（フォントサイズ）」を、「24px」に指定するためのCSSの記述になります。

　記述の手順は、まずh1のセレクタを先頭に記述し、プロパティと値は、{ }（波括弧）で囲います。プロパティと値は、:（コロン）でつなぎます。

　複数のプロパティを同時に指定することもできます。以下のように、;（セミコロン）で区切って記述します。最後の行のセミコロンは省略することもできます。

h1 {
    font-size: 24px;
    font-weight: bold;
    color: #ff7800
}
HTML

よく使う単位

　CSSでは、フォントサイズや、幅や高さの値を指定するために様々な単位を使用します。

　CSSでよく使う単位は、「px」「%」「em」「rem」の4つがほとんどです。まずはこの4つの単位を覚えておきましょう。

単位解説
px（ピクセル）モニタの1ピクセルを1pxとする絶対値の単位。
%（パーセント）ブラウザのデフォルトフォントサイズを100%、またパーセントによる幅や高さの割合指定。
em（エム）適用する要素の大文字のMのフォントサイズを1とする相対値の単位。
rem（ルートエム）ルート要素（html）の大文字のMのフォントサイズを1とする相対値の単位。

色指定の方法

　CSSでよく使われる色指定の方法は、「カラーコード指定」「RGB指定」「RGBA指定」の3つです。主に、文字色、背景色、ボーダー色などのカラープロパティに対して指定します。

カラーコード指定

　#から始まる16進数（00〜FF）のRGB値（赤・緑・青の値）による色の指定方法。

※小文字でも大文字でも可。
※RGBそれぞれの値がゾロ目の場合は、3桁に省略可能。
（例：#FFFFFF→#FFF、#FF0088→#F08）

RGB指定

　10進数（0〜255）のRGB値（赤・緑・青の値）による色の指定方法。

※0が最も薄く、255が最も濃い値を示します。

RGBA指定

　上記のRGB値（赤・緑・青の値）に、不透明度（A：0.0〜1.0）を加えた色の指定方法。

※0.0が透明、1.0が不透明。0.1〜0.9の小数点の値を使って、不透明度の割合を指定します。

RGB値の確認方法

具体的なカラーコードや、RGB値の確認方法は、Photoshopなどの画像編集ソフトを利用すると調べられます。ソフトが無い場合は、Google検索で「カラーピッカー」と検索すると、Googleの提供するカラーピッカーで簡単に調べられます。

CSSのコメントアウトの記述方法

　/* 〜 */で囲った部分は、ブラウザの表示には影響しないコメント記述部分になります。コメントアウトは、主に、一時的に指定したスタイルを無効化する場合（後から元に戻す可能性があるもの）や、何のスタイルを指定したかをコメントで残しておきたい場合、複数人で制作している場合の情報共有メモなどに利用されます。

　また、コメントアウト（/* 〜 */）は複数行にまたがっても機能します。

コメントの記述例

/* 大見出しの設定 */
h1 {
    /* font-size:2.0rem; */
    font-size:2.4rem; /* 24px */
    font-weight: bold; /* 太字 */
    color: #ff7800; /* オレンジ色 */
    /* 注意事項：スタイルを変更したら必ず実機確認！ */
}
/*
複数行にまたがっても
コメントアウトは機能します
*/
HTML

CSSの記述場所

CSSの記述場所には、以下の3つのパターンがあります。

インライン形式

　HTMLのタグの中に、直接CSSのスタイルを記述していく方法です。

<h1 style="font-size:24px;">大見出し</h1>
HTML

　要素タグの中に、CSSスタイルを記述するための「style=””」を追加して、セレクタ・プロパティ・値を指定します。

　適用したい要素に直接スタイルを記述していくので、直感的で分かりやすい方法ですが、もしも全ページ共通のスタイルを追加・修正したい場合には、全てのタグのスタイルを更新しなければならないというデメリットがあります。

　Web制作では、制作途中の一時的なテストとして利用されることはあります。HTMLメールの作成においては、インライン形式で記述する方法が推奨されています。

ヘッダー埋め込み形式

　head要素内に、style要素を使って一括してCSSを記述する方法です。

<head>
<style>
h1 {
    font-size:24px;
    font-weight: bold;
    color: #ff7800;
}
</style>
</head>
HTML

　HTMLとCSSを分けて記述することができますが、適用されるスタイルはそのページのみとなるため、もしも全ページ共通のスタイルを追加・修正したい場合には、全てのページやテンプレートを更新しなければなりません。

　インライン形式と同様に、CSSの更新効率が悪いため、特定のページにだけ適用したいスタイルがある場合などの使用に留めておくと良いでしょう。

　HTMLメールの作成においては、インライン形式と同様に、ヘッダー埋め込み形式でCSSを記述する方法が推奨されています。HTMLメールのCSSの記述については、以下の記事を参考にしてください。

外部参照

　CSSを外部ファイルとして別に作成し、HTMLからlink要素でリンクを貼る方法です。

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

　スタイルの追加・修正は、CSSファイルを更新するだけで、リンクしている全てのページに反映されるため、更新効率が良くなります。Webサイト制作では、最も使用頻度の高い記述方法です。

　ただし、外部参照によるCSSの読込は、ブラウザのレンダリングブロックの原因となります。大きなCSSファイルを読み込む場合は、ページの表示速度が遅くなる可能性があります。必要に応じて、ファーストビュー部分のスタイルを、埋め込み形式にするなどの工夫をすると良いでしょう。

外部参照CSSファイルの文字コード設定
style.cssなどの外部CSSファイルを作る際には、必ず先頭に、utf-8などの文字コードを記述しましょう。文字コードを指定しないと、ファイルの中に日本語を記述した場合に文字化けを起こす場合があります。[記述例]
@charset “utf-8”;
html {
　font-family:”ヒラギノ角ゴ Pro W3″,”ＭＳ Ｐゴシック”,sans-serif;
}

CSSが適用される優先順位

CSSの特徴として、同じ要素に異なるCSSスタイルを何度でも上書きすることができます。同じ要素の同じプロパティに値が重複指定されることは珍しいことではありません。

　CSSには、Webブラウザがどのスタイルを適用するのか（上書きするのか）を判断するための明確な優先順位のつけ方が定められています。

CSSの読込み順

　CSSスタイルの重複があった場合、基本的には後から読み込まれたスタイルが優先的に適用されます。

　例えば、以下の記述例の場合は、3つのフォントサイズが重複指定されていますが、適用されるのは一番最後に読み込まれた「font-size:18px」になります。後ろに書かれたスタイルに上書きされると覚えておけば良いでしょう。

h1 {
    font-size:24px;   
    font-size:20px;
    font-size:18px; 
}
HTML

　しかし、この上書きルールには例外があります。それは次に解説する「CSSの記述場所」と「詳細度」による優先順位です。CSSを後に書いてもスタイルが上書きされない場合、CSSの記述場所と詳細度が関係している可能性があります。

CSSの記述場所

　先に説明した通り、CSSを記述する場所は、インライン形式、ヘッダー埋め込み形式、外部参照の3つのパターンがあります。

　CSSスタイルの重複があった場合、このCSSの記述場所によっても、優先的に適用されるCSSが変わってきます。

　最も優先されるCSSは、インライン形式で記述したCSSスタイルです。ヘッダー埋め込み形式と外部参照については同等の優先順位で、後から読み込まれたスタイルが適用されます。

　以下の記述例では、h1タグの「大見出し」に対して、「インライン形式」「ヘッダー埋め込み形式」「外部参照1」「外部参照2」の異なる4つCSSを重複指定しました。h1タグには、どの順番でCSSスタイルが優先適用されるかを考えてみてください。

[HTML]
<head>
    <link rel="stylesheet" href="style1.css"><!-- 外部参照1 -->
    <!-- ヘッダー埋め込み形式 -->
    <style>
    h1 {
        font-size: 24px;
    }
    </style>
    <link rel="stylesheet" href="style2.css"><!-- 外部参照2 -->
</head>
<body>
    <h1 style="font-size:18px;">大見出し</h1><!-- インライン形式 -->
    
    
    
[CSS：外部参照1]
h1 {
    font-size: 22px;
}
[CSS：外部参照2]
h1 {
    font-size: 20px;
}
HTML

　上記の例の場合、適用されるCSSの優先順は「1番目：インライン形式」、「2番目：外部参照2」、「3番目：ヘッダー埋め込み形式」、「4番目：外部参照1」の順番で優先されますので、適用されるスタイルは「font-size:18px」になります。

※外部参照よりヘッダー埋め込み形式が後に書かれることが多いため、ヘッダー埋め込み形式が優先だと説明されている場合がありますが、あくまで2つの優先順位は同等で、後から読み込まれた方が適用されます。

CSSの詳細度

　CSSはセレクタの書き方によって、詳細度という概念で評価され、適用される優先順位を決定します。

　詳細度は、以下のようなバージョン番号のような形で表されます。

セレクタ詳細度
id名セレクタ／1個1.0.0
class名セレクタ／1個0.1.0
タグ名セレクタ／1個0.0.1

　覚え方としては、「最新のバージョン番号が付いたセレクタが優先適用される」と覚えておきましょう。

　初心者の方は、もっとざっくりと、「id名セレクタ　＞　class名セレクタ　＞　タグ名セレクタ」の順番で優先順位が高いと覚えておいても良いと思います。

　以下の記述例では、「大見出し」に対して、異なる7つのセレクタでCSSを重複指定しました。セレクタに指定された#id、.class、タグの数によってどのように詳細度が付くのかを見てみましょう。

	[HTML]
<div id="main">
　<h1 id="heading" class="heading c1 c2 c3 c4 c5 c6 c7 c8 c9 c10">大見出し</h1>
</div>


[CSS]
#main #heading { /* 詳細度：2.0.0 */
        font-size:24px;    
}
#main .heading { /* 詳細度：1.1.0 */
        font-size:23px;    
}
#main h1 { /* 詳細度：1.0.1 */
        font-size:22px;    
}
#heading { /* 詳細度1.0.0 */
        font-size:21px;
}
.heading { /* 詳細度0.1.0 */
        font-size:20px;    
}
h1 { /* 詳細度：0.0.1 */
        font-size:19px;    
}
#heading.c1.c2.c3.c4.c5.c6.c7.c8.c9.c10 { /* 詳細度：1.10.0 */
        font-size:18px;    
}
HTML

　詳細度で最も優先順位の高いセレクタは、IDセレクタを2つ繋げた「#main #heading」になります。よってフォントサイズは「24px」が適用されます。

※classセレクタが10個繋がっても、位が繰り上がるわけではないので注意してください。詳細度は、「0.10.0」になります。
※詳細度による優先順位が高ければ、CSSの読み込み順に関係なく、優先して適用されます。
※詳細度が同じだった場合は、後から書かれたスタイルが適用されます。

詳細度を計算してくれるサイト

セレクタを入力すると自動で詳細度を計算してくれる便利なサイトもあります。

引用元：https://specificity.keegan.st

!important指定

　ここまで、CSSの読み込み順、記述場所、詳細度による優先順位について説明して来ましたが、これらすべての優先順位を覆して強制的にスタイルを適用させる「!important指定」という優先順位の変更方法があります。

　記述方法は、CSSの値の後ろに半角スペースを入れ、「!important」の記述を追加します。

h1 {
    font-size: 18px !important;
}
HTML

　「!important指定」を多用し過ぎると、優先順位のルールが崩れ、CSSの更新やメンテナンスが難しくなる場合がありますので注意しましょう。

　HTMLメールを作成する場合は、メーラー固有のCSSスタイルを打ち消す目的で、意図的に「!important指定」を多用する場合もあります。

チェックテスト

チェックテストを確認する

下記コードにおいて、下記2つを記述したcssをdiscordで共有ください。

①h1タグにcolorプロパティの値をredに指定するcss

②itemクラスにfont-sizeプロパティの値を50pxに指定するcss

お問い合わせ

相談などお気軽にお問い合わせ下さい

問い合わせフォーム
TOP