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

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

関連記事

[css] 横並び、flexboxの使い方

どうも、べ〜やんです。 今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。 flexboxとは? 要素を横並びに配置する方法のひとつに、flexboxがあります。 f …

[CSS] 中央揃え

どうも、べ〜やんです。 今回はCSSでテキストやブロックを中央配置する方法を紹介します。 ブロックとインライン ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライ …

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …

アイコンを簡単に表示できる!Icongram

どうも、べ〜やんです。 今回は、簡単にアイコンを表示できるサービス『Icongram』を紹介します。 Icongramとは 引用元:Icongram Icongramは9つのアイコンライブラリからAP …

[CSS] overflowの使い方

どうも、べ〜やんです。 今回はCSSのoverflowの使い方を紹介します。 テキストが長いけどスペースを大きく取りたくない場合などに便利です。 overflowとは overflowは要素からはみ出 …