初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！

記事内に商品プロモーションが含まれる場合があります

前回の講座

初心者向けHTML入門：書き方の基本とタグの使い方

今回は「CSS（スタイルシート）がどのようなものか」を理解するとともに、基本的な書き方を学んでいきましょう。CSSを理解するには、ある程度のHTMLの知識が必要になります。さきほどリンクをのせた「0からのHTML入門」を読んでからこの記事を読むと、理解しやすくなると思います。

CSSとは、ウェブページのデザインやレイアウトなどの見栄えを変えていくためのコンピュータ言語です。CSSは「スタイルシート」とも呼ばれます。

CSSを使わずにHTMLだけでウェブページをつくると文字と画像だけが上から下に並んだ単調なページになってしまいます。HTMLはあくまでも土台を作るものなのです。

HTMLで作られたウェブページの土台に対して、「デザイン」や「レイアウト」を決めるのがCSSです。CSSにより文字や背景の色を変えたり、カラフルな線を引いたり、余白を調整したりと見栄えをきれいにすることができます。

HTMLだけだと…こちらはHTMLだけで作られたサルワカのトップページです。なんとも単調でバランスの悪いデザインのサイトになってしまいました。

HTML+CSSなら…こちらはCSSでデザインを整えたサルワカのトップページです。CSSを使えば、ウェブページの見栄えを自分の好きなようにカスタマイズできるのです。

詳しい説明は後でしますが、CSSでできることを少しだけ紹介します。

たとえば文字を自分の好きな色に変えることができます。次のようなHTMLコードがあるとします。

~

これは例文です。

これは例文です。

CSSにより文字の色をオレンジに変えてみましょう。

これは例文です。

これは例文です。

CSSコードの書き方は後でくわしく説明するので、現時点で理解する必要はありません。 さらに文字を大きくしてみましょう。↓

これは例文です。

これは例文です。

このようにCSSでは色や大きさを変えるなど様々なデザイン設定をすることができます。

では、CSSはどこに書くのでしょうか。どのようにHTMLとCSSを結びつけるのでしょうか。

CSSの書く場所は3パターンに分けることができます。それぞれメリット・デメリットがあり、うまく使い分けていく必要があります。

今回は最も分かりやすい『HTMLファイルにstyleタグを追加してその中にCSSを書く方法』を紹介します。

簡単なので一緒にやっていきましょう。

テキストエディターを開きます。Sublime Textの場合、開くとすぐにコードが書ける状態になります。

まずは土台となるHTMLファイルを作りましょう。

これは段落です。

これは例です。

ホームへ 戻ります。

こちらのコードをコピーして、テキストエディターに貼りましょう。

このような感じになりますね。 tabや半角スペースによりコードの左側にスペースを空けて整理しておくと見やすくなります。 HTMLのタグどうしの間にスペースを空けても、ブラウザ表示ではスペースは入りません。

このHTMLファイルを保存してブラウザで表示しましょう。手順はHTML入門で行ったものと同じですが、もう一度説明しておきます。

でファイルを保存します。ファイル名は何でも良いですが、末尾は.htmlにしましょう。保存先を選び[Save]をクリックします。

保存したHTMLファイルは引き続き使うので、開いたままにしておいてください。

ブラウザウィンドウとフォルダウィンドウをそれぞれ縮小して横に並べます。そして、保存したHTMLファイルをブラウザの上にドラッグします。

ブラウザでHTMLファイルが開きました。現段階ではHTMLだけなので、質素な見た目ですね。この質素な見た目をCSSで変えていきましょう。

テキストエディターに戻ります。HTMLのheadタグの中は「ウェブページの様々な情報や設定を書く」部分でしたね。ここにstyleタグを作れば、その中にCSSを書いていくことができます。

CSSを書くためにheadタグの中にstyleタグを書きます。の直前に と書きましょう。

あとはstyleタグ内にCSSを書いていくことで、ページの見た目を変えることができます。

サンプルのCSSを1つだけstyleタグ内に書いてみましょう（CSSの書き方は後ほど0から解説します）。

