独学の初心者だけどHTMLは少しずつわかるようになってきた。HTMLの勉強をしていると、ときどきCSSという言葉が出てくる。CSSって何だろう？
CSSで何ができるんだろう？でもよくわからない、と考えていませんか？
CSSがわかるようになると、できることが増えてホームページづくりがもっと楽しくなります。
まず今回は、CSSとは？初心者が最初に覚えたいCSSの書き方の基本についてわかりやすく解説します。同じ初心者の私と一緒に少しずつ覚えていきましょう。
CSSって何ですか？
CSS（シーエスエス）とは、「Cascading Style Sheets」の略で、簡単に言うとWEBサイトの見た目を装飾するために使う言語です。CSSを保存するときのファイルの拡張子は「.css」です。
HTMLだけではデザインの機能がないので、文字や背景の色を変えることができません。CSSを使うことで、WEBサイトの見た目が大きく変化します。
※以前のHTMLには色を変更するなどの属性が存在していましたが、現在は非推奨のタグになっています。
CSSの書き方の基本
HTMLの書き方と同じように、CSSにも書き方のルールがあります。HTMLの書き方と混同しないように覚えていきましょう。
初心者が最初に覚えたいHTMLの書き方の基本とタグについて、ゆっくり解説した記事がありますので、復習や参考にぜひ役立ててください。
CSSは、セレクター、プロパティ、値と呼ばれる3つを記述していく必要があります。
この3つの組み合わせで、「どの部分の、何を、どのように変えるか」を指定します。ちなみに上記のCSSは「h1の部分の文字の色を水色に変える」という意味があります。
セレクターのあと、開始に半角で波カッコ「{」、最後に閉じる波カッコ「}」を書きます。また、プロパティのあとには半角でコロン「:」、値の後ろに半角でセミコロン「;」、すべての記述を半角英数字で書きます。
では、ひとつひとつ、どのような役割があるのかを見ていきましょう。
セレクターについて
セレクターとは、どの部分を装飾するかを指定する場所です。HTMLのタグや、クラス（class）、IDと呼ばれる特定の場所を書きます。
上記の例のように、セレクターに「h1」と書くと、WEBページ内の<h1>タグにCSSの装飾が適用されます。
プロパティについて
プロパティとは、セレクターで指定した部分の何を変更するのかを指定する場所です。文字の色を変える、文字のサイズを変えるなど、さまざまな指定ができます。
上記の例のように、プロパティに「color」と書くと、セレクターて指定した<h1>タグの文字の色にCSSの装飾が適用されます。
プロパティにはたくさんの種類があるので、全部を一気に覚えるのは難しいです。自分が使うものから少しずつ、実際に使いながら覚えていくのがいいでしょう。
値について
値とは、見た目をどのように変えるのかを指定する場所です。文字の色を変えるなら「何色にするのか」を具体的に指定します。
上記の例のように、値に「#00ffff」と書くと、セレクターて指定した<h1>タグの、プロパティで指定した「color（文字の色）」を「#00ffff（水色）」にするというCSSの装飾が適用されます。
CSSを書くときのルール
CSSの基本的な書き方のルールで大切なことが2つあります。
- 半角英数字で書く
- 小文字で書く
CSSはHTMLと同じく、全角文字や日本語を使うことができません。必ず半角英数字で書きましょう。記号も半角です。
CSS自体は本来、大文字と小文字の区別はありません。しかしHTMLのバージョンによって小文字で記述する必要があるので、CSSを初めて覚える時点で小文字で統一しておくといいでしょう。
応用として、一度に複数のセレクターに指定することもできます。複数のセレクターに一度に同じ指定をするときは、セレクターをカンマ「,」で区切ります。指定するセレクターの順番はどれが先でも問題ありません。
例→h1, p { color: #00ffff; }
1つのセレクターに一度に複数の装飾を値に指定することもできます。値にセミコロン「;」を加えてセレクターを区切ります。
例→h1, {color:#00ffff; font-size:30px; }
CSSのコメントについて
HTMLやCSSを書いていると、何をどこまで書いているのかがわかりづらくなってきがちです。そういうときはコメントを使います。
CSSでコメントを書くには、半角記号でスラッシュとアスタリスク「/*」を書きます。コメントの終わりには「*/」と書きます。
例→/*基本のCSS*/
CSSのコードで制作時のメモ書きや注意書きに使ったり、コメントの記述方法を利用して一時的にCSSを反映させないように使ったりというときに活用します。
コメントはブラウザの表示部分には反映されません。ただし記述を間違うとブラウザに表示されてしまうので、記述方法に間違いがないように注意しましょう。
CSSを書く場所はどこ？
HTMLで作成したWEBサイトにCSSを適用するにはどうしたらいいのでしょうか？CSSを適用する方法には3つの記述方法があります。
それではひとつずつ見ていきましょう。
CSSを書く場所1：HTMLの<head>タグの中などに<stlye>タグでCSSを記述する
1つめは、HTMLファイルの<head>タグの中などにCSSを書き込む方法です。HTMLファイル内の場所は<head>タグだけでなく、本文の<body>タグの中にも書くことができますが、<head>タグに書くことが多いようです。
CSSを記述したHTMLファイルにのみ適用されます。ほかのHTMLファイルには反映されません。特定のページでだけデザインを変えたいときに使います。
記述例（青い文字部分がCSSを記述した場所）
<!DOCTYPE html>
<html lang="ja">
<head>
<title>はじめてのCSS</title>
<meta charset="UTF-8">
<style>
h1{color:#00ffff;}
</style>
</head>
<body>
<h1>はじめてCSSを使ったホームページ</h1>
</body>
</html>
Visual Studio Codeなどのテキストエディタで実際に書いてみてください。うまくいくとブラウザではこのように表示されます。
CSSを書く場所2：HTMLタグに直接style属性CSSを書き込む
2つめは、HTMLタグに直接CSSを書き込む方法です。CSSが直接書かれたタグにのみ適用されます。
ひとつひとつのタグに直接CSSを書き込むので、手間がかかって管理が難しくメンテナンスも難しいという難点があります。
ただし、デメリットだけでなくメリットもあります。ほかの方法で指定するよりもCSSを適用させる優先順位が高くなる方法なので、一部のデザインだけ変更したいときなどに使われます。
記述例（青い文字部分がCSSを記述した場所）
<!DOCTYPE html>
<html lang="ja">
<head>
<title>はじめてのCSS</title>
<meta charset="UTF-8">
</head>
<body>
<h1 style="color: #00ffff;">はじめてCSSを使ったホームページ</h1>
</body>
</html>
実際にテキストエディタで書いてみて、うまくいくとブラウザではこのように表示されます。
ブラウザでの見た目は1つめの方法のときと同じです。
CSSを書く場所3：外部CSSファイルで適用する
3つめは、拡張子「.css」のCSSファイルを作成し、そのCSSファイルをHTMLファイルに読み込ませて適用する方法です。WEBサイトをつくるときはこの方法が最も一般的に使われています。
1つのCSSファイルを複数のHTMLファイルで読み込めるので管理がしやすいです。1つのCSSファイルを修正するだけですむので、メンテナンスもしやすい利点があります。
CSSを書いてみよう
では、さきほど解説した外部CSSファイルを作ってHTMLファイルに読み込ませて適用する方法を実際に書いて試してみましょう。
まず、HTMLを書きます。ファイルの保存はデスクトップにします。今回はCSSを適用するための例なので簡単なもので大丈夫です。
HTML記述例（青い文字部分がCSSファイルを読み込むための記述）
<!DOCTYPE html>
<html lang="ja">
<head>
<title>はじめてのCSS</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>はじめてCSSを使ったホームページ</h1>
</body>
</html>
HTMLを書いただけの状態だとブラウザではこのように表示されます。
上記のHTMLで記載したCSSに関する部分で重要な場所について説明します。
link rel="stylesheet"
この「""」で囲まれている部分「stylesheet」はCSSを意味します。
href="style.css"
この「"style.css"」は、外部CSSのファイル名です。名前を書き間違えないようにしましょう。
では、CSSを別のファイルで書きましょう。CSSのファイル名は「style.css」にして、HTMLと同じデスクトップに保存してください。
CSS記述例
/*h1の文字の色を変える*/
h1{
color:#00ffff;
}
では、さきほど書いたHTMLファイルをブラウザで開いてみましょう。
この画像のようにCSSファイルが読み込まれて適用された状態、h1に記載した文章の文字の色が元の色の黒から水色に変わっていたら大成功です！
まとめ
今回は、CSSとは何か？初心者が最初に覚えたいCSSの書き方の基本についてじっくり解説しました。はじめてCSSを書いてみた印象はどうでしたか？
意外と簡単だなという印象でしょうか？もっといろいろ知りたいと思った方もいると思います。
CSSでできることはたくさんあります。おしゃれなデザイン、かっこいいホームページを実現するために欠かせないものです。
一度に全部を覚えようとすると難しく感じてしまうので、一緒に少しずつやりたいことができるようになっていきましょう。
