どうもイトサル（@itosaru)です。
・htmlの勉強を始めたけど文字の装飾とかどうやるの？
・cssというものは聞いたことがあるけど具体的にわからない。
という方向けの記事です。
今回は実際に書く前にcssとは何なのか、そしてcssはどうやって書いていくのかをご説明します。
CSSってなに？
WEBページを装飾する定義のことで
正式名はCascading Style Sheets（カスケーディング スタイル シーツ)です。
インターネット上には様々はWEBページが存在しますが、CSSを使っていないWEBサイトはまず存在しません。
CSSを使うと
- 文字の大きさや色を変える
- 文字の背景に色をつける
- 文章の中にアイコンを入れる
といったことができるようになります。
またCSSはHTMLとセットで使われるものです。
CSS単体では動かないということを頭に入れておきましょう。
あくまでもWEBページというコンテンツの装飾をするもの、ということですね。
CSSはどうやって書いていくの？
書き方自体はとっても簡単です。
書いていく手順としては大きく3ステップです。
- 装飾するものを指定する
- どんな変更をするか指定する
- 変更の値を指定する
それぞれ詳しく説明します。
装飾するものを指定する
まずは何を装飾するのかを指定します。
現実では
イトサル、「アレ」やっといてよ。
「アレ」ですね。わかりました。
という会話は成立するかもしれません。
しかしコンピューターには「アレ」が通用しません。
必ず何をということをいってあげる必要があります。
イトサル、「会議の資料」をコピーしといて、3部ね。
このように何をして欲しいのかという対象を指定する必要があるということですね。
指定する対象のことをCSSでは
セレクタ
と言います。
上の例では「会議の資料」がセレクタです。
よく使われるセレクタは3つあります。
- HTMLタグを指定する
- classを指定する
- idを指定する
1のHTMLタグはbodyタグなどを直接指定する方法です。
2のclassについての詳細はこちら
3のidについての詳細はこちら
どう変更するかを指定する
セレクターを指定した後はどんな変更をするかを定義します。
現実でも
イトサル、「会議の資料」
だけ言われてもどうしたらいいのかわかりません。
コピーして欲しいのか、それとも誤字脱字がないか確認して欲しいのか言わないとわかりません。
イトサル、「会議の資料」を「コピー」しといて、3部ね。
と言って初めて伝わります。
この何をして欲しいのかをCSSでは
プロパティ
と言います。
プロパティは様々な種類があり、使えるプロパティもHTMLタグの種類によって異なります。
変更の値を指定する
どんな変更をするかを指定したら、その値を指定します。
上の例だと
イトサル、「会議の資料」を「コピー」しといて。
だけだと何部コピーすればいいかわかりません。
1部でいいのか、それとも10部いるのかわからないですよね。
イトサル、「会議の資料」を「コピー」しといて、「3部」ね。
この「3部」の部分をそのまま
値
と言います。
ここまでの内容を簡単にまとめます。
- セレクター：装飾するものを指定したもの
- プロパティ：指定したものをどう変更するかを定義するもの
- 値：プロパティの値を定義するもの
CSSは「セレクター」と「プロパティ」そして「値」の3つを書いて初めてデザインが変更できます。
実際にCSSを書いてみる
ここまでの内容が何となくわかったら実際CSSを書いてみましょう。
まず下記のような単純はHTMLを用意しましょう。
<html lang="jp">
<head>
<title>CSSテスト</title>
<meta charset="utf-8">
</head>
<body>
<p>こんにちは</p>
</body>
</html>このhtmlをブラウザで開くと下の画像の画面になります。
今回は「こんにちは」と書かれたpタグの背景色を変更してみましょう。
CSSを書くことを宣言する
まずはHTML内にCSSを書くことをタグで宣言します。
宣言すると言ってもタグを書くだけなので難しいことではありません。
宣言には
styleタグ（<style></style>）
を使います。
styleタグはheadタグの中に記述します。
<html lang="jp">
<head>
<title>CSSテスト</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<p>こんにちは</p>
</body>
</html>
セレクタを書く
styleタグを書いたらその中にセレクタを記述します。
今回はHTMLのpタグを指定するので「p」を書きます。その後に波括弧を書きましょう。
波括弧：{ } のこと
入力方法
{ ： shiftキー + 8キー
} ： shiftキー + 9 キー
入力し終わった状態は下のようになります。
<html lang="jp">
<head>
<title>CSSテスト</title>
<meta charset="utf-8">
<style>
p{}
</style>
</head>
<body>
<p>こんにちは</p>
</body>
</html>これでpタグをセレクタとして変更を加える準備ができました。
イトサル、「この書類」
の部分が書けた状態です。
プロパティを書く
波括弧の中にプロパティを書きます。
背景色を変えるには
back-ground-color
のプロパティを使用します。
入力が終わったらコロン（：）を書きましょう。
記述が終わった状態は下のようになります。
<html lang="jp">
<head>
<title>CSSテスト</title>
<meta charset="utf-8">
<style>
p{background-color: }
</style>
</head>
<body>
<p>こんにちは</p>
</body>
</html>これでpタグに対して背景色を変えるという指定をするとことまで完了しました。
イトサル、「会議の資料」を「コピー」しといて
まで書けた状態ですね。
値を書く
コロン（：）の後に変更したい値を書きます。
色の指定方法はいくつかありますが、今回は青色に変更するために「blue」を指定します。
書き終わった最終的な状態は下の通りです。
<html lang="jp">
<head>
<title>CSSテスト</title>
<meta charset="utf-8">
<style>
p{background-color: blue;}
</style>
</head>
<body>
<p>こんにちは</p>
</body>
</html>
これでCSSの完成です！
イトサル、「会議の資料」を「コピー」しといて、「3部ね」
わかりました！
のやりとりができている状態です。
index.htmlを保存して開き直してみましょう。
「こんにちは」の背景が青文字に変更されました！
CSSって結構簡単かも！？
まとめ：CSSは簡単です
今回はCSSの基本的なことと書き方について説明しました。
書き方を振り返ってみましょう。
- セレクタを書く
- プロパティを書く
- 値を書く
この3ステップでCSSは書けます。
横文字がわかりずらさを出していますが意味がわかってしまえば何も難しいことはありません。
CSSに限らずコーディングは実際に手を動かすことで初めて身につくものです。
CSSに興味が湧いたら実際に自分で描いてみましょう。
HTMLとCSSの勉強におすすめな本
もっと詳しくCSSのことを勉強したいなら
1冊ですべて身につくHTML & CSSと Webデザイン入門講座
の本がおすすめです！
CSSだけでなくHTMLの書き方やWEBのデザインまで細かく丁寧に説明してくれてます。
コードの図解はもちろん、勉強用のサンプルデータのダウンロードまでできるため、内容がとてもわかりやすく作られています。
この本を手元に実際にコーディングしていくことですぐに上達できますよ。
コメント