CODING

[超初心者] CSSの書き方

投稿日:2019年10月10日 更新日:




どうも、べ〜やんです。

今回は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の書き方に付いて基本的なことを、ざっくり紹介しました。

CSSも実際にどんどん書いていくと自然と覚えていきます。検索しながら、とにかくたくさん書くことをオススメします。




-CODING
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[HTML] 表を作るtable

どうも、べ〜やんです。 今回はHTMLでtableタグを使って表を作る方法を紹介します。 表の例 表を使う 表を使うと伝えたい情報を分かりやすく伝えることができます。 HTMLには簡単に表を作れる便利 …

[CSS] CSSで背景色と文字色を半々にする方法

どうも、べ〜やんです。 今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …

[HTML] リストの作り方ul・ol・liタグ

どうも、べ〜やんです。 今回はHTMLでリストや箇条書きをざっくり作る方法を紹介します。 リストとは ul・ol・liタグを使うとリストや箇条書きを作ることができます。 目次や手順、メニュー、スライド …

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …

[css] Flexboxの子要素

どうも、べ〜やんです。 今回は、Flexboxの使い方の子要素に使うプロパティを紹介します。 横並び、親要素についてはこちら↓ [css] 横並び、flexboxの使い方 flexboxの種類 (子要 …