Webのいろは
MENU
検索結果
  • Webデザイン
  • HTML
  • CSS
  • 【CSS】width・height|幅と高さを指定する方法を解説
    2018-08-26
    【CSS】width・height|幅と高さを指定する方法を解説
  • 【HTML】blockquote・q・site | 引用の使い方を解説
    2018-07-28
    【HTML】blockquote・q・site | 引用の使い方を解説
  • 【HTML】<p>|正しい段落の使い方・指定方法を解説
    2018-07-22
    【HTML】<p>|正しい段落の使い方・指定方法を解説
  • 5Gって何?2020年の実用化でどう変わるのか?
    2018-07-21
    5Gって何?2020年の実用化でどう変わるのか?
  • 【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説
    2018-06-24
    【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説
  • 【CSSのみ】全画面オーバーレイ検索フォームの作り方
    2018-06-12
    【CSSのみ】全画面オーバーレイ検索フォームの作り方
  • 【HTML】table・tr・th・td | 表の作り方・使い方を解説
    2018-06-06
    【HTML】table・tr・th・td | 表の作り方・使い方を解説
検索結果
  • HOME
  • >
  • Webデザイン
  • >
  • CSS

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

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

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

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

MENU

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

HTMLとCSSの関係

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

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

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

HTML
<p>見出しテキスト</p>
CSS
p{
  colorblue;
}
実行結果

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

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

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

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

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

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

タグ内にstyle属性を使って直接CSSを記述

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

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

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

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

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

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

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

styleタグを使って、その中にCSSを記述

こちらのやり方はタグにではなく、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ファイルと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

  • 【CSS】list-style-typeでリストマーカーの変更方法
    【CSS】list-style-typeでリストマーカーの変更方法
  • 【CSS】width・height|幅と高さを指定する方法を解説
    【CSS】width・height|幅と高さを指定する方法を解説
  • 【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説
    【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説
  • 【CSS】marginとpaddingで余白を指定
    【CSS】marginとpaddingで余白を指定
検索結果

カテゴリー

  • Blog
  • Webデザイン
    • CSS
    • HTML
    • WordPress
  • テクノロジー
    • Techニュース

NEW POSTS

  • 【CSS】width・height|幅と高さを指定する方法を解説
    2018-08-26
    【CSS】width・height|幅と高さを指定する方法を解説
  • 【HTML】blockquote・q・site | 引用の使い方を解説
    2018-07-28
    【HTML】blockquote・q・site | 引用の使い方を解説
  • 【HTML】<p>|正しい段落の使い方・指定方法を解説
    2018-07-22
    【HTML】<p>|正しい段落の使い方・指定方法を解説
  • 5Gって何?2020年の実用化でどう変わるのか?
    2018-07-21
    5Gって何?2020年の実用化でどう変わるのか?
  • 【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説
    2018-06-24
    【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説

カテゴリー

  • Blog
  • CSS
  • HTML
  • Techニュース
  • Webデザイン
  • WordPress
  • テクノロジー

ARCHIVE

  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月

SEARCH

検索結果
Webのいろは
  • ホーム
  • 利用規約
  • お問い合わせ

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