どうも、べ〜やんです。
今回はCSSに付いて超基本をざっくりまとめます。
目次
CSSでできること
CSSはwebページの見た目を整える働きがあります。背景色や文字色、デザインの位置や大きさの変更など、様々なことができページのイメージをガラッと変えることができます。
HTMLのみ
CSS適用
CSSファイル
CSSはテキストファイルですので、テキストエディタで作成します。
CSSファイルの名前の最後の部分の拡張子を（.css）にします。例：style.css
適用するHTMLファイルと同じサーバー上に保存して、HTMLファイルから参照して使用します。
CSSをみてみる
以下がCSSファイルです。p要素の文字の大きさを50pxにして文字色を緑にしています。
See the Pen gOOpJXJ by kawabe (@orientado) on CodePen.
＊左上のHTMLボタンとCSSボタンでファイルの表示を切り替えれます。/* */ で囲んでいる部分はコメントです。webページには影響ありません。
pの部分が「セレクタ」と呼びfont-size、colorの部分が「プロパティ」、50pxやgreenの部分を「値」と呼びます。
セレクタ(p)のあとで { } を使ってプロパティと値を囲みます。
プロパティ(font-size)のすぐ後ろに ： をつけて、値(50px)のすぐ後ろに ； をつけます。
p(セレクタ) {
font-size(プロパティ) : 50px(値) ;
}
これが、基本的なCSSのルールです。
セレクタ
先ほどはp要素をセレクタにしましたが同じ要素が複数ある場合はページ内の全ての同じ要素のデザインが同じになってしまいます。
See the Pen oNNXRqP by beeyan (@orientado) on CodePen.
セレクタは要素だけじゃなくclassも指定できるので、クラスを使うとデザインを区別することができます。
See the Pen OJJVYvL by beeyan (@orientado) on CodePen.
クラスをCSSに書くときは、クラス名の前に . をつけます。
違う要素に同じクラスをつければ、簡単に同じデザインを与えることができます。
以下のように文字色をredにしたい場所にclass=”red”をつければ、一度CSSを書くだけで複数の場所の文字色をredにできます。
See the Pen eYYNaKE by beeyan (@orientado) on CodePen.
idもセレクタにすることができます。idをCSSで書くときはid名の前に # をつけます。
See the Pen gOOpJKV by beeyan (@orientado) on CodePen.
id名はHTML文の中で一度しか使えないので、classと同じ使い方にならないよう注意しましょう。
セレクタには他にも子孫セレクタや擬似セレクタなどの使い方もありますが、他の機会に紹介します。
プロパティ
プロパティはセレクタで指定された箇所に適用するデザインの種類です。
font-sizeは文字の大きさ、colorは文字の色などです。プロパティはとても数が多いのでやり方がわからないデザインは、その都度検索しちゃいましょう。
よく使うプロパティを一部紹介します。
| color | 文字色 | 値 (例) red #C7254E |
| font-size | 文字の大きさ | 値 (例) 20px 2rem 1em |
| font-weight | 文字の太さ | 値 (例) lighter 700 900 |
| text-align | 文字の行揃え | 値 (例) left center right |
| background-color | 背景色 | 値 (例) red #C7254E |
| background-image | 背景画像 | 値 (例) url(“画像url”) |
| width | コンテンツの横幅 | 値 (例) 500px 100% |
| height | コンテンツの縦幅 | 値 (例) 300px auto |
| margin | 外側の余白 | 値 (例) auto 10px 30px |
| padding | 内側の余白 | 値 (例)10px 20px 30px 40px |
値
値はプロパティごとに指定できる種類が決まっています。
長さ → px % など
色 → 英語（red、など）RGB(16進数) RGBA関数 など
色を指定する値は英語表記のものが簡単ですが、それでは単純な色しか使えません。細かい色の表現はRGB(16進数)やRGBA関数使って表現します。
RGB(16進数)は#000から#fffまでの数字とアルファベットで表記します。
さらに透明度を加えたものがRGBA関数です。
詳しくは、別の機会に紹介します。
CSSを適用する
CSSを適用する方法はいくつかありますが、推奨される方法はHTMLのhead要素の中で外部ファイルとして読み込む方法です。
<head>
<link rel="stylesheet" href="style.css">
</head>このHTML文書にはこのCSSシートを使うよ〜、と指定しています。
リファレンス
おわりに
今回はCSSの書き方に付いて基本的なことを、ざっくり紹介しました。
CSSも実際にどんどん書いていくと自然と覚えていきます。検索しながら、とにかくたくさん書くことをオススメします。
