今回はCSS（スタイルシート）について解説していきます。初心者の方でも分かるよう、なるべく噛み砕いて説明していきますのでご安心ください。「CSSとは一体何なのか」というお話に加え、基本的な書き方をお伝えしたいと思います！
CSSとは？
CSSとは、webページに装飾を加えたり見やすくしたりなど、見栄えを良くすることができるものです。
もしCSSを使用しない場合……
HTMLだけでWebページを作成すると、このように真っ黒で見辛いページができあがってしまいます。
HTMLで作られたwebページに、装飾をつけて見栄えを良くできるのがCSSです。
- 文字・画像の大きさ
- 背景の色
- 余白
など、CSSを使用すると様々な要素を見栄えよくすることができます！
CSSはどこに、どうやって書くのか
ここからは実際にコードを書きながらご説明したいと思います。詳しい解説は後ほど行いますので、まずは一緒に手を動かしてみましょう！
まずはHTMLファイルを作成！
まずはVSCodeを開いてみましょう。
「新しいファイル」をクリックし、何も書かれていないファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストページです</title>
</head>
<body>
<h1>今からHTMLを勉強します！</h1>
<p>素敵なWebページを作りたいな〜</p>
</body>
</html>左のコードをコピーし、テキストエディタへ貼り付けてください。
先ほど入力したHTMLを保存しましょう。
| 名前 | test.html |
| 保存場所 | デスクトップ |
この時、拡張子を必ず「.html」としてください。
デスクトップにある先ほど保存したtest.htmlファイルをダブルクリックで開いてみましょう。
すると、ブラウザが立ち上がり、HTMLファイルが表示されました！
先ほど入力した内容がそのまま反映されていますね。
CSSを書いていきます
ここで少しおさらいですが、HTMLの<head>~</head>には
- 検索エンジンに伝えたいこと
- コンピューターに伝えたいこと
など、Webページの情報を記述するんでしたね。CSSはコンピュータに「こういう見た目だよ！」という情報を伝える役目がありますので、<head>~</head>に書いていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストページです</title>
<style>
/*ここにCSSを書きます*/
</style>
</head>
<body>
<h1>今からHTMLを勉強します！</h1>
<p>素敵なWebページを作りたいな〜</p>
</body>
</html>それでは実際に、先ほどのtest.htmlにCSSを書いていきましょう！
<title>と</head>の間に<style> </style>と書いてみましょう。
<style>
body {
color: pink;
}
</style><style>部分をこのように書いてください。
書き方や意味は後ほど説明しますので、まずは試してみましょう！
test.htmlを上書き保存しましょう。
- 上部メニュー「ファイル」→「保存（上書き保存）」
Ctrl+S（macの場合⌘+S）
どちらかの方法で上書き保存してください。
文字の色がピンク色になりましたね。
もし文字色が変わっていない場合、ブラウザを再読み込み（更新）して下さい。
| Windows | F5 |
| Mac | ⌘+R |
このように、HTMLファイル内の<head>に<style>タグを作り、その中にCSSを書くことができます。
実はCSSを書く方法は、今回の方法と合わせて３種類あります。別記事にまとめますので、今しばらくお待ちください！
CSSの基本的な書き方
ではここからはCSSの文法について学んでいきましょう。
CSSの文法について
| セレクタ | どこの |
| プロパティ | 何を |
| 値 | どのように |
ということを指定することができます。
先ほど書いたCSSに当てはめて考えてみましょう。
| セレクタ | <body>全体の |
| プロパティ | 文字色を |
| 値 | ピンクに |
先ほど、全体の文字色がピンク色に変わったのは、そういう指示をCSSに書いたからということです。
| セレクタの後ろ | { } | 波かっこ |
| プロパティの後ろ | : | コロン |
| 値の後ろ | ; | セミコロン |
上の表のように、CSSでは
- 記号を書く位置
- 記号の種類
も厳密にルールが決められています。間違えるとCSSが反映されなくなるので、注意しましょう！
かもめCSSでは空白やタブ、改行は間にいくら入っていてもOK！ただし、全角スペースはエラーが出るので絶対に使わないようにしましょう！
セレクタの書き方
先ほどのおさらいになりますが、セレクタでは「どこの」デザインを変えるのか、という場所を指定するものでしたよね。
タグで指定する
p {
color: blue;
}まずひとつめはタグで指定する方法です。この指定方法の場合は、タグ名をそのまま書けばOKです。p{〜}やdiv{〜}、img{〜}のように書きます。
例では、<p>タグの中にある文字色を青色に変更しています。
idやclassで指定する
<p class="text-01">ピンクです</p>
<p id="text-02">青です</p>.text-01 {
color: pink;
}
#text-02 {
color: blue;
}要素一つずつに対し、個別にスタイルを当てたい場合はidかclassを使用します。
- HTMLの要素内に
id="○○"またはclass="○○"をつける - CSSでそれぞれ指定する
という手順で、要素それぞれに対してCSSを指定することができます！
| id | #(シャープ) + id名 |
| class | .(ドット) + class名 |
- 半角英数字
- -(ハイフン)、_(アンダースコア)が使用できる
- 数字から始まる命名はダメ
というルールが決められています。
かもめ特に理由がない限りはclassを使うようにしましょう。同じidはページで一度しか使えないので使いまわせない他、JavaScriptの働く先を指定するのに使われることが多いためです。とりあえずclass、くらいで覚えておきましょう。
プロパティの書き方
次に、プロパティの書き方を説明します。プロパティでは「何を」変えるのか指定するものでしたよね。
.title {
color: pink;
font-size: 16px;
background-color: #b1b1b1;
}
例では、
- 文字色をピンク
- フォントサイズは16px
- 背景色は#b1b1b1
ということを伝えています。変更プロパティにもたくさんの種類があります。
CSSにはどのようなプロパティが使えるのか気になった方は下記サイトもご覧ください。
かもめ全て暗記する必要は全くないですのでご安心ください。必要なときに検索し、使用すればそれでOKです！
値の書き方
最後に、値の書き方を説明します。「どのように」変更するのか、という内容を指定できるのが値でしたよね。
/* colorの値は「色」*/
.color-01 {
color: pink;
}
/* 「色」ではないので無効です */
.color-02{
color: 18px;
}プロパティに対し、どのような値を指定できるかはあらかじめ決まっています。
先ほどご紹介したTAG indexで使用できるプロパティを調べることができるので、ぜひご活用ください！
コメントを残したい場合は/* 〜 */を使用します。最初のうちは積極的にコメントを書き込んでおくと、後から見返した時に分かりやすくなりますよ
CSSの書き方 まとめ
- CSSの役割は、HTMLで作ったwebページの見た目を変更すること
- 基本文法は
セレクタ{プロパティ: 値;} - セレクタ……タグ、class、idに対して指定できる
- プロパティ……変更できる種類は多いため、検索推奨。暗記の必要はなし
- 値……プロパティとワンセット。指定できるものが決まっている
- コメントを残したい時は
/* 〜 */を使用する
