Webのいろは
MENU
  • HTML
  • CSS
検索結果
検索結果
  • HOME
  • >
  • HTML&CSS
  • >
  • HTMLでCSSを読み込む3種類の方法

HTMLでCSSを読み込む3種類の方法

2018/4/24 2019/10/8
いろは
HTMLでCSSを読み込む3種類の方法
  • B!

MENU

  • 1 HTMLとCSSの関係
  • 2 CSSの読み込み方法は3種類
    • 2.1 HTMLのタグに直接記述する方法
    • 2.2 styleタグを使いHTMLファイル内にまとめて記述する方法
    • 2.3 外部CSSファイルに記述してHTMLファイルで読み込む方法
  • 3 まとめ

Webサイト制作の基本はHTMLとCSSです。HTMLでコンテンツを作成して、そのコンテンツに対してCSSで装飾やレイアウトなどのデザインを行います。

HTMLでCSSを読み込む方法は3種類あります。今回はそれぞれの特徴・メリットと方法について、初心者の方にも分かりやすく解説していきます。

HTMLとCSSの関係

Webサイトの制作はHTMLとCSSが必要不可欠です。

ヘッダーやメインの文章、画像などWebサイトのコンテンツはHTMLでマークアップすることで作成します。CSSでは、HTMLで記述したHTMLタグのid名やclass名、またはタグ自体を直接指定してスタイルを適用させます。

例えば、pタグの文字を青くしたい場合CSSでは以下のように記述します。

HTML
<p>pタグは青い文字になったよ</p>
CSS
p{
  color:blue;
}
実行結果

pタグは青い文字になったよ

このように、使用するタグのスタイルをCSSで記述しておいて、そのCSSをHTMLで読み込むことでWebサイトのデザインができます。

CSSの読み込み方法は3種類

  1. HTMLのタグに直接記述する
  2. styleタグを使いHTMLファイル内にまとめて記述する
  3. 外部CSSファイル(.css)に記述して、そのCSSファイルをHTMLファイルで読み込む

ひとつずつ特徴を見てみましょう。

HTMLのタグに直接記述する方法

まずは、HTMLのタグに直接記述するやり方です。

この方法は「インラインCSS」と呼ばれており、以下のようにタグの中にCSSを書きます。

<p style="color:red; font-size:18px;">
~テキスト~
</p>

タグの中にstyle属性を使ってCSS要素を記述して行きます。

一部のデザインを手早く変更したい時には特に便利です!
逆に言えば、指定したタグにしか反映されないのでページ全体のタグの指定には不向きです。

基本的にこのやり方はあまりお勧めしません。
HTML5の基本理念的に分別させたいという点もありますが、何より一番の理由として後々の修正が大変になるためです。
(とは言っても全く使えないわけではありませんよ!)

styleタグを使いHTMLファイル内にまとめて記述する方法

こちらのやり方はタグにではなく、HTMLファイル内のheadタグ内にまとめて記述するやり方で、styleタグというものを使用します。

<html>
  <head>
    <style>
      p{
        color:red;
        font-size:18px;
      }
      h2{
        font-size:26px;
        color:blue;
      }
    </style>
  </head>
  <body>
    ~コンテンツ~
  </body>
</html>

HTMLファイル内にある<head></head>内で、上記のようにまとめて記述します。例ではpタグとh2タグを指定していますが、この2つに限らず何種類でも指定することが出来ます。

こちらは、一度記述しておけばそのHTMLファイル内では全体に適用されます。
しかし、複数ページがある場合には他のHTMLファイルには適用されないので注意が必要です。

外部CSSファイルに記述してHTMLファイルで読み込む方法

こちらは、HTMLファイルとCSSファイルを別々に用意し、HTMLファイルのheadタグ内でlinkタグを使って読み込む方法です。
この記述方法が一番メジャーで、コンテンツ構成とデザインを分けるセマンティックWeb的にも一番推奨できそうです。

まずは2つのファイル(HTMLファイルとCSSファイル)を用意しそれぞれ記述していきます。
以下、サンプルコードです。

HTMLファイル(.html)
<html>
<head>
  <link rel="stylesheet" href="○○.css">
</head>
<body>
  <h1>見出し</h1>
  <p>~本文~</p>
</body>
</html>
CSSファイル(.css)
@charset "UTF-8";
h1{
  font-size:32px;
  color:green;
}
p{
  color:#333;
}

少し複雑ですね。部分的に見ていきましょう。

  1. まず、下のCSSファイルですが、h1タグとpタグの文字サイズや色を指定する内容です。
  2. 次にHTMLの方ですが、headタグ内にある<link ~>という部分でCSSファイルを読み込んでいます。
    ※○○.cssの○○のところは作成したファイル名になります。
    これで、bodyタグ内のh1タグとpタグにスタイルが適用されます。

まとめ

ざっと3種類の方法を見てきてそれぞれの特徴が分かったと思います。
基本的には外部ファイルの読み込みですが、場面で使い分けれると便利だと思いますよ!

  • Webサイト制作ではHTMLのタグをCSSで指定してスタイルを適用させる
  • CSSの読み込む方法は「HTMLタグに直接」、「HTMLファイル内にまとめて」、「外部ファイルで読み込む」の3種類がある
  • B!
HTMLでCSSを読み込む3種類の方法
いろは
Webのいろは

Relate Post

  • <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
    <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
  • Web(ウェブ)の意味と役割
    Web(ウェブ)の意味と役割
  • !DOCTYPE|文書型宣言の使い方と種類・役割
    !DOCTYPE|文書型宣言の使い方と種類・役割
  • Webページの構造をブロックごとに見てみよう!
    Webページの構造をブロックごとに見てみよう!

アーカイブ

  • 2018年5月
  • 2018年4月

新着記事

  • <dl>・<dt>・<dd> | 説明リストの意味と使い方・記述方法
    2018-05-12
    <dl>・<dt>・<dd> | 説明リストの意味と使い方・記述方法
  • <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
    2018-05-11
    <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
  • <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
    2018-05-04
    <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
  • <ul>・<ol>・<li> | リスト表示(箇条書き)の使い方・記述方法
    2018-04-30
    <ul>・<ol>・<li> | リスト表示(箇条書き)の使い方・記述方法
  • <h1>~<h6> | 見出しの使い方・記述方法
    2018-04-30
    <h1>~<h6> | 見出しの使い方・記述方法
Webのいろは
  • Webのいろは の利用規約
  • お問い合わせ

Copyright © 2023 Webのいろは All Rights Reserved.