記事内に商品プロモーションが含まれる場合があります
今回は「CSS（スタイルシート）がどのようなものか」を理解するとともに、基本的な書き方を学んでいきましょう。CSSを理解するには、ある程度のHTMLの知識が必要になります。さきほどリンクをのせた「0からのHTML入門」を読んでからこの記事を読むと、理解しやすくなると思います。
1.CSSとは？
CSSとは、ウェブページのデザインやレイアウトなどの見栄えを変えていくためのコンピュータ言語です。CSSは「スタイルシート」とも呼ばれます。
1-1.もしCSSを使わずにウェブページを作ると…
CSSを使わずにHTMLだけでウェブページをつくると文字と画像だけが上から下に並んだ単調なページになってしまいます。HTMLはあくまでも土台を作るものなのです。
HTMLで作られたウェブページの土台に対して、「デザイン」や「レイアウト」を決めるのがCSSです。CSSにより文字や背景の色を変えたり、カラフルな線を引いたり、余白を調整したりと見栄えをきれいにすることができます。
HTMLだけだと…こちらはHTMLだけで作られたサルワカのトップページです。なんとも単調でバランスの悪いデザインのサイトになってしまいました。
HTML+CSSなら…こちらはCSSでデザインを整えたサルワカのトップページです。CSSを使えば、ウェブページの見栄えを自分の好きなようにカスタマイズできるのです。
1-2.CSSでできること
詳しい説明は後でしますが、CSSでできることを少しだけ紹介します。
たとえば文字を自分の好きな色に変えることができます。次のようなHTMLコードがあるとします。<p>~</p>は段落を表すのでしたね。
<p>これは例文です。</p>
これは例文です。
CSSにより文字の色をオレンジに変えてみましょう。
<p>これは例文です。</p>CSSコード
p {
color: orange;
}
これは例文です。
CSSコードの書き方は後でくわしく説明するので、現時点で理解する必要はありません。 さらに文字を大きくしてみましょう。↓
<p>これは例文です。</p>CSSコード
p {
color: orange;
font-size: 20px;
}
これは例文です。
このようにCSSでは色や大きさを変えるなど様々なデザイン設定をすることができます。
2.CSSはどこに書くの？
では、CSSはどこに書くのでしょうか。どのようにHTMLとCSSを結びつけるのでしょうか。
2-1.書く方法は3パターンある
CSSの書く場所は3パターンに分けることができます。それぞれメリット・デメリットがあり、うまく使い分けていく必要があります。
今回は最も分かりやすい『HTMLファイルにstyleタグを追加してその中にCSSを書く方法』を紹介します。
2-2.HTMLのstyleタグ内にサンプルCSSを書いてみよう。
簡単なので一緒にやっていきましょう。
1.テキストエディターを開く
テキストエディターを開きます。Sublime Textの場合、開くとすぐにコードが書ける状態になります。
2.HTMLファイルを作る
まずは土台となるHTMLファイルを作りましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS練習</title> </head> <body> <div id="headline"> <h1>CSS入門</h1> <p>これは段落です。</p> </div> <div class="main"> <h2>これは見出しです。</h2> <p>これは<span class="light">例</span>です。</p> <p> <a href="https://saruwakakun.com/">ホームへ</a> 戻ります。</p> </div> </body> </html>
こちらのコードをコピーして、テキストエディターに貼りましょう。
このような感じになりますね。 tabや半角スペースによりコードの左側にスペースを空けて整理しておくと見やすくなります。 HTMLのタグどうしの間にスペースを空けても、ブラウザ表示ではスペースは入りません。
このHTMLファイルを保存してブラウザで表示しましょう。手順はHTML入門で行ったものと同じですが、もう一度説明しておきます。
3.HTMLファイルを保存
- Windows：ctrl+S
- Mac:⌘+S
でファイルを保存します。ファイル名は何でも良いですが、末尾は.htmlにしましょう。保存先を選び[Save]をクリックします。
保存したHTMLファイルは引き続き使うので、開いたままにしておいてください。
4.ブラウザにHTMLファイルをドラッグ
ブラウザウィンドウとフォルダウィンドウをそれぞれ縮小して横に並べます。そして、保存したHTMLファイルをブラウザの上にドラッグします。
5.ブラウザでHTMLファイルが表示される
ブラウザでHTMLファイルが開きました。現段階ではHTMLだけなので、質素な見た目ですね。この質素な見た目をCSSで変えていきましょう。
6.HTMLファイル内にstyleタグを書く
テキストエディターに戻ります。HTMLのheadタグの中は「ウェブページの様々な情報や設定を書く」部分でしたね。ここにstyleタグを作れば、その中にCSSを書いていくことができます。
CSSを書くためにheadタグの中にstyleタグを書きます。</head>の直前に<style> </style>と書きましょう。
あとはstyleタグ内にCSSを書いていくことで、ページの見た目を変えることができます。
7. CSSを書いてみよう
サンプルのCSSを1つだけstyleタグ内に書いてみましょう（CSSの書き方は後ほど0から解説します）。
<style>
body {
color: gray;
}
</style>
styleタグ内にこのようなコードを書きます。書き方は後で説明するので、そのまま書き写せばOKですが、ざっくりと「bodyタグ内の文字色(color)をグレイ(gray)に」という意味になります。
ここでbodyタグを見てみましょう。body {~}という指定は「bodyタグ内にある全タグのデザインを変えるよ」という意味になります。
「bodyタグ内＝ブラウザに表示されるもの」でしたね。つまり、このCSSコードは「ブラウザに表示されている文字の色を全部変えるよ」という意味になります。
よく分からなくてもOKです。
8. 保存してブラウザを再読み込み
テキストエディターでctrl+Sでファイルを上書き保存します。Macならctrlのかわりに⌘
ブラウザで再読み込みすると、テキストエディターに書いたCSSが反映されます。
- Windows：F5
- Mac:⌘+R
このようにHTMLファイルのheadタグ内にstyleタグを作り、その中にCSSを書くことができます。ちなみにCSSを書く方法は他にもう２種類あります。こちらの記事にまとめたので、この記事を読み終わった後にでも目を通してみると良いでしょう。
CSSはどこに書くのかをまとめました。
3.書き方の基本
ここからはCSSの書き方を学んでいきましょう。
3-1.CSSの基本文法
CSSの書き方は以下のように決まっています。
セレクタ {
プロパティ：値
}セレクタ・プロパティ・値と呼ばれる部分を埋めることにより「どこの・何を・どのような見た目に変えるのか」を指定することができます。
セレクタ
セレクタにはデザイン変更の適用先を書きます。つまり「どの部分のデザインを変えるのか」を指定します。ここにはタグ名やclass名、id名を書きます。
たとえば、p{〜}と書けば「pタグ内のデザインを変える」という指定に、h1{〜}と書けば「h1タグ内のデザインを変える」という指定になります。※ 詳しいセレクタの書き方はのちほど。
プロパティ
プロパティでは「セレクタで指定された部分の何を変えるのか」を決めます。色を変えるのか、それとも線をひくのか、あるいは余白を調整するのか、ということを指定するわけですね。
たとえばプロパティにcolorと書けば文字色を変える指定に、backgroundと書けば背景色を変える指定になります。
値
値では「どのように見た目を変えるのか」を決めます。たとえばセレクタとプロパティで「pタグの文字色を変える」ということが指定されているなら、値では「何色に変えるのか」を決めるわけですね。
たとえばプロパティで「color」が指定されているなら、値ではblueやredというように「適用する色」を指定します。
プロパティと値は波括弧で囲う
セレクタは何にも囲まず先頭に書きます。プロパティと値は波括弧{}で囲います。
プロパティと値はコロン（:）でつなぐ
プロパティと値は常にセットで、単独で使われることはありません。プロパティと値の間にはコロン:を書きます。
複数のプロパティを指定するときはセミコロン（;）で区切る
複数のプロパティをまとめて指定したいときはセミコロン;で区切り、そのあとに別の「プロパティ:値」を書きます。これで同時にいくつでもプロパティを指定することができます。
3-2.書き方例
例えばこのCSSコードは「bodyタグ内の文字色(color)をグレー(gray)にする」というデザイン指定になるわけですね。
3-3.コードの間に半角スペースやtab、改行を入れてもOK
ちなみにCSSではコードの間に半角スペースやTab、改行を入れても、スタイルの指定内容が変わることはありません。自分が見やすいようにコードをきれいに並べながら作業をしましょう。後から見返したり、変更を加えたりしやすくなります。ただし、全角スペースは絶対に使わないようにしましょう。
4.セレクタの基本的な書き方を覚えよう
セレクタでは「どの部分のデザインを変えるのか」という適用先を指定するのでしたね。セレクタの書き方には色々なパターンがあります。全て紹介しようとするとものすごーく長くなってしまうので、今回は「これだけ知っておけばだいたい対応できる」というセレクタに絞って紹介します。
4-1.タグ名で適用先を指定
タグ名 {〜}
ひとつめはタグで指定する方法です。タグで指定する場合は、タグ名をそのまま書けばOKです。a{〜}やdiv{〜}、img{〜}といった具合ですね。例えば、pタグの文字色をオレンジ色にしてみましょう。
↓実際のコードとブラウザでの表示を見てみます。
<body> <div id="headline"> <h1>CSS入門</h1> <p>これは段落です。</p> </div> <div class="main"> <h2>これは見出しです。</h2> <p>これは<span class="light">例</span>です。</p> <p> <a href="https://saruwakakun.com/">ホームへ</a> 戻ります。</p> </div> </body>CSS
p {
color:orange;
}
↑pタグ内の文字がオレンジ色になりました。
CSSはstyleタグ内に書きましょう。
aタグ内の文字（リンクテキスト）が青のままですね。リンクテキストは少し特別で色を変えるためには、a {color: orange}というようにaタグを指定する必要があります。
4-2.id名で指定
#id名{〜}
HTMLでは<タグ名 id="id名">のようにidが指定されるんでしたね（そして同じid名はページ内に1回しか使えないんでしたね）。このid名をデザインの適用先に指定する場合は#id名{}というようにid名の前に#をつけましょう。
試しにid=”headline”の部分の文字色をオレンジにしてみましょう。
タグに自分の好きなid名を書いておき、CSSでそのid名に対してデザインを指定すれば良いわけですね。
↓実際にコードを書いて、ブラウザでの表示を見てみましょう。
<div id="headline"> <h1>CSS入門</h1> <p>これは段落です。</p> </div> <div class="main"> <h2>これは見出しです。</h2> <p>これは<span class="light">例</span>です。</p> <p> <a href="https://saruwakakun.com/">ホームへ</a> 戻ります。</p> </div>CSS
#headline {
color: orange;
}
↑id="headline"のタグ内の文字色がオレンジになりました。
4-3. class名で指定
.class名{〜}
HTMLでは<タグ名 class="class名">というように指定をするんでしたね。class名でセレクタを指定する場合は.class名{〜}のように.ドット(ピリオド)を前につけます。試しにclass=”main”の文字色をオレンジにしてみましょう。
↓実際のコードとブラウザでの表示を見てみます。
<body> <div id="headline"> <h1>CSS入門</h1> <p>これは段落です。</p> </div> <div class="main"> <h2>これは見出しです。</h2> <p>これは<span class="light">例</span>です。</p> <p> <a href="https://saruwakakun.com/">ホームへ</a> 戻ります。</p> </div> </body>CSS
.main {
color: orange;
}
class="main"のタグ内の文字がオレンジになりました。
4-4.適用先を複数指定する
◯◯,◯◯,◯◯ {~}
もし同じデザインを適用させたいタグやclass、idがいくつかあるときは、複数指定をしましょう。複数の要素のデザインをまとめて変更することができます。複数選択したいときは、タグやclass名、id名を半角コンマ,で区切って並べていきます。並べる数がはいくつでもOKです。また、並び順は関係ありません。試しにh2タグとid=”headline”を指定して、文字色をオレンジにしてみましょう。
↓実際にHTMLとCSSを書いて、ブラウザでの表示を見てみます。
<div id="headline"> <h1>CSS入門</h1> <p>これは段落です。</p> </div> <div class="main"> <h2>これは見出しです。</h2> <p>これは<span class="light">例</span>です。</p> <p> <a href="https://saruwakakun.com/">ホームへ</a> 戻ります。</p> </div>CSS
#headline, h2 {
color: orange;
}
↑h2タグ内の文字とid=”headline”内の文字の色がオレンジになりました。
4-5.子孫セレクタ（絞り込み指定）
◯◯ ◯◯ ◯◯ {〜}
子孫セレクタと呼ばれる便利な適用先指定の方法もあります。これは「◯◯タグ内にある◯◯タグにだけデザインを適用させたい」ときに使うものです。タグ名やid名、class名を半角スペースで区切って並べると、どんどん適用先が絞り込まれていきます。div p a{~}と書けば、divタグの中のpタグの中のaタグの中にだけデザイン指定が適用されます。たとえば、class=”main”タグの中のpタグの中のspanタグ内にのみデザインを適用させてみましょう。
↓実際のコードとブラウザでの表示を見てみます。
<div id="headline"> <h1>CSS入門</h1> <p>これは段落です。</p> </div> <div class="main"> <h2>これは見出しです。</h2> <p>これは<span class="light">例</span>です。</p> <p> <a href="https://saruwakakun.com/">ホームへ</a> 戻ります。</p> </div>CSS
.main p span {
color:orange;
}
↑spanタグにだけデザインが適用されます。
ここまで5つのセレクタの書き方を指定してきました。この5つの書き方をおさえれば、自分の好きな場所のデザインを自在に変えられるようになるはずです。 その他のセレクタ種類については、今後別の記事で紹介していきます。
5.プロパティと値の基本
次はプロパティと値の書き方を見ていきましょう。プロパティと値は常にセットで書かれます。プロパティがcolorなのであれば、値にはblueやgreenなどの色しか書くことはできません。といってもなかなか分かりづらいと思うので、実際に例を見ながら書き方を理解していきましょう。
5-1.文字の大きさを変えてみよう
セレクタ {font-size: ◯◯px or ◯◯em}
文字の大きさ（フォントサイズ）を変えるときはfont-sizeプロパティを使います。値には12pxというように数字+単位を書きます。単位は以下の2つを覚えておけば良いでしょう。
font-sizeに対する値の単位
- px：縦のピクセルの大きさで指定ウェブページのメインの文章は15px〜18pxくらいにするのがおすすめです。
- em：現在のフォントサイズに対する倍率たとえば、現在の設定が10pxのときに「2.0em」とするとフォントサイズは20pxになります。
フォントサイズの変更例
それでは実際にpタグ内の文字のフォントサイズを変えてみましょう。pxで指定する場合と、emで指定する場合の両方を試してみます。
<p>初期設定のフォントサイズ</p> <p class="px">20pxにした場合</p> <p class="em">1.2emにした場合</p>CSSコード
.px {
font-size: 20px;
}
.em {
font-size: 1.2em;
}
初期設定のフォントサイズ
20pxにした場合
1.2emにした場合
5-2.文字の色を変えてみよう
セレクタ {color: 色名orカラーコード}
次に文字を自分の好きな色に変えてみましょう。さきほども何回か触れましたが、文字色を変えるときにはcolorプロパティを使います。値には色名もしくはカラーコードを書きます。
colorに対する値の書き方
- 色名：英語の色名を書く赤ならred、青ならblue、緑ならgreen、黒ならblackという感じです。
- カラーコード：#+6ケタの英数字で書く色ごとにコードが決まっているのでそれを使います。例えば白なら#FFFFFFになります。
膨大な数の色名やカラーコードを覚えるのは常人には不可能なので、カラーコード表を見て使いたい色のコードをコピペしましょう。
文字色の変更例
<p>通常の文字</p> <p id="example1">greenの文字</p> <p id="example2">#FFC778の文字</p> <p id="example3">#f89174の文字</p>CSSコード
#example1 {
color: green;
}
#example2 {
color: #FFC778;
}
#example3 {
color: #f89174;
}
greenの文字
#FFC778の文字
#f89174の文字
5-3.文字を中央/右に寄せてみよう
セレクタ {text-align: center or right}
はじめの設定では文字は左寄せで表示されますが、中央寄せや右寄せにすることもできます。「文字をどちらに寄せるか」はtext-alignプロパティで指定します。値は以下の3つをよく使います。
text-alignに対する値
- left：左寄せ ←最初はこれ
- center：中央寄せ
- right：右寄せ
文字寄せの変更例
実際にCSSを書いてみましょう。
<body> <p>CSS指定なしの文</p> <p class="center">中央寄せの文</p> <p class="right">右寄せの文</p> </body>CSSコード
.center {
text-align: center;
}
.right {
text-align: right;
}
CSS指定なし
中央寄せ
右寄せ
画面内の文字を全て中央揃えにしたいときは、body{text-align:center}というようにbodyタグに対してtext-alignを指定しましょう。
5-4.背景色を変えてみよう
セレクタ { background-color: 色名orカラーコード }
背景色はbackground-colorプロパティにより変えることができます。値は文字色と同様に色名もしくはカラーコードを書きます。
背景色の変更例
ページ全体の背景色を変えたい場合は、bodyをセレクタに指定します。
<body> <div class="main"> <p>これは例1です。</p> <p>これは例2です。</p> </div> <p>これは例3です。</p> </body>CSSコード
body {
background-color: #FFC778;
}
↑ページ全体の背景色が変わりました。
一部の背景を変えたいときは、その部分をセレクタで指定します。以下の例では<div class="main">〜</div>の背景色のみを変えてみることにします。
<body> <div class="main"> <p>これは例1です。</p> <p>これは例2です。</p> </div> <p>これは例3です。</p> </body>CSSコード
.main {
background-color: #FFC778;
}
↑一部の背景色のみが変わりました。ちなみにbackground: #FFC778;と-colorを省略して書いても、表示は同じになります。
5-5.線で囲う・線を引く
セレクタ {border: 線の太さ 色 種類} 3つの値を指定していきます。それぞれの値の間には半角スペースを空けます。
線をひくときはborderプロパティを使います。
border:の後には、3つの値を同時に指定します。
- 線の種類
- 線の太さ
- 線の色
上図の例だと、実線（solid）で太さは1px、色は黒（black）という指定になります。
線の種類
線の種類は、実線（solid）以外にもたくさんの中から選ぶことができます。
よく使うのはこの4つです。点線や破線をうまく使えば、オシャレなウェブデザインにすることができます。
↑ちなみに線なしはborder: noneで、初期値はこれになっています。
線の太さと色
線の太さは1px〜3pxを指定する場合がほとんどです。ただし、線の種類がdouble（二重線）の場合、2本の線合わせての太さなので、少し線の太めにする必要があります。線の色は、色名かカラーコードで指定します。
borderの作成例
<body> <p class="solid">solid 2px grayの場合</p> <p class="dotted">dotted 2px grayの場合</p> <p class="dashed">dashed 2px grayの場合</p> <p class="double">double 2px grayの場合</p> <p class="px1">solid 1px orangeの場合</p> </body>CSSコード
.solid {
border: solid 2px gray;
}
.dotted {
border: dotted 2px gray;
}
.dashed {
border: dashed 2px gray;
}
.double {
border: double 5px gray;
}
.px1 {
border: solid 1px orange;
}
上下左右のどこかだけに線を引きたいときは？
ウェブサイトを作っていく中で「上にだけ線を引きたい」というようなことも出てくると思います。そんなときはプロパティ名を変えましょう。
上下左右 個別に線をひく
- 上にだけ線を引く：border-top:〜
- 下にだけ線を引く：border-bottom:〜
- 左にだけ線を引く：border-left:〜
- 右にだけ線を引く：border-right:〜
↑値（〜の部分）の書き方はさきほどのborder:線の種類 太さ 色と同じです。
<p class="rei1">上と左にだけ線</p> <p class="rei2">下と右にだけ線</p>CSSコード
.rei1 {
border-top :solid 2px #FFA07A;
border-left: solid 2px #FFA07A;
}
.rei2 {
border-bottom: solid 2px #FFA07A;
border-right: solid 2px #FFA07A;
}
↑CSSで複数プロパティを同時に指定するときは;でつなぐんでしたね。このように上下左右の好きな部分にだけ線を書くことができます。
5-6.コメントアウトを書いてみよう
/* この中の文章はCSSに反映されません */
コメントアウトとは、CSSの中に自分用のメモ書きをする方法です。コメントアウトの部分はウェブページの内容や見た目に一切反映されません。つまり自分の好きなように書いてしまってOKです。コメントアウトは/* コメントアウトする内容 */というように書きます。「*」はshift+:で入力できるかと思います。HTMLのコメントアウトとは書き方が異なるので、注意しましょう（HTMLは<!-- 〜 -->でしたね）。
コメントアウトの書き方例
<body> <p>これは例文です。</p> </body>CSSコード
p {
/*このようにメモ書き*/
color: orange;
}
これは例文です。
このようにコメントアウトの内容は一切ウェブページに反映されません。
6.ここまでの復習
CSSには他にもたくさんの書き方がありますが、ここまで紹介してきた内容だけでもウェブページをずいぶんと華やかにすることができます。最後にここまでの内容を組み合わせて、少しオシャレなデザインのページを作ってみましょう。内容を覚えるためにも、ぜひ一緒に書いてみてください。
<body> <div id="headline"> <h1>CSS入門</h1> <p>これは段落です。</p> </div> <div class="main"> <h2>これは見出しです。</h2> <p>これは<span class="light">例</span>です。</p> <p> <a href="https://saruwakakun.com/">ホームへ</a> 戻ります。</p> </div> </body>CSSコード
body {
/*ページ全体の背景色をベージュに*/
background: #fffbf4;
/*全文字を中央揃えに*/
text-align: center;
}
h1 {
/*h1タグ内の文字色を変える*/
color: #f89174;
}
#headline {
/*id="headline"の下に点線を引く*/
border-bottom: dotted 2px #f89174;
}
#headline p {
/*id="headline"の中のフォントサイズを1.2倍に*/
font-size: 1.2em;
}
h2 {
/*h2タグの文字色をオレンジに*/
color:orange;
}
a {
/*リンクの文字色をグレイに*/
color:gray;
}
このように少し見栄えがよくなりましたね。次の講座では「幅と高さの指定」について学びましょう。
- HTMLで作られた土台のデザインやレイアウトを決めるのがCSS
- CSSを書く方法は3パターンある（参考：CSSはどこに書く？）
- CSSの基本文法はセレクタ{プロパティ:値}
- タグで適用先を指定⇒タグ名{~}
- id名で適用先を指定⇒#id名{~}
- class名で適用先を指定⇒.class名{~}
- 複数の適用先を指定⇒◯◯,◯◯{~}というようにカンマ区切り
- 適用先を絞り込んで指定(子孫セレクタ)⇒◯◯ ◯◯{~}というように半角スペースで区切る
- 文字サイズはfont-size: ◯◯pxや◯◯emで指定
- 文字色はcolor: カラーコードや色名で指定
- 文字寄せはtext-align: centerやrightで指定
- 背景色はbackground: カラーコードや色名で指定
- 線はborder: 線の種類 太さ 色で指定 線の種類は点線（dotted）や破線（dashed）などがある
- コメントアウトは/*〜*/で書く