styleタグ内にこのようなコードを書きます。書き方は後で説明するので、そのまま書き写せばOKですが、ざっくりと「bodyタグ内の文字色(color)をグレイ(gray)に」という意味になります。

ここでbodyタグを見てみましょう。body {~}という指定は「bodyタグ内にある全タグのデザインを変えるよ」という意味になります。 「bodyタグ内＝ブラウザに表示されるもの」でしたね。つまり、このCSSコードは「ブラウザに表示されている文字の色を全部変えるよ」という意味になります。

よく分からなくてもOKです。

テキストエディターでctrl+Sでファイルを上書き保存します。Macならctrlのかわりに⌘

ブラウザで再読み込みすると、テキストエディターに書いたCSSが反映されます。

このようにHTMLファイルのheadタグ内にstyleタグを作り、その中にCSSを書くことができます。ちなみにCSSを書く方法は他にもう２種類あります。こちらの記事にまとめたので、この記事を読み終わった後にでも目を通してみると良いでしょう。

CSSはどこに書くのかをまとめました。

CSSはどこに書く？外部CSSファイルの読み込み方＆インラインでの書き方

ここからはCSSの書き方を学んでいきましょう。

CSSの書き方は以下のように決まっています。 セレクタ { プロパティ：値 }セレクタ・プロパティ・値と呼ばれる部分を埋めることにより「どこの・何を・どのような見た目に変えるのか」を指定することができます。

セレクタにはデザイン変更の適用先を書きます。つまり「どの部分のデザインを変えるのか」を指定します。ここにはタグ名やclass名、id名を書きます。

たとえば、p{〜}と書けば「pタグ内のデザインを変える」という指定に、h1{〜}と書けば「h1タグ内のデザインを変える」という指定になります。※ 詳しいセレクタの書き方はのちほど。

プロパティでは「セレクタで指定された部分の何を変えるのか」を決めます。色を変えるのか、それとも線をひくのか、あるいは余白を調整するのか、ということを指定するわけですね。

たとえばプロパティにcolorと書けば文字色を変える指定に、backgroundと書けば背景色を変える指定になります。

値では「どのように見た目を変えるのか」を決めます。たとえばセレクタとプロパティで「pタグの文字色を変える」ということが指定されているなら、値では「何色に変えるのか」を決めるわけですね。

たとえばプロパティで「color」が指定されているなら、値ではblueやredというように「適用する色」を指定します。

セレクタは何にも囲まず先頭に書きます。プロパティと値は波括弧{}で囲います。

プロパティと値は常にセットで、単独で使われることはありません。プロパティと値の間にはコロン:を書きます。

複数のプロパティをまとめて指定したいときはセミコロン;で区切り、そのあとに別の「プロパティ:値」を書きます。これで同時にいくつでもプロパティを指定することができます。

例えばこのCSSコードは「bodyタグ内の文字色(color)をグレー(gray)にする」というデザイン指定になるわけですね。

ちなみにCSSではコードの間に半角スペースやTab、改行を入れても、スタイルの指定内容が変わることはありません。自分が見やすいようにコードをきれいに並べながら作業をしましょう。後から見返したり、変更を加えたりしやすくなります。ただし、全角スペースは絶対に使わないようにしましょう。

セレクタでは「どの部分のデザインを変えるのか」という適用先を指定するのでしたね。セレクタの書き方には色々なパターンがあります。全て紹介しようとするとものすごーく長くなってしまうので、今回は「これだけ知っておけばだいたい対応できる」というセレクタに絞って紹介します。

タグ名 {〜}

ひとつめはタグで指定する方法です。タグで指定する場合は、タグ名をそのまま書けばOKです。a{〜}やdiv{〜}、img{〜}といった具合ですね。例えば、pタグの文字色をオレンジ色にしてみましょう。

↓実際のコードとブラウザでの表示を見てみます。

これは段落です。

これは例です。

ホームへ 戻ります。

↑pタグ内の文字がオレンジ色になりました。

