HTML/CSS基礎第13回『CSS概要を学んでいこう』

2023年7月24日2024年5月20日

NEUGATE 教育事業部

CSS(Cascading Style Sheet)とは

HTML/CSS基礎第13回ではCSSの概要について解説していきます。
CSSとは、HTMLで作成したWebサイトのデザインの部分を担う言語のことを言います。作成したHTMLにCSSを適用させるには、以下の3つの方法があります。

①作成したCSSファイルを読み込む

②HTMLファイルの<head>タグ内に設定する

③HTMLファイルの各タグに直接書き込む

今回はこの3つの方法について説明させていただきます。

①作成したCSSファイルを読み込む

CSSファイルを作成し、HTMLファイルでそれを読み込む方法で、最も一般的な方法となります。HTMLファイルの各タグに対して同一の装飾を施すことができるため、一括して管理することができ、また、サイト全体の統一感も演出することができます。CSSファイルの拡張子は「.css」とします。

適用方法

HTMLファイルの<head>タグ内に<link>タグを使用してCSSファイルを指定します。「rel属性」には「stylesheet」を指定し、「href属性」にはHTMLファイルからのみたcssファイルのパスを指定します。

<head>
  <meta charset="UTF-8">
  <title>猫の実態</title>
  <meta name="description" content="猫の日常を紹介">
  <link rel="stylesheet" href="css/style.css">
</head>

3つの方法の中で最も一般的ですが、CSSの効果の優先順位が最も低い方法となります。

②HTMLファイルの<head>タグ内に設定する

HTMLファイルの<head>タグ内にCSSを書き込みます。この方法は書き込んだHTMLファイルにのみ適用することができるため、特定のページのみデザインを変更したい場合に使用します。

適用方法

<head>
  <meta charset="UTF-8">
  <title>猫の実態</title>
  <meta name="description" content="猫の日常を紹介">
  <style>
    h1{color:red;}
    p{font-size: 10px;}
  </style>
</head>

今回のサンプルの場合、「<h1>タグで囲まれた部分については赤い文字で表示する。」「<p>タグで囲まれた範囲はフォントのサイズを10pxにする。」というCSSを適用させています。

この方法は①の方法よりもCSSの効果の優先順位が高くなります。（適用させたCSSファイルがあり、同じタグに対して相反する指示があった場合、今回の方法のほうが優先されます。）

③HTMLファイルの各タグに直接書き込む

最後に紹介するのは、HTMLの各タグに直接CSSを書き込む方法です。この方法を採用した場合、CSSの効果は直接CSSを書いたタグにのみ適用されます。一部のデザインにのみ違うデザインを施したい場合に使用します。

適用方法

「style属性」を使用して適用させます。

<head>
  <meta charset="UTF-8">
  <title>猫の実態</title>
  <meta name="description" content="猫の日常を紹介">
</head>
<body>
  <h1 style="color:red;">猫の一日</h1>
  <p style="font-size:10px">ひたすら寝ています。</p>
</body>