[CSS入門] CSSの記述場所とその効果(メリット・デメリット)まとめ


はじめに

Webサイトを制作する業務に携わる場合、HTMLやCSS、javascriptといったフロントエンド言語の知識が必要となります。

特にHTMLとCSSを習得することができれば、簡単なWebサイトを自分で作れるようになります。

HTMLはWeb制作を行うためのベースとなる言語となり、コンテンツの構造を決定するものとなります。
一方、CSSというのは「Cascading Style Sheets」の略で、コンテンツの装飾(文字の大きさや色、背景の色など)を担当します。

このCSSですが、実はHTML内に記載するだけでなく、「CSSファイル」という別ファイルとして読み込むこともできるのです。

本投稿では、このCSSの記述箇所とそのメリットやデメリットなどについてまとめておきます。

CSSの記述場所

CSSの記述場所は下記の3つに分類されます。

  • styleタグ内に記載する
  • 各タグ内(インライン)に記載する
  • 外部ファイルに記載する

それぞれの記載方法やメリット、デメリットについて、次章にて説明します。

styleタグに記載する

<style>タグの記載方法としては、基本的に<head>タグに囲まれた場所に記載します。

<head>
  <title>sample</title>
  <style>
    p.edit { font-size:20px; }
  </style>
</head>
<p class="edit">Hello World! (css applied)</p>
<p>Hello World! (css not applied)</p>

上記を実行した結果は下記の通りです

メリットデメリット
外部ファイル化したCSSファイルより読み込み速度が速い個々の要素に割り当てるため全体のページに対してのメンテナンスが非効率
個々のページごとに装飾を管理できる

各タグ内(インライン)

タグに直接スタイル(スタイル属性を追加)を指定する方法です。

<head>
  <title>sample</title>
</head>
<p style="font-size:20px;">Hello World! (css applied)</p>
<p>Hello World! (css not applied)</p>

上記を実行した結果は下記の通りです

<style>で囲って記載した時と表示結果は同じですが、<style>で囲った時は、ページ全体で利用可能なスタイルとして適用させることができますが、インラインで指定した場合は、その要素のみ指定します。

メリットデメリット
外部ファイル化したCSSファイルより読み込み速度が速い個々の要素に割り当てるため全体のページに対してのメンテナンスが非効率
対象要素のみに指定可能タグごとに指定するため、記載が増えかつファイル容量も増える

外部ファイル

CSSを外部ファイル化(XX.css)は、「link」という要素を使ってHTMLファイルにリンクすることができます。

このlink要素によって、HTMLからCSSにアクセスできるようになっています。

直接HTMLファイルを編集することが少なくなるのが特徴ですね。

sample.html

<p class="edit">Hello World! (css applied)</p>
<p>Hello World! (css not applied)</p>

style.css

p.edit { font-size:20px; }

上記を実行した結果は下記の通りです

こちらも、前述した記載方法と結果は一緒ですが、外部ファイル化することで読み込み速度は内部に記載するより若干遅くなります。

メリットデメリット
全ページに対して一括して管理できるHTMLファイルに記載するより読み込み速度が少し遅くなる
HTMLファイル容量を節約できる
メンテナンスが容易である

さいごに

CSSの記載場所とその効果についてをまとめてみました。

それぞれにメリット・デメリットが存在していますが、それぞれを組み合わせて制作すると良いかと思います。