ウェブサイト制作に携わっている方、あるいはIT業界の方で、CSSという言葉をどこかで聞いたことがあるでしょう。
CSSとはウェブサイト内でデザインや色を調節することができる言語です。HTMLとセットでウェブサイトの構築の役割を持ちます。
ここではCSSとは何かについて、概要から具体的な書き方まで詳しく説明していきます。いざCSSを書くときにも対応できる知識が身につきますので、ぜひ役立ててください。
＜無料＞資料ダウンロード
【発注時に役立つ】Webサイト制作の手順ガイド
～Webサイト制作の流れを理解して、失敗しないようにしましょう！～
目次
CSSとは？
CSSとはCascading Style Sheetsの頭文字をとった略称で、スタイルシートとも呼ばれます。Webページのレイアウト・デザインなどのスタイルを設定できるコードです。Webページの見栄えを整えたり、色の設定などをすることができます。
またCSSで設定を行わないと、ページの見た目を調節できません。HTMLだけでは単調な見た目になってしまったり、色味を思ったように配置できなかったりします。
結果として、ユーザーが読む気にならなくなって離脱率を高めてしまったり、どこに何が置いてあるのかがわかりにくくなったりしてしまいます。ユーザビリティのためにCSSは重要な項目です。
文字の色を決めたり、ハイライトやマーカーの色、背景を決めたりするのもCSSです。余白を調節してみやすくすることもできます。
HTMLは文章を構築するために書かれるものですが、その構築されたものに対してCSSでデザインを整えるという、それぞれ違った役割を持つのです。
CSSを記述する流れ
CSSを書いていくには、基本的に以下の方法があります。書き方の手順についても、ここで詳しく説明していくので、あわせて確認していきましょう。
メモ帳アプリなどを使う
HTMLやCSSは、プレーンテキストで書いていく必要があります。よく使われているソフトのワードやエクセルではなく、メモ帳アプリやテキストエディタなどを使いましょう。
Sublime Textのようなソフトを使うと、すぐにコードを書けるようになっています。
まずは簡単なHTMLを記述する
まずは開いたプレーンテキストアプリに、簡単にHTMLを記述してみましょう。以下のように記載すると、<h2>の見出しと<p>にある本文を中心に構成ができあがります。これがCSSを入れるための土台です。これでいったんファイルとして保存します。
なお、データの形式はエラーを防ぐためにも「UTF-8」に設定しておきましょう。拡張子は「.html」です。
<html>
<head>
<link rel=”stylesheet” href=”text.css”>
</head>
<body>
<h2>まずHTMLを書いてみよう</h2>
<p>CSSでは、色や線、余白などを調整できます</p>
</body>
</html>
作ったHTMLファイルの見栄えを変更するCSSを記述する
もう一度メモアプリを開き、今度はCSSを記述します。先ほど書いたHTMLに、CSSを反映させるにはlink relで指定する必要があります。
<link rel=”stylesheet” href=”text.css”>
という記述がありますが、この記述があることでCSSを読み込むことができます。
CSSでは、例えば以下のように記述することで<h2>を黒い背景の白い文字に、<p>を赤文字にすることができます。
h2{font-size:20px;
color: white;
background-color: black;}
p{color: red;}
CSSの基本書式やよく使う記述方法を紹介
CSSで具体的に何をどのように書いていけばいいのか、ここで詳しく具体例を含めて説明していきます。
どの部分にCSSを適用させるか指定する「セレクタ」
セレクタはどの部分にCSSを適用させるかを指定するものです。適用させた先でデザインの変更が行えます。セレクタの書き方には複数方法があるので、まずは重要なものを見ていきましょう。
タグで指定する方法
a{〜}やdiv{〜}、img{〜}など、タグで指定することができます。例えば、pタグの色を赤に変更したい場合は以下のようにします。
p{color:red}
h1やh2などもそれぞれタグで指定して、表示を変えることができます。画像ならimgなどで変更が可能です。
id名で指定
<タグ名 id=”id名”>のように、id名で指定することもできます。
class名で指定
<タグ名 class=”class名”>のように、class指定も可能です。
どのスタイルを適用させるか指定する「プロパティ」
プロパティは、どんなスタイルにするか指定するものです。常に値と一緒に表記されます。
文字色や背景色など、細かい部分を指定することができます。右寄せにしたり中央揃えにしたりも、プロパティで行えます。そのほか、文字の背景色を作ったり、囲み線や下線を作ったり、その線の太さや種類を変えることもできます。
プロパティをどう変更するか指定する「値」
プロパティで背景色や文字サイズを指定したときに、具体的にどのように変更するのかを指定するのが値です。
背景色を変更する
{ background-color: 入れたい色}で変更できます。<body>全体の色を変えるか、<div>で指定した一部の色を変えるかも選べるため、場合に応じて変更していきましょう。
なお、<body>で色を変えたい場合は以下のように記述します。
body { background-color: 入れたい色}
文字サイズを変更する
文字サイズを変更する場合は、pxあるいはemを使用します。
- px：縦のピクセルの大きさで指定する値
- em：現在のフォントサイズに対する倍率
例えば、現在のフォントサイズが10pxだとしたら、2.0emと書けば20pxに、3.0emと書けば30pxになります。
ピクセル指定する場合は、具体的には以下のように記載します。
.px { font-size: 20px;}
文字の色を変える
文字の色を変えるには、色名あるいはカラーコードを指定して書きます。
- 色名：英語の色名
- カラーコード：#+6ケタの英数字
色名で記載する場合、赤ならred、オレンジならorange、黒ならblackと書くことになります。色ごとにコードが決まっているため、例えば赤なら#ff0000、白なら#ffffff、黒なら#000000になります。
CSSの記述によく使う単位
文字サイズや行間等を指定するときによく使う単位を紹介していきます。
「px」「%」「em」「rem」の4つがよく使われる単位です。まずはこの4つを覚えておきましょう。
- 「px」：ピクセルと読む。モニタの1ピクセルを1pxとする絶対値の単位
- 「%」：パーセントと読む。ブラウザでデフォルトに設定されているフォントサイズを100%、また幅や高さの割合指定の単位
- 「em」：エムと読む。適用する要素の大文字のMのフォントサイズを1とする相対値の単位
- 「rem」：レムと読む。ルート要素（html）の大文字のMのフォントサイズを1とする相対値の単位
CSSで色を指定する方法
色は、カラーコード・RGB・RGBAで指定できます。文字の色や背景色などのカラープロパティに対して使用します。
カラーコード指定
カラーコードとは、#から始まる16進数（00〜FF）のRGB値（赤・緑・青の値）による色の指定方法です。初めの2桁が赤、次の2桁が緑、最後の2桁が青の値を示します。
小文字でも大文字でも同じコード認識がなされます。なお、RGBそれぞれの値がゾロ目の場合は、3桁に省略できます。
RGB指定
GRBは、10進数（0〜255）のRGB値（赤・緑・青の値）による色の指定方法です。0が一番濃く、255が最も薄いことを示します。これもカラーコードの表示と同様、赤、緑、青の順で値が示されます。
RGBA指定
RGB値（赤・緑・青の値）に、透明度を加えた色の指定方法です。透明度は（A：0.0〜1.0）の間で示されます。
0.0が透明、1.0が不透明を表します。
後から編集するときに便利なコメントアウト機能
コメントアウトとは、ブラウザ表示に影響しない機能です。CSSの中で自分用にメモの書き込みを行いたい場合に使用します。コメントアウトをしておくと、その記載はCSSに影響しないため、自由な記述を行うことができます。
なお、HTMLでもコメントアウトの記載方法がありますが、書き方が異なることに注意してください。（HTMLは「<!– 〜 –>」と書きます）
CSSでは「/* コメントアウトする内容 */」と記載することでコメントアウトができます。
CSSを記述する場所は3種類
CSSは「インライン形式」「ヘッダー埋め込み形式」「外部参照形式」の3つの場所に書き込むことができます。それぞれ詳しく紹介します。
HTMLタグの中に直接記述する「インライン形式」
インライン形式とは、HTMLの記載の中に直接CSSの記述を埋め込むやり方です。
適用させたい箇所に直接指示が出せるため、わかりやすいやり方なのですが、ウェブサイトの制作では推奨されません。変更する場合には直接そのページのHTMLと共に記述した部分を変更する必要があるからです。
それぞれの箇所で個別に記述し、スタイルを変更していくことになるため、サイト全体で共通のスタイルを使いたい場合などには向きません。反対に、HTML形式のメールなどで推奨されている記述形式です。
head内に一括して記述する「ヘッダー埋め込み形式」
「ヘッダー埋め込み形式」は、CSSのhead部分にstyle要素を一括して記述するやり方です。この記述方法にすると、HTMLとCSSの記述を区分けすることができます。
ただし、適用される範囲は、そのページ内のみとなることに注意が必要です。インライン形式と同様、全ページ共通で追加や修正など、何らかの変更を行いたい場合は、一つづつ変更する必要があるためです。
効率的とは言えないため、例えばトップページなど特定のページのみに変更をとどめておきたい場合などに使うと良いでしょう。
外部ファイルとして別で作成する「外部参照形式」
「外部参照形式」とは、CSSを外部ファイルとして別に作成した上で、HTMLから読み込むやり方です。link要素を用いて外部のCSSを参照することになります。
このやり方は変更性に優れており、CSSファイルを変更するだけで全てのページが一斉に変更されます。ページの統一性と作業の効率性から、優れたやり方と言えます。
ただし注意点として、大きなファイルを読み込む場合にページの速度が遅くなる場合があります。外部参照による読み込みは、ブラウザのレンダリングブロックなどに引っかかる場合があるためです。
表示スピードが遅くなると、サイトの評価にも関わるため、対策は必須。ファーストビュー（FV）部分を埋め込み形式にするなど、工夫をしていくと良いでしょう。
覚えておくと便利な基本のCSSプロパティ
CSSを記述しておくときに必ず覚えておきたい、基本のプロパティを解説していきます。
ぜひ覚えて、CSS記載の際に役立ててください。
文字色指定
文字色を指定するためには「color」を使います。colorで指定できるのは、GBR値あるいはカラーコードです。
body {
color: #ff0000;
}
上記のように記載することで、<body>内にある文字は赤色になります。オレンジにしたいときは「orange」あるいは「#ffa500」、青にしたいときは「blue」あるいは「#0000ff」と記載すれば色を変更できます。
文字サイズ指定
文字（フォント）サイズはpxやemで指定できます。
例えば以下のように記載することで、<h2>の文字サイズを指定できます。
h2 {
font-size: 20px;
font-size: 1.4em;
font-size: 1.4rem;
font-size: 130%;
}
文字太さ指定
文字の太さは「font-weight」を使って、100から900の間で太さを指定できます。なお、標準の太さは400です。
数字で表記する以外にも、<normal>（標準）、<bold>（太字）、<lighter>（現状より一段階細く）、<bolder>（現状より一段階太く）という文字で太さを指定することも可能です。
例えば、<h2>の文字の太さを変えたい場合、以下のように記載します。
h2 {
font-weight: 600;
font-weight: bold;
font-weight: lighter;
}
文字フォント指定
文字の書体（フォント）は「font-family」で指定できます。フォント名を複数使用したい場合はカンマを使って区切り、指定していきます。
フォント名については、フォントの正しい名称（フォントファミリー名）を入力する必要があります。半角・全角などが間違っていると正しく認識されないため、入力の際はコピーで入れるなど注意してください。
例えば以下のように指定して、<body>や<h2>のフォントを指定することができます。
body {
font-family: “メイリオ” ;
}
h2 {
font-family: “MS Pゴシック” ;
}
文字位置指定
文字の位置（行の高さ）は、「line-height」で指定可能です。文字の大きさと同様、px、em、rem、%を使って行の高さを指定していきます。単位なしで指定も可能ですが、その場合ブラウザのデフォルト値が自動的に当てはめられます。
例えば<h2>の行の高さを調節したい場合、以下のように記載します。
h2 {
line-height: 30px;
line-height: 1.2em;
line-height: 3.0rem;
line-height: 120%;
line-height: 1.1;
}
フォントサイズと行の高さには相関関係があり、それぞれの設定によって行間が変わってきます。それぞれどのようになるか、目視で確認するか計算するかで調節していきましょう。
なおCSSのスタイルは子・孫要素に引き継がれていくもののため、文字位置指定は単位なしのデフォルトが推奨されています。そのほうが行間の調整がうまくいきやすいからです。
文字装飾指定
文字装飾としては、以下のようなものがあります。
- 下線（アンダーライン）
- 蛍光ペン（マーカー）
- スラッシュ
- 1文字目のみの変更
- 縁取り
- アイコン
このうち、例えば下線に限ってみても種類は豊富です。
下線の基本は「text-decoration: underline;」と記述しますが、さらにテキストの上部にひく「overline」、取り消し線になる「line-through」などの指定ができます。
さらに「text-decoration-style」として、1本線、2本線、波線、点線などを使い分けることができます。
背景色指定
背景色は「background-color」で指定します。 文字色と同様、RGB値やカラーコードで指定できます。例えば本文の文字の色を赤に、背景を黒にしたい場合は
body {
color: #ff0000;
background-color: #000000;
}
と書くことで指定が可能です。
背景画像指定
背景は色を入れるだけではなく、画像を入れることもできます。その場合は「background-image」で指定します。背景画像として使用する画像のURLを指定することで、その画像を読み込む仕組みです。画像のパスは絶対パス、あるいはCSSのファイルから見て相対パスで書けば問題ありません。
URLを入れ込む際は、シングルコーテーション、あるいはダブルコーテーションのどちらでも囲えますし、省略しても認識されます。
背景画像は繰り返し読み込むことができます。詳しい設定方法は以下のようになります。
h1 {
background-image: url(“https://〜〜.png”);
background-image: url(‘/〜〜.png’);
background-repeat: no-repeat; /* 背景画像を繰り返さない指定方法 */
background-repeat: repeat-y; /* 背景画像を縦方向に繰り返す指定方法 */
background-repeat: repeat-x; /* 背景画像を横方向に繰り返す指定方法 */
}
x軸が横、y軸が縦と思うと簡単に覚えられます。基本的に英単語の指示なので、難しく考える必要はないでしょう。
よく使う基本のセレクタも覚えておこう
ここまでCSSのプロパティについて詳しく見てきましたが、セレクタについてもぜひ覚えて活用していきましょう。
CSSセレクタで指定することで、どの部分にCSSで記載した内容を適用するかを指定できます。ここではよく使う5つのセレクタを解説していきます。
HTMLのタグ名を直接セレクタに指定する
HTMLで使うタグ名をそのままセレクタとして指定する方法です。htmlでh1と指定していたら、そのままCSSのセレクタにもh1と記載します。
ただし、HTMLの構造で大きく変更をしなくてはならないときに作業効率が悪いため、このタグ名でのセレクタ指定は使用しないことが推奨されています。
例えば、<h2>でHTMLとCSSに以下のように記載して指定することができます。
[HTML]
<h2>中見出し</h2>
[CSS]
h2 {
color: #ff0000;
}
このように記載することで、<h2>の見出しの文字は赤色に設定できます。
HTMLソース内のid名をセレクタに指定する
HTMLソース内にあるid名をセレクタとして指定する方法です。id名の頭に<#>（シャープ）を必ず追記します。
以下では、HTMLタグの<h2>見出しの中で、id名<heading>によるセレクト指定をしている記述です。
[HTML]
<h2 id=”heading”>中見出し</h2>
[CSS]
#heading {
font-size:20px;
}
HTMLソース内の.class名をセレクタに指定する
「.class」でのセレクタ指定では、HTMLソースの中にあるclass名をセレクタに指定します。先頭にドットをつけて、ソース内のclass名をセレクタとして指定する方法です。
以下は、HTML内にある<h2>タグに入っているid名<heading>に対してセレクト指定をしている記述です。
[HTML]
<h2 class=”heading”>中見出し</h2>
[CSS]
.heading {
font-size:20px;
}
対象を絞り込んでセレクタに指定する
「このタグの中にあるここだけに適用させたい」というときに使える方法です。子孫セレクタと呼ばれます。
タグやid名やclass名などを半角スペースで区切ることで、どんどん絞り込むことができます。
例えば、下記のように書くことで、divタグの中のpタグの中のspanを赤色にする指定ができます。必ずこの順番になっている部分に限定して適用させることができ、非常に便利です。
.div p span{color: red;}
複数のセレクタをカンマで区切ってまとめて指定する
複数のセレクタに同じCSSを指定したい場合は、カンマで区切ればまとめて同じスタイルを指定することができます。内容が重複してしまう部分を一つの記載にまとめることができ、CSSの記述をすっきりと整理することができるのがメリットです。
なお、子孫セレクタだと意味が変わってしまいますが、複数セレクタの場合は、カンマの後にスペースが入っていてもいなくてもどちらでも問題ありません。
例えば以下のように記載することができます。
h1, h2, h3, p {
color: #000000;
font-weight: normal;
line-height: 1.2;
}
h1 {font-size: 20px;}
h2 {font-size: 18px;}
h3 {font-size: 16px;}
p {font-size: 14px;}
同じ要素に対してCSSを指定したらどちらが優先される？
同じ要素に対してCSSを設定してしまった場合、どちらが優先されるのか、どう適用されるのかは知っておきたいところです。
例えばh1に対して2つ別の指定をCSS内でしたとすると、いくつかのルールに基づいてどれが優先して適用されるかが変わります。複数のルールに基づいて優先順位は変わるので、以下の4つのルールを覚えておきましょう。
パターン1. 後から記述した新しいものが優先
CSSでは基本的に後から書いたほうが優先されます。例えば、下記のように同じセレクタを使って色指定した場合、後から書いたほうが優先されるのです。
.heading{
background:#ffffff;
}
.heading{
background:#ff0000;/*後から書いたのでこちらが優先されます*/
}
パターン2. インライン形式で記述したものが優先
前述のとおりCSSを記述する場所によっても優先順位が異なります。インライン形式、つまりHTMLのタグの中で記述したものが最優先で、それ以外は同等優先順です。
指定したい場所で直接スタイルを書き込むため、修正したい場合はそれぞれ指定した場所を見つけなくてはなりません。作業効率的にデメリットが生じるという点で、ウェブサイトの中で使用することは推奨されません。
例えば以下のように記述することができます。
<h2 style=”font-size:20px;”>大見出し</h2>
このようにフォントサイズを限定的に変えられます。
パターン3. id名セレクタが優先
セレクタの書き方によっても優先順位が異なります。id名＞class名＞タグ名の順に優先され、これは「詳細度」と呼ばれています。さらに、HTMLタグとclassを比較すると、classが優先されます。
#test{
background:#ffffff;/*IDのため優先されます*/
}
.heading{
background:#ff0000;
}
div{
background:#000000;/*一番下にあり、書いた順序としては優先順位が高いのですがHTMLタグなので最も優先順位が低くなります*/
}
パターン4. !important指定したものが何よりも最優先
これまでのどのルールよりも、!important指定したものが最優先です。全ての優先順位ルールに優先されます。「絶対に適用する」という意味をもつのです。
ただし、どれにも優先されて適用されてしまうため、使いすぎるとほかのルールが崩れて更新が難しくなってしまうことがあります。のちのちサイトの改修などを行う場合に困らないためにも、あまり多用しないようにしておきましょう。
例えば下記のようにid、class、HTMLの順で記載したとしたら、この場合HTML>id>classという順番で優先されます。
#test{
background:#ffffff;/*IDのため優先されます*/
}
.heading{
background:#ff0000;
}
div{
background:#000000 !important; /*!importantタグが記載されているので、HTMLタグですが最優先されます*/
}
CSSのまとめ
CSSの基本書式、基本的なプロパティ、セレクタの使い方を中心に解説しました。
初心者の方には分かりにくい部分があるかもしれませんが、CSSは基本が大切です。まずは基本をマスターし、慣れてきた段階で使えるCSSプロパティを増やしてみてください。
そうして一つひとつ積み重ねていけば、いつか必ずWebサイトができるようになります。少しずつ楽しみながらCSSを学んでいきましょう！
＜無料＞資料ダウンロード
【発注時に役立つ】Webサイト制作の手順ガイド
～Webサイト制作の流れを理解して、失敗しないようにしましょう！～
