CSSの記述場所 – CSSはどこに書けばいいのか?【初心者向け】

CSS(スタイルシート)はどこに書けばいいの?そんな疑問を解決できる初心者向けの記事です。CSSの記述場所は3種類あります。styleタグ、インライン、外部ファイルの3つですので、それぞれ書き方を解説します。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

今回は、CSSの記述場所に関する解説を行います。

そもそも、CSSはどこに書けばいいのか?そんな疑問をお持ちのCSS初心者の方は多いと思います。

実は、CSSを実装する場所はいくつかあります。

この記事を通じて、実務でも利用できるCSSの実装位置を習得して頂き、実践的な知識をつけてみてくださいね。

目次

 

【動画でも解説しています。クリックで見る!】

 

田島悠介

ここではCSSをどこに書くかということについて説明するよ。

大石ゆかり

田島メンター!!

CSSを書く場所というのはどのように決まっているんでしょうか~?

田島悠介

styleタグに書く方法・インラインに書く方法・外部ファイルに書く方法と3通りあるんだ。

それぞれの書き方を見てみよう。

大石ゆかり

はい!

 

CSSを書く3つの場所

CSSを書く場所は、ズバリ、以下の3つです。

それぞれに応じて、書く場所も変わってきます。

 

 

それでは、下記のHTMLファイルをもとに、ひとつずつ見ていきましょう。

<!DOCTYPE html>
<html lang=“ja”>
<head>
    <meta charset=“UFT-8”>
    <title>CSS</title>
</head>
<body>
    <h1>CSS入門</h1>
    <p>はじめてのCSS</p>
</body>
</html>

 

 

これをデスクトップに「a.html」の名前で保存し、ブラウザで読み込んだものが次の画面です。

1HTMLのみブラウザ

ここにCSSを使ってスタイルを施していきます。

 

田島悠介

今回はこの例で、それぞれの記述方法を見てみよう。

大石ゆかり

h1の見出しと、pの段落がひとつずつある状態ですね。

田島悠介

この文書の文字の色や大きさを指定していくよ。

まずはstyleタグに書く方法からだね。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

styleタグに書く

まず、<style> を <head> のなかに書きます。

そこで指定していくことで、<body>にスタイルを適応させます。

 

HTML

<!DOCTYPE html>
<html lang=“ja”>
    <head>
        <meta charset=“UTF-8”>
        <title>CSS</title>
        <style>
            h1 {color: red; }
        </style>
    </head>
    <body>
        <h1>CSS入門</h1>
        <p>はじめてのCSS</p>
    </body>
</html>

 

解説

head要素にある次のコードでCSSを指定しています。

意味は、h1要素を赤色にするという指定です。

<style>
    h1 {color: red; }
</style>

 

表示結果

2styleタグ

 

実行結果

インラインに書く

次にインラインに書く方法です。

インラインに書くときは、タグに直接、属性としてスタイルを指定します。

 

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style>
            h1 {color: red; }
        </style>
    </head>
    <body>
        <h1>CSS入門</h1>
        <p style="color: blue;">はじめてのCSS</p>
    </body>
</html>

 

解説

h1のCSS入門に関してはこれまで通りhead要素で指定した結果赤色表示になっています。

html内の次のコードではhtml内のp要素内にCSSも指定しています。

この実装方法をインラインと呼びます。

今回は、はじめてのCSSという文字が青色になります。

<p style="color: blue;">はじめてのCSS</p>

 

 

表示結果

3インライン

 

実行結果

外部ファイルに書く

最後に、外部ファイルに書く方法です。

これは、HTMLファイルに書き込むのではなく、違うファイルにCSSを書き、リンクで読み込むというものです。

実務で実装する際はこの方法が一般的です。

 

まずは、新規でファイルを作成してください。

たとえば、フォントサイズを大きくしたい場合、次のように書きます。

style.css

h1{
    font-size:40px;
}

 

4外部ファイル

 

 

そしてファイルに拡張子「.css」を入れた名前を付けて保存します。(ここでは「style.css」としました)

ここで注意点ですが、保存するときは、さきほどのHTMLファイルと同じ階層に保存するようにしましょう。

5保存

 

 

次に、このCSSファイルを、先ほどのHTMLファイルの<style>内に紐付けます。

このとき使うのを「link」タグといい、特定のファイルを紐付けることができる性質を持ちます。

<link rel=“stylesheet” href=“style.css”>

 

relは読み込むファイル、hrefは、relで読み込むファイルがどこにあるものかを指定します。

これで、「style.css」のスタイルシートを読み込むという意味になります。

 

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style>
        h1 {color: red; }
        </style>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>CSS入門</h1>
        <p style="color: blue;">はじめてのCSS</p>
    </body>
</html>

 

これを保存し、ブラウザで読み込みなおすと、別ファイルで書いたスタイルが適応されるはずです。

 

 

6外部

指定通り、h1の文字が40pxのサイズに大きくなりました。

 

 

動作確認

 

今回の記事は以上です。

自分でも手を動かしながらCSSを書いてみましょう。

 

この記事を監修してくれた方

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長開発実績:PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。

 

CSSについてさらに詳しく知りたい場合は、CSSを記述する際の優先順位の記事もあるので合わせてご覧ください。

 

田島悠介

それぞれの適用方法はこんな感じだね。

大石ゆかり

この中だと、外部ファイルが一番編集しやすいように感じますね。

田島悠介

そうだね。

基本的にCSSは外部ファイルから適用させる方法が多く使われているよ。

まずはこの手順で練習してみよう。

大石ゆかり

分かりました。

ありがとうございます!

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。