初級フロントエンドエンジニアが知っておきたい基礎の基礎【CSS編】

CODE
のり
のり

こんにちは!駆け出しフロントエンジニアのnoriです!CSSの勉強をしているけど、なかなか知識が身についているかどうかわからないので、アウトプットとしてCSSの基礎の基礎をまとめたいと思います!

CSSとは

CSSとは、Cascading Style Sheets(カスケーディングスタイルシート)の略で、スタイル、つまりWebページをデザインするための言語です。HTMLと同じくプログラミング言語ではありません。HTMLと合わせてブラウザにどのようなデザインで表示するかを伝えます。

実際のCSSを見てみましょう。以下のCODEPENは、HTMLの文字色と文字サイズを変更するCSSになります。

See the Pen basic-css-example by Nori (@ysnoritnk) on CodePen.

このように、HTMLと組み合わせて色やサイズ、レイアウトなどの表示デザインを整えていくのがCSSの役割です。

CSSの基本

CSSの適用方法

CSSを適用するには、以下の3種類の方法があります。

  1. HTMLのhead要素内にstyle要素を入れて適用する
  2. HTMLタグ内にstyle属性として適用する
  3. CSSファイルを外部ファイルとして用意して適用する推奨

それぞれ見ていきましょう。

HTMLのhead要素内にstyle要素を入れて適用する

以下のようにhead要素内にstyle要素を記載し、その中にCSSのスタイルを適用する方法です。

メリットとしては、HTMLファイルのみで記述が完結することですが、記載が多くなるとhead要素が大きくなりすぎてhtmファイル自体が見にくくなるというデメリットがあります。

index.html
<head>
 <style>
  p {
    color: red;
  }
 </style>
</head>

HTMLタグ内にstyle属性として適用する

HTMLファイルのbody要素内で、HTMLタグ内にそのままスタイルを適用することもできます。

メリットとしては、先程と同じくHTMLのみで記述が完結し、スタイルの適用も見てすぐに分かるということが挙げられますが、記載が冗長になったり、可読性が下がるなどのデメリットがあります。

index.html
<body>
 <p style="color: red;">文字の色を変えることが出来ます</p>
</body>

CSSファイルを外部ファイルとして用意して適用する

HTMLとは切り離して、CSSのファイルを用意する方法です。CSSファイルを作成するには、拡張子を「.css」とするとCSSファイルになります。HTMLファイルのhead要素内に外部ファイルとして読み込むことでCSSが適用されます。

index.html
<head>
 <link rel="stylesheet" href="style.css">
</head>

style.css
p {
  color: red;
}

このCSSファイルを用意して、外部ファイルとして読み込ませる方法が推奨されています。メリットとして、HTMLとファイルを切り離せることで、独立して作業ができることが挙げられます。

CSSの書き方

今まで、いくつか例をお見せしましたが、CSSは、セレクタとプロパティ、値を以下のように記載すると適応されます。「:」や「;」を忘れないようにしましょう。

セレクタ {
    プロパティ: 値;
}

次のセクションから代表的なセレクタやプロパティを紹介したいと思います。

セレクタ

要素全体に対するセレクタ

h1要素、p要素、a要素など、要素に対してスタイルを適用するにはh1{ }p{ }のように記載をします。

See the Pen basic-css-element by Nori (@ysnoritnk) on CodePen.

しかし、要素全てではなく、特定のp要素など範囲を限定したい時もあると思います。続いて、そのような時にどのように記載するか見ていきましょう。

class属性に対するセレクタ

class属性のある要素についてスタイル適用する場合は、以下のように「.」クラス名をつけて記載をします。以下の例のように階層になっている場合は、下の階層までスタイルは適用されます。

See the Pen basic-css-class by Nori (@ysnoritnk) on CodePen.

id属性に対するセレクタ

id属性のある要素についてスタイル適用する場合は、以下のように「#」クラス名をつけて記載をします。

See the Pen basic-css-id by Nori (@ysnoritnk) on CodePen.

子孫セレクタ

HTML文書の構造に沿って指定するセレクタもあります。例えば、下記のようにdiv > section > pのような構造になっているp要素にのみスタイルを適用する場合などは、div section pというように指定をします。

See the Pen basic-css-progeny by Nori (@ysnoritnk) on CodePen.

擬似クラス

擬似クラスとは、要素が特定の状態にある場合にスタイルを指定できるもので、ここでは、リンクテキストについての各状態の時にスタイルを指定する例を書きたいと思います。

  • a:link{ }は、未訪問の状態の時にスタイルを適用できます
  • a:hover{ }は、リンクにカーソルが乗った状態の時にスタイルが適用できます
  • a:visited{ }は、訪問済の状態の時にスタイルを適用できます

See the Pen basic-css-pseudo-classes by Nori (@ysnoritnk) on CodePen.

その他のセレクタ

他にも色々なセレクタがあります。以下の記事を参考にしてください。

プロパティ

いままで、colorというプロパティを多く使ってきましたが、テキストに関するプロパティは他にもあります。

テキストに関するプロパティ

テキストの色や大きさ、寄せ方を指定するプロパティを紹介します。

プロパティ用途
color文字の色を指定
font-size文字の大きさを指定
font-weight文字の太さを指定
text-align水平方向の表示位置(左寄せ、中央寄せ、右寄せなど)
vertical-align垂直方向の表示位置(上寄せ、中央寄せ、下寄せなど)

背景のプロパティ

背景色や、背景の画像を指定するためのプロパティを紹介します。

プロパティ用途
background-color背景色の指定
background-image背景画像の指定

ブロックレベル要素に関するプロパティ

ブロックレベル要素に関するプロパティを紹介します。

プロパティ用途
widthコンテンツの横幅を指定
heightコンテンツの縦幅を指定
marginマージン(余白・外)のサイズを指定
paddingパディング(余白・内)のサイズを指定
borderボーダー(境界線)のサイズの指定

表示や配置に関するプロパティ

プロパティ用途
display要素の表示、非表示を指定
floatコンテンツの配置を指定(2次元)
positionコンテンツの配置を指定(3次元)
overflowボックスに収まらない内容の表示方法を指定

その他のプロパティ

上記の他にも様々なプロパティがあります。以下の記事を参考にしてください。

値は、プロパティと対となって存在しています。ここでは、長さの値と、色の値、レイアウトの値を紹介します。

長さの値

長さの値は、10pxなどピクセル表記で指定するものと、150%などパーセント表記で指定する2種類があります。

色の値

色の値には、3種類の方法があります。

  • 色の名前を指定(red,blue,greenなど)
  • 16進数で指定(#fff,#000,#0f0f0fなど)
  • RGBA関数で指定(rgba(255,0,255,0.8)など)

レイアウトの値

レイアウトの値は、left、center、right、justify(均等揃え)などがあります。

CSSの優先順位

CSSには、ルールとして以下の優先順位が存在します。

  • 下に書かれたものほど優先される
  • 詳細なセレクタほど優先される

レイアウトについて

レイアウトとは、何かを指定の場所に配置するということです。CSSでは、HTMLの要素を自由に配置してWebページを作成することが役割となります。そのために、知っておきたいのがレイアウトに関する知識です。

まずは、以下のCODEPENを見てください。同じようにdivとspanを記載していますが、表示のされ方が違います。

See the Pen basic-css-default-display by Nori (@ysnoritnk) on CodePen.

divは、ブロックレベル要素と呼ばれており、画面サイズの横幅いっぱいまでで改行されるのに対し、spanは、インライン要素と呼ばれていて、改行されず横に並んでいます。

このように、要素によって表示のされ方が違うのは、display要素のデフォルト値が要素によって違うからです。display要素には、基本的にブロックレベル要素、インライン要素の2つに分かれています。

ブロックレベル要素
  • h1などの見出し要素
  • div
  • section
  • p
  • ul, ol
  • tableなど
インライン要素
  • span
  • a
  • imgなど

デフォルトの値は要素によって違いますが、display要素を変更することも可能です。

See the Pen basic-css-change-display by Nori (@ysnoritnk) on CodePen.

このように、レイアウトを考える時には、ブロックレベル要素のように上から下に配置するものと、インライン要素のように左から右に配置するものとをうまく考える必要があります。

ボックスモデル

ボックスとは、HTML要素に与えられた四角い領域のことを指します。HTMLの各要素には、以下の4つの領域が与えられていて、要素の大きさや位置を自在に変更することができます。

  • margin(外側の余白)
  • border(境界線)
  • padding(内側の余白)
  • content area(コンテンツエリア)

以下の白いエリアがmargin、青い線がborder、緑色のエリアの内テキストの外側がpadding、テキストが書かれている部分がコンテンツエリアです。

See the Pen basic-css-box-model by Nori (@ysnoritnk) on CodePen.

2カラムレイアウト

よく見かける2カラムの実装をおこないます。以下のような構成のHTMLに対して、floatプロパティを使ってメインを左側、サイドバーを右側に配置してみましょう。

See the Pen basic-css-2column- by Nori (@ysnoritnk) on CodePen.

メインを横幅60%、サイドバーを30%にしてわざと隙間を開けています。この状態でfloatを適用するとフッターが隙間に入り込んでしまいます。

See the Pen basic-css-2column-02 by Nori (@ysnoritnk) on CodePen.

これは、floatしたdivが宙に浮いている状態になっており、宙に浮いていないフッターがヘッダーに寄ってしまったことが原因です。これを解消するために、clearfixを使用します。

clearfixとはfloatを使用した際の回り込み解除するために使うクラスのことです。使用するには、HTMLのメインとサイドバーをwrapperで囲い、wrapperにclearfixクラスを設定するということをします。

また、CSSでclearfixクラスに疑似要素である::afterを追加することで、HTMLにはない要素を追加します。contentはまさにコンテンツそのものですが、ここには、何も書きません。そして、displayはブロックレベル要素、clearプロパティは、floatの回り込みを解除する際に使用するもので、bothと設定すると、左寄せ、右寄せなど、全ての要素に対する回り込みを解除することができます。これで、回り込みに対する対応は完了です。

See the Pen basic-css-2column-03 by Nori (@ysnoritnk) on CodePen.

まとめ

CSSについて、CSSの基本とレイアウトについてまとめてみました。

CSSの基本では、セレクタ、プロパティ、値のそれぞれについて基本となる項目を例にまとめてきました。

レイアウトについては、HTML要素には、ブロックレベル要素、インライン要素があること、そしてボックスモデルを理解することで各要素を正しく配置できることをまとめました。

また、2カラムのレイアウトを実装する際には、clearfixクラスを使うことでfloatの回り込みを解除する方法をまとめました。

CSSは奥が深いので、これはほんの基礎の基礎です。またCSSについては何かをピックアップしてまとめていきたいと思います。

コメント

タイトルとURLをコピーしました