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

はじめに

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

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

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

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

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

CSSの記述場所

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

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

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

styleタグに記載する

Hello World! (css applied)

Hello World! (css not applied)

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

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

各タグ内（インライン）

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


  sample


Hello World! (css applied)

Hello World! (css not applied)

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

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