HTML/CSSを学び始めたばかりで「CSSってどうやって書くの？」「どこに書けばいいの？」
そのように迷っている方はいませんか？
CSSは、HTMLで作った骨組みに色や形を付けてWebページを美しく見せるために必要不可欠な技術です。
この記事では、CSSの基本的な書き方を要素・クラス・id属性の3パターンに分けて具体的なコード例とともに解説します。
さらに、CSSを書く3つの場所（CSSファイル、styleタグ、HTMLタグ直接）とその使い分けも紹介。
現在エンジニアとして働く私が、CSSにおける基礎知識をお伝えします。
- CSSとは
- CSSの基本的な書き方【要素・クラス属性・id属性】
- CSSの書く場所3パターン
CSSとは
ReinaまずはCSSについておさらいしましょう！
CSS（Cascading Style Sheets）とは、Webページの見た目を整えるためのルールを指します。
例えばCSSを使わないでWebページを作成すると、文字や画像だけが並ぶだけになり、単調なページが出来上がってしまいます。
しかしCSSを使うことで文字のフォントを変えたり、背景に色をつけたりすることができます。
Reina要するにオシャレに画面を作るように設定することが、CSSの役目ですね！
今回はHTML上における、要素・クラス属性・id属性ごとにCSSの基本的な書き方を紹介します。
加えてCSSを書く場所を3つご紹介、最後にはCSSの使い分けについてもご説明します。
CSSの基本的な書き方【要素・クラス・ID】
Reinaでは早速CSSを書いていきましょう！ここでは要素・クラス・IDごとの書き方を紹介します。
まずは簡単なHTMLコードを用意しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSの設定</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
ここはヘッダーです
</header>
<main>
<div class="main01">
<div id="area01">こんにちは</div>
<div id="area02">私の名前はReinaです</div>
</div>
<div class="main02">
<div id="area03">私はエンジニアとして働いています</div>
<div id="area04">副業でブログもやっています</div>
</div>
</main>
<footer>
ここはフッターです
</footer>
</body>
</html>簡単に、ヘッダーエリアとメインエリアとフッターエリアで分けてみました。画像で見るとこちらです。
次で要素・クラス属性・ID属性ごとに、CSSの基本的な書き方を紹介します。
要素
まずは要素におけるCSSの設定を行いましょう。
ここで指す要素とは、「header」「main」「footer」を指します。
今回はmain部分におけるCSSを設定しましょう。分かりやすく、背景色を変更する「background-color」を指定していきます。
main { /*セレクタ*/
background-color: red; /*プロパティと値*/
}ここでセレクタは「main」を指します。セレクタではどの部分のCSSを変更したいか指定していきます。
プロパティは「background-color」を指します。セレクタで指定した部分の、何を変えたいのかをします。
そして値は「red」を指します。プロパティで指定した変更箇所について、実際にどう変えるかを指定します。
つまりこのCSSは、main部分のbackground-color(背景色)をred(赤色)に変えたいという意味です。
そしてCSSを書く時はセレクタは括弧{ }で囲むこと、プロパティの後はコロン：、値の後はセミコロン；を書くことを忘れないようにしましょう。
では指定したので、実際に画面を見ていきます。
無事、main部分のみ背景色を変えることができました。
クラス属性
では続いて、クラス属性のCSSを指定していきます。ここで指すクラスは「div class」の「class」を指します。
今回はクラス属性「main01」のCSSを設定していきましょう。
クラス属性でCSSを指定する場合は、このように書きます。
.main01 {
background-color:yellow
}クラス属性でCSSを設定するときは、前にドット「.」を付けることを忘れないようにしましょう。
Reina要素はいらないですが、クラス属性は忘れないようにしましょう！他は同じ書き方で大丈夫です！
では、画面で見ていきましょう。
無事、クラス属性の「main01」の部分だけ、背景色を変えることができました。
id属性
最後にid属性のCSS設定を紹介します。
id属性とは固有の名前を付けることです。簡単に言えばid属性はHTMLのタグに固有に付けることのできる、部品のようなものです。
ここで指すID属性は、「div id」の「id」を指します。
今回はid属性である「area01」のCSS設定を行っていきましょう。id属性のCSS設定はこのように書きます。
#area01 {
background-color:orange;
}id属性は前にシャープ「#」を付けます。クラス属性の「.」とは別なので注意しましょう。
では画面を見ていきます。
id属性で指定した部分だけ背景色を変えることができました。
CSSを書く所3つを紹介
基本的なCSSの書き方を説明しました。
ここでは実際にCSSを書く場所を説明していきます。CSSを書く場所は3つに分かれます。
- CSSファイルでCSSを書く
- HTMLファイルに<style>タグを作って書く
- 直接HTMLタグに書き込む
次で説明していきます。
CSSファイルでCSSを書く
まずはCSSファイルを作って読み込む方法をお伝えします。
前述しましたが、まずCSSファイルの読み込みはこのように記載します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSの設定</title>
<link rel="stylesheet" href="style.css">
</head><head>タグのなかに、「<link rel=”stylesheet” href=”style.css”>」を書き込みます。
その後、フォルダ内にhrefで指定したファイルを作成します。
こうして出来上がったCSSファイルに、CSSを書いていくことでデザインを指定することができます。
HTMLファイルに<style>タグを作って書く
次にHTMLファイルに<style>タグを作成して、その中に書く方法です。
<style>タグはこのように書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSの設定</title>
</head>
<style>
</style>この「<style></style>」の中に、CSSを書くことでデザインの指定が可能です。
直接HTMLタグに書き込む
最後は直接HTMLタグに書き込む方法です。
直接HTMLへの書き込みは、このように書きます。
<div id="area01" style="background-color:yellow;">こんにちは</div>このように、「style」を設定し、ダブルクォーテーションで囲んで指定したいCSSを書き込みます。
CSSを書く所3つの使い分けとは？
ReinaCSSの書き方と書く場所についてわかりました！
でも書く場所って3つもあって、どう使い分けたらいいの？
前の章でCSSの書き方3つを紹介しました。
ここでは簡単に、3つのCSSの書く場所の使い分けを紹介していきます。
複数のファイルを1つでまとめたい時【CSSファイル】
まずCSSファイルでの書き込みは、複数のファイルにおけるCSSを、1つのCSSファイルでまとめたい時に書きます。
システムやアプリを開発していくと、複数のファイルで同じ要素やクラス属性を設定していくことが多いです。
同じ要素やクラス属性を設定するときは、1つのCSSファイルでまとめて記載しておく方がよいでしょう。
Reinaもし変更があったとしても、CSSファイルで指定した箇所を修正するだけで、全てのファイルのCSSの変更が適用されますね！
1つのファイルでまとめたい時【<style>タグ】
<style>タグでの書き込みは、作成する1つのファイルでまとめたいときに記載します。
複数のファイルでは使わないけど、1つのファイルで同じクラス属性を使用することも少なくありません。
そのような場合に<style>タグ内でCSSを設定すると、適用されている箇所も見つけやすいのでオススメです。
特定のCSSを変えたい時【HTMLタグへの書き込み】
1つのファイルで、この部分のみCSSを変えたいときは、HTML直接への書き込みをするとよいでしょう。
例えば同じclass属性でCSSを指定しているけど、この箇所のclass属性のみCSSを変えたいときは直接へ書き込みすると適用されます。
しかし直接へのCSSの書き込みは、あくまで特定の箇所のみ変えたいときに指定することをおすすめします。
基本はファイルや<style>タグ内で、まとめて記載するように心がけましょう。
Reina同じ属性のものはまとめて記載する、そうすることで修正が1つに収まる、これを意識してコーディングしていきましょう！
まとめ：CSSで見た目を綺麗にしよう！
今回はCSSの基本的な書き方から書く場所、そして書く場所の使い分けを紹介しました。
プログラミングではないですが、HTMLと同じくらいCSSを理解しておくことも初心者にとっては必見です。
基本的な書き方やまとめ方を理解してから、さまざまなCSS設定を行っていきましょう。
今回の記事をぜひ参考にしていただけたら幸いです。