CSSはstyleタグ内に書きましょう。

aタグ内の文字（リンクテキスト）が青のままですね。リンクテキストは少し特別で色を変えるためには、a {color: orange}というようにaタグを指定する必要があります。

#id名{〜}

HTMLではのようにidが指定されるんでしたね（そして同じid名はページ内に1回しか使えないんでしたね）。このid名をデザインの適用先に指定する場合は#id名{}というようにid名の前に#をつけましょう。

試しにid=”headline”の部分の文字色をオレンジにしてみましょう。

タグに自分の好きなid名を書いておき、CSSでそのid名に対してデザインを指定すれば良いわけですね。

↓実際にコードを書いて、ブラウザでの表示を見てみましょう。

これは段落です。

これは例です。

ホームへ 戻ります。

↑id="headline"のタグ内の文字色がオレンジになりました。

.class名{〜}

HTMLではというように指定をするんでしたね。class名でセレクタを指定する場合は.class名{〜}のように.ドット(ピリオド)を前につけます。試しにclass=”main”の文字色をオレンジにしてみましょう。

↓実際のコードとブラウザでの表示を見てみます。

これは段落です。

これは例です。

ホームへ 戻ります。

class="main"のタグ内の文字がオレンジになりました。

◯◯,◯◯,◯◯ {~}

もし同じデザインを適用させたいタグやclass、idがいくつかあるときは、複数指定をしましょう。複数の要素のデザインをまとめて変更することができます。複数選択したいときは、タグやclass名、id名を半角コンマ,で区切って並べていきます。並べる数がはいくつでもOKです。また、並び順は関係ありません。試しにh2タグとid=”headline”を指定して、文字色をオレンジにしてみましょう。

↓実際にHTMLとCSSを書いて、ブラウザでの表示を見てみます。

これは段落です。

これは例です。

ホームへ 戻ります。

↑h2タグ内の文字とid=”headline”内の文字の色がオレンジになりました。

◯◯ ◯◯ ◯◯ {〜}

子孫セレクタと呼ばれる便利な適用先指定の方法もあります。これは「◯◯タグ内にある◯◯タグにだけデザインを適用させたい」ときに使うものです。タグ名やid名、class名を半角スペースで区切って並べると、どんどん適用先が絞り込まれていきます。div p a{~}と書けば、divタグの中のpタグの中のaタグの中にだけデザイン指定が適用されます。たとえば、class=”main”タグの中のpタグの中のspanタグ内にのみデザインを適用させてみましょう。

↓実際のコードとブラウザでの表示を見てみます。

これは段落です。

これは例です。

ホームへ 戻ります。

↑spanタグにだけデザインが適用されます。

ここまで5つのセレクタの書き方を指定してきました。この5つの書き方をおさえれば、自分の好きな場所のデザインを自在に変えられるようになるはずです。 その他のセレクタ種類については、今後別の記事で紹介していきます。

次はプロパティと値の書き方を見ていきましょう。プロパティと値は常にセットで書かれます。プロパティがcolorなのであれば、値にはblueやgreenなどの色しか書くことはできません。といってもなかなか分かりづらいと思うので、実際に例を見ながら書き方を理解していきましょう。

セレクタ {font-size: ◯◯px or ◯◯em}

文字の大きさ（フォントサイズ）を変えるときはfont-sizeプロパティを使います。値には12pxというように数字+単位を書きます。単位は以下の2つを覚えておけば良いでしょう。

それでは実際にpタグ内の文字のフォントサイズを変えてみましょう。pxで指定する場合と、emで指定する場合の両方を試してみます。

初期設定のフォントサイズ

20pxにした場合

1.2emにした場合

初期設定のフォントサイズ

20pxにした場合

1.2emにした場合

セレクタ {color: 色名orカラーコード}

次に文字を自分の好きな色に変えてみましょう。さきほども何回か触れましたが、文字色を変えるときにはcolorプロパティを使います。値には色名もしくはカラーコードを書きます。

