こんにちは！侍ブログ編集部です！
と考えているのではないでしょうか。
せっかくならオシャレなホームページを作りたいですよね。
ページのレイアウトを整える上でCSSという言語を理解していなければ思い通りのレイアウトにできません。しかし何から学べば良いか分からないという方も多いかと思います。
この記事ではCSSの基本的な書き方を解説しているので、ぜひ参考にしてみてください。
CSSとは
CSSはCascading Style Sheets（カスケーディングスタイルシート）の略称です。
HTMLで作った文字や背景に、色を付けたり線を引いたりとページの装飾を行うためのものです。ページの装飾をすることを「スタイルを当てる」と言うこともあります。
今回は実際にCSSの書き方やさまざまなスタイルの当て方を学びましょう。
HTMLを用意しよう
まずはCSSを適用するためのHTMLファイルを用意します。
<!DOCTYPE html>
<html>
<head>
<title>CSS入門</title>
</head>
<body>
<h1>こんにちは</h1>
<p class="hello">HELLO</p>
<body>
</html>
ファイル名は任意ですが、ひとまずindex.htmlとしましょう。
次にこのHTMLを装飾するためのCSSファイルを作成します。
CSSを作成しよう
まずは空のCSSファイルを作成します。
ファイル名はstyle.cssとして、index.htmlと同じ場所に保存しましょう。基本的にCSSは今作成したファイルに記述していきます。
しかしCSSファイル単体ではいくらCSSを記述してもHTML側に反映されることはありません。そのために次はHTMLファイルにCSSファイルを読み込ませてみましょう。
h2 HTMLにCSSを読み込んでみよう
CSSを読み込むためにはHTMLのheadタグ内に下記の一文を追加する必要があります。
<link rel="stylesheet" type="text/css" href="./style.css">
このhrefがCSSファイルの置き場所を表しています。
今回はHTMLファイルとCSSファイルを同じ場所に配置したので上記の記述になっていますが、CSSファイルのみがcssフォルダーの中にある状況であれば下記のような記述になります。
<link rel="stylesheet" type="text/css" href="./css/style.css">
HTMLファイルから見てCSSファイルがどこに配置されているかを意識しましょう。
CSSの基本的な書き方を覚えよう
次にCSSの基本的な書き方を覚えましょう。
先ほどのHTMLの「こんにちは」を赤文字に変えたい場合には、CSSファイルに下記の分を追加する必要があります。
h1{color: RED;}
CSSを追記してページを更新すると、「こんにちは」の文字が赤文字になります。これはh1の要素を指定してスタイルを当てたためです。
次に「HELLO」の文字を青文字にしてみましょう。この場合はHTML側でclass=”hello”を指定している要素にスタイルを当てます。
.hello{color: BLUE;}
上記の文を追記して更新を掛けると「HELLO」が青文字に変わります。.○○と指定することで、特定のclassを与えた項目にスタイルを当てることができます。
classの他にもidを指定している要素にもスタイルを適用させることが可能なので、その場合には.○○ではなく、#○○のように指定しましょう。
プロパティーと値を指定しよう
次に先ほど説明したCSSを例にプロパティーと値について学びましょう。
h1{color: RED;}
上記の場合はcolorがプロパティー、REDが値です。つまりcolor: RED;の記述は、何を（プロパティー）どのように（値）変更するのかという意味になります。
また複数のスタイルを指定する場合には
h1{
color: RED;
font-size: 20px;
}
のように並べて記述できます。
文字の色以外にも大きさや場所、下線を引くか引かないかなど、プロパティーはさまざまな種類があるため、状況にあったものを使い分けることが大切です。
プロパティーの種類を知ることで、装飾の表現の幅を広げましょう。
CSSでさまざまなスタイルを当ててみよう
基本的な書き方を覚えたところで、CSSの書き方の例をいくつか見てみましょう。
文字の色を変える
文字の色の変え方は、
h1{color: RED;}
のように指定できます。さらに細かく指定したい場合にはカラーコードを活用して、
h1{color: #00ffff;}
のように16進数で表記することもでき、カラーコードで表記する方が一般的です。カラーコードを使用する場合はカラーピッカーを活用すると良いでしょう。
背景色を付ける
テキストや要素そのものに背景色を指定できます。
h1{background-color: GREEN;}
背景色を指定したい場合はbackground-colorプロパティーを使用します。「background-color」以外にも「background-image」で背景画像を指定することも可能です。
文字サイズを変更する
文字サイズを変更することも可能です。文字サイズを変更したい場合にはfont-sizeプロパティーを使用します。
h1{font-size: 20px;}
サイズの指定はpx・%・emなど様々な単位を用います。pxが一番理解しやすく使用する頻度も高いですが、デバイスによって画面のサイズが変わる場合（レスポンシブウェブデザイン）は%を使用することもあるので、それぞれの単位の特長を抑えておくと良いでしょう。
枠線を引く
テキストや要素に枠線を引くこともできます。枠線を引く場合にはborderプロパティーを使用します。
h1{border: solid 2px #777;}
上記のように指定すると、solid（直線）・線の太さが2px・色が#777（グレー）の枠線を引くことができます。
このように値をいくつも並べる必要があるプロパティーも存在します。またテキストの下部のみに線を引きたい場合には、
h1{border-bottom: solid 2px #777;}
のようにプロパティーをborder-bottomに変更することも可能です。同様にtop・right・leftも対応しているので、それぞれ変更しながら確かめてみてください。
CSS入門におすすめの教材
ここまでCSSの基礎に関して解説しましたが、今回の内容を理解したら少しステップアップして実践的な内容を学んでみましょう。
CSS初心者におすすめの書籍
CSSを書籍で学ぶことで、気になるページに付箋などを貼って後で見返すことができます。レイアウト例を見ながらデザイン力も同時に磨くことが出来る書籍もあります。
おすすめの書籍は以下の記事にまとめています。
CSS初心者におすすめの入門サイト
入門サイトを活用するのもおすすめです。
特にデザインよりもコーディングからかは学びたいというかたは、Progateなどの入門サイトで実際に手を動かしながら学んでみると良いでしょう。
おすすめの入門サイトは以下の記事にまとめています。
まとめ
CSSへの理解は深まりましたか？
ホームページ制作を行う上でCSSの知識は必須です。CSSについて良く知り、ホームページ作成に役立てましょう！