膨大な数の色名やカラーコードを覚えるのは常人には不可能なので、カラーコード表を見て使いたい色のコードをコピペしましょう。

通常の文字

greenの文字

#FFC778の文字

#f89174の文字

greenの文字

#FFC778の文字

#f89174の文字

セレクタ {text-align: center or right}

はじめの設定では文字は左寄せで表示されますが、中央寄せや右寄せにすることもできます。「文字をどちらに寄せるか」はtext-alignプロパティで指定します。値は以下の3つをよく使います。

実際にCSSを書いてみましょう。

CSS指定なしの文

中央寄せの文

右寄せの文

CSS指定なし

中央寄せ

右寄せ

画面内の文字を全て中央揃えにしたいときは、body{text-align:center}というようにbodyタグに対してtext-alignを指定しましょう。

セレクタ { background-color: 色名orカラーコード }

背景色はbackground-colorプロパティにより変えることができます。値は文字色と同様に色名もしくはカラーコードを書きます。

ページ全体の背景色を変えたい場合は、bodyをセレクタに指定します。

これは例1です。

これは例2です。

これは例3です。

↑ページ全体の背景色が変わりました。

一部の背景を変えたいときは、その部分をセレクタで指定します。以下の例では〜の背景色のみを変えてみることにします。

これは例1です。

これは例2です。

これは例3です。

↑一部の背景色のみが変わりました。ちなみにbackground: #FFC778;と-colorを省略して書いても、表示は同じになります。

セレクタ {border: 線の太さ 色 種類} 3つの値を指定していきます。それぞれの値の間には半角スペースを空けます。

線をひくときはborderプロパティを使います。

border:の後には、3つの値を同時に指定します。

上図の例だと、実線（solid）で太さは1px、色は黒（black）という指定になります。

線の種類は、実線（solid）以外にもたくさんの中から選ぶことができます。

よく使うのはこの4つです。点線や破線をうまく使えば、オシャレなウェブデザインにすることができます。

↑ちなみに線なしはborder: noneで、初期値はこれになっています。

線の太さは1px〜3pxを指定する場合がほとんどです。ただし、線の種類がdouble（二重線）の場合、2本の線合わせての太さなので、少し線の太めにする必要があります。線の色は、色名かカラーコードで指定します。

solid 2px grayの場合

dotted 2px grayの場合

dashed 2px grayの場合

double 2px grayの場合

solid 1px orangeの場合

ウェブサイトを作っていく中で「上にだけ線を引きたい」というようなことも出てくると思います。そんなときはプロパティ名を変えましょう。

↑値（〜の部分）の書き方はさきほどのborder:線の種類 太さ 色と同じです。

上と左にだけ線

下と右にだけ線

↑CSSで複数プロパティを同時に指定するときは;でつなぐんでしたね。このように上下左右の好きな部分にだけ線を書くことができます。

/* この中の文章はCSSに反映されません */

コメントアウトとは、CSSの中に自分用のメモ書きをする方法です。コメントアウトの部分はウェブページの内容や見た目に一切反映されません。つまり自分の好きなように書いてしまってOKです。コメントアウトは/* コメントアウトする内容 */というように書きます。「*」はshift+:で入力できるかと思います。HTMLのコメントアウトとは書き方が異なるので、注意しましょう（HTMLはでしたね）。

これは例文です。

これは例文です。

このようにコメントアウトの内容は一切ウェブページに反映されません。

CSSには他にもたくさんの書き方がありますが、ここまで紹介してきた内容だけでもウェブページをずいぶんと華やかにすることができます。最後にここまでの内容を組み合わせて、少しオシャレなデザインのページを作ってみましょう。内容を覚えるためにも、ぜひ一緒に書いてみてください。

これは段落です。

これは例です。

ホームへ 戻ります。

このように少し見栄えがよくなりましたね。次の講座では「幅と高さの指定」について学びましょう。

次の講座

CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう

本で勉強したいという方はこちらが参考になるかも

HTMLとCSSの勉強におすすめの本8冊（初心者〜中級者向け）