2020年8月のブログ収益が過去最高(6桁)を記録しました。ありがとうございます。

【CSSはどこに書くの?】書き方は3パターン|それぞれの書き方を解説します

【CSSはどこに書くの?】書き方は3パターン|それぞれの書き方を解説します

さて、HTMLでどウェブサイトの土台は作ったし、ここからはCSSでバリバリカスタマイズするぞー!

あれ?ちょっと待てよ…

CSSってどこに書けばいいの…??

 

上記のお悩みを解決するために、本記事ではCSSの書き方をイチから解説します。

結論から言ってCSSを書く方法は3パターンのみです。そして、どの方法を使ってもカスタマイズ後のデザインに違いは出ません

 

じゃあ、なんで3パターンも書き方があるの?

仮に3パターンあったとしても、一つだけ覚えておけばいいんじゃない?

 

そう思いますよね?

 

ところが、3パターンの特徴を理解しておくと、どういう時にどの書き方をすればいいのかがわかるので、作業の効率化が図れます。

それぞれの書き方を理解して、作業しやすい方法を見つけましょう。

 

本題に入る前に

本題に入る前に、ちょっとだけおさらいです。

 

  • HTMLがWebサイトの土台を作る
  • CSSでHTMLをカスタマイズする
  • HTMLだけだとウェブサイトの見た目はシンプルなまま
  • HTMLとCSSだけで美しいウェブサイトは作れる

 

でしたね。

このあたりを理解していないと、本記事で解説する内容は少し難しいので、まずは下記ふたつの記事から読み進めてください。

 

> 最初に読む記事:HTML入門の手引き:基本の書き方とタグの使い方【初心者向けに基礎知識をガッツリ解説】

> 次に読む記事:CSS入門の手引き:スタイルシートの基本的な書き方【初心者向けに基礎知識をガッツリ解説】

 

スポンサードサーチ

 

CSSの書き方を理解しよう:パターンは3つだけ

CSSの書き方を理解しよう:パターンは3つだけ

ここからが本題です。

CSS入門の手引き:スタイルシートの基本的な書き方【初心者向けに基礎知識をガッツリ解説】」の中でも少し触れましたが、CSSを書く方法には3パターンあります。

それぞれに特徴があり、カスタマイズの場面によって使い分けることで、作業を効率化してくれるので、3つの方法を理解し、全てを使いこなせるようにすることが重要です。

パターンによってCSSコードの書き方が変わったり、カスタマイズ内容に影響が出たりすることはありませんのでご安心ください。

 

CSSの書き方3パターンは下記の通り。

これ以上でも以下でもありませんので、この3つだけを覚えればOKです。

 

CSSを書く方法:3パターン

その①:CSSファイルを作ってHTMLに読み込ませる

その②:HTMLファイル内に記載して <styleタグ> で囲む

その③:HTMLタグそれぞれの中に追記する(インライン)

 

それぞれを詳しく見ていきます。

 

その①:CSSファイルを作ってHTMLに読み込ませる

最も一般的なのが、HTMLファイル外に独立したCSSファイルを作って、HTMLファイルで読み込む方法です。

文字通りCSSファイルを別に作り、HTMLファイルから読み込む方法でして、この方法で作成したCSSファイルは外部スタイルシート(外部CSS)と呼ばれます。

結果として、①HTMLファイル + ②CSSファイルのふたつのファイルを作ることになります。

 

外部CSSファイル作成の手順:HTMLで読み込むまで

外部CSSを書いて、HTMLで読み込むまでの手順は下記の3つです。

 

外部CSS + HTML で表示するための3ステップ

手順①:テキストエディターでCSSを書く

手順②:HTMLファイルに外部CSS(手順①で作ったもの)を読み込むコードを書く

手順③:①と②のファイルをサーバーに保存する

 


 

外部CSSを作ってHTMLで読み込む方法を、実際に手順を追って解説します。

 

手順①:テキストエディターでCSSを書く

まずはテキストエディターを開いてCSSを書きましょう。

テキストエディターはなんでも構いませんが、おすすめは「Sublime Text(サブライムテキスト)」です。無料ダウンロードの方法と基本的な使い方は「【無料でHTMLとCSSを勉強する】学習に必要なツールを揃えよう【2つだけ】」で解説していますのでご参照ください。

 

テクストエディターを開いたら、さっそくCSSを書いていきます。

下記にサンプルCSSを用意しましたので、実際に手を動かしてみたい方はコピペしていただいてもOKです。その際、読み込み先のHTMLは「CSS入門の手引き:スタイルシートの基本的な書き方【初心者向けに基礎知識をガッツリ解説】」内のサンプルHTMLコードをご使用ください。

 

外部CSSサンプル
@charset "UTF-8";
body {
    /*ページの背景をみず色に*/
    background-color: #C8E4FF;
    /*文字をセンター揃えに*/
    text-align: center;
     }
h1 {
    /* h1タグの文字色を変える */
    color: #738BFF;
     }
#headline {
    /* ヘッドラインの下に点線を引く */
    border-bottom: dotted #738BFF 3px
     }
h2 {
    /* h2タグの文字色を白に */
    color: white;
     }
.main p {
    /* class名 mainの中の段落の文字を1.2倍に */
    font-size: 1.2em;
     }
.main a {
    /* リンクを赤に */
    color: red;

 

ここがPOINT
上記のサンプルCSSコード1行目に注目してください。

外部CSSを書いてHTMLファイルで読み込む場合は、コードの文字化けを防ぐために @charset “UTF-8”; と記載する必要があります

忘れずに毎回記載するようにしましょう。

 

上記のCSSファイルを拡張子(.css)で保存したら、外部CSSファイルの準備は完了です。

 

手順②:HTMLファイルに外部CSSを読み込むコードを書く

続いて、HTMLファイルにはCSSを読み込むための1行を追記します。

<headタグ> 内に下記のコードを追記してください。

 

CSS読み込み用のHTML追記コード
<link rel="stylesheet" href="ファイル名.css">

 

ファイル名のところを、先ほどのCSSファイル保存名に置き換えればOK。

 

手順③:①と②のファイルをサーバーに保存する

手順①・手順②で、それぞれ外部CSS、HTMLの2つのファイルが準備できたので、両ファイルをサーバーにアップロードします。

このとき、保存する場所は同じ階層(同じディレクトリ、またはフォルダ)にする必要があるので注意しましょう。

 

これでHTMLファイルに外部CSSが反映されるようになります。

 

外部CSS + HTMLで読み込むメリット

外部CSSファイルを作って、HTMLで読み込む方法には大きなメリットがあります。

 

メリット:ひとつのCSSで複数HTMLに反映できる

 

上記の通り。

たくさんのページが必要になるウェブサイトでは、ひとつひとつのHTMLにそれぞれCSSを書いていたら大変ですよね。

コピペするにしても、修正したい場合は全てのHTMLファイルにあるCSSセクションを書き換えなければなりませんし、とにかくいいことがありません。

しかし「外部CSS + HTML」を活用すれば、複数ページをまとめてカスタマイズできるので、共通デザインをまとめて変える時に一瞬で作業を終わらせることができます。

 

イメージにすると下記のような感じですね。

外部CSS + HTMLで読み込むメリット

 

ひとつのCSSファイルで同じカスタマイズを複数ページに反映することができるので、デザインの調整をしたいときは「赤いCSSファイル」のみを修正すればいいわけです。

これで、4つのHTMLファイルがまとめて書き換えられます。

 

外部CSS + HTMLのポイント

外部CSSファイルを作って、HTMLファイルで読み込む方法を取るときのポイントは下記の通りです。

 

  • 1ページだけ別のCSSカスタマイズを加えたいときは、もう一つCSSファイルを作る or HTMLファイル内にCSSを記載する
  • 複数のCSSファイルを読み込みたいときはHTMLファイルの<head タグ>にコードを追記する
  • 外部CSSファイルから別のCSSファイルを読み込むこともできる

 

上記の通りでして、こちらもひとつずつ解説します。

 

1ページだけ別のCSSファイルを読み込みたい

サイトをデザインしていると、ある特定のページだけ少しデザインを変えたいという場面が訪れます。

とはいえ、そのCSSで複数ページをカスタマイズしている場合、1ページだけのデザインを気軽に変更することはできません。

そんなときは、特別なカスタマイズをしたいページ専用に新たなCSSファイルを作るか、そのHTMLファイルの<headタグ>にCSSコードを記載すれば、そちらが優先して読み込まれるようになります。

 

複数の外部CSSファイルを読み込みたい

複数の外部CSSファイルを読み込みたいときは、HTMLファイルの<headタグ>に  <link rel="stylesheet" href="ファイル名"> をもう一つ書き足すだけ。簡単ですね。

 

たとえばこんな感じです。

 

複数のCSSを読み込みたいとき
<link rel="stylesheet" href="ファイル名.css">
<link rel="stylesheet" href="別のファイル名.css">

 

外部CSSファイルから別のCSSを読み込む

また、最初のうちはあまり機会がないかもしれませんが、外部CSSファイルから別のCSSを読み込むことも可能でして、その場合は「@charset "UTF-8";」の後ろに下記のコードを挿入します。

 

@import url("別のCSSファイル名.css");

 

たとえばこんな感じ。

 

外部CSSで別のCSSを読み込みたいとき
@charset "UTF-8";
@import url("another.css");

 

スポンサードサーチ

 

その②:HTMLファイル内に記載して <styleタグ> で囲む

CSSでHTMLをカスタマイズする方法、その②は「HTMLファイルの<headタグ>内に<style>〜〜</style>でCSSを書く」方法です。

 

HTMLファイルの<headタグ>に記載する手順:<styleタグ>の設置から閉じ方まで

こちらの方法は「CSS入門の手引き:スタイルシートの基本的な書き方【初心者向けに基礎知識をガッツリ解説】」で例に出して書き方を解説したので、サクッといきます。

詳しい書き方の解説は上記のリンクからご確認ください。

 

HTMLファイル内に書くための3ステップ

手順①:HTMLファイル内の<headタグ>を見つける

手順②:<headタグ>の中に<styleタグ>を作る

手順③:<styleタグ>の中にCSSを書く

 

HTMLファイルのheadタグ内に書くメリット

外部CSSのパートでも少し触れましたが、HTMLファイル内に直接CSSを書いてカスタマイズする方法は「このページだけデザインを変えたい」というときには最適です。

というのも、そこに書いたCSSは、そのHTMLファイル内にしか適用されないため、そのページに特化したCSSを書くことができるからです。

 

HTMLファイルのheadタグ内に書くデメリット

しかし、上記のメリットはデメリットにもなり得ます。

この方法では、他のHTMLファイルからそのSCCを読み込むことはできないので、複数のページに適用したいCSSはこの方法で書くべきではありません。

逆に、HTMLファイルに直接CSSを記載する方法しか知らないと、全ページ分のカスタマイズが大変な手間になってしまいます。

 

HTMLファイルのheadタグ内に書くときのポイント

HTMLの<headタグ>にCSSを記載する方法を効果的に使うには、全記事共通CSS(方法1)との組み合わせをおすすめします。

基本的に、外部CSSで全ページをカスタマイズしつつ、特定のページで特定のデザインを加えたい場合のみに、HTMLの<headタグ>に、優先して読み込ませたいカスタマイズを記載します。

これで共通部分は外部CSSから、特定部分を<headタグ>内からのカスタマイズを読み込んだページを作れるようになります。

 

スポンサードサーチ

 

その③:HTMLタグそれぞれの中に追記する(インライン)

CSSの書き方、3つ目はHTMLのタグの中に、スタイル属性と呼ばれるCSSを書く方法です。

インラインにCSSを記載するこの方法は、文字に色をつけたりするような簡単なカスタマイズに適していますが、後々の編集に手間が掛かるのがデメリットと言えます。

 

インラインでCSSを書く手順:タグへの追記方法

HTMLタグの中にスタイル属性CSSを書くときは、<タグ名 style="ここにCSSを書く"> のようになります。

HTMLタグに関しては「HTML入門の手引き:基本の書き方とタグの使い方【初心者向けに基礎知識をガッツリ解説】」で解説しているので、本記事では詳しく説明しませんが、基本的にどんなHTMLタグにもこのスタイル属性CSSを追記することができます。

 

HTMLタグにスタイル属性CSSを書く方法

下記のようにHTMLのみで文章書いた場合は、シンプルな見た目になりますよね。

HTMLのみの場合
<h1>大見出し</h1>
<p>これはpタグで囲まれた段落です。</p>

HTMLタグにスタイル属性CSSを書く方法

 

このHTMLをインラインCSSでカスタマイズしたいときは、それぞれの開始タグ(h1、p)にCSSコードを記載するだけです。下記参照。

 

インラインCSSでカスタマイズした場合
<h1 style="color: red; border-left: solid 2px blue">大見出し</h1>
<p style="color: red; font-size: 20px">これはpタグで囲まれた段落です。</p>
<p>これもpタグですがカスタマイズしていません。</P>

HTMLタグにスタイル属性CSSを書く方法_2

 

同じ<pタグ>でも、CSSコードの記載がないものはカスタマイズされていませんね。

このように、インラインでCSSを記載する場合は、カスタマイズしたいHTMLタグ内に直接CSSを記入することで、ピンポイントにデザインを編集することができます。

 

インラインCSSのメリット・デメリット

インラインでCSSを書くときのメリット・デメリットは次の通り。

 

メリット:外部CSSを触る必要がないので、「一部のデザインを変えたいとき」は作業が楽チン。

デメリット:その反面、一部にしか反映されないので、まとめてカスタマイズしたいときは面倒。

 

こんな感じですね。

 

スポンサードサーチ

CSSの書き方3つ:適用される順番は?

CSSの書き方3つ:適用される順番は?

本記事で解説した3つのCSS記載方法には、適用される優先順位があります。

 

3つのCSS:読み込まれる順番

優先順位①:HTMLタグそれぞれの中に追記する(インライン)

優先順位②:HTMLファイル内に記載して <styleタグ> で囲む

優先順位③:CSSファイルを作ってHTMLに読み込ませる

 

 

上記の通りでして、HTMLタグに近い方から順番に読み込まれていきます

なので、外部CSSで共通カスタマイズをしつつ、特別なデザインを施したいところには直接CSSを記載してカスタマイズすることができるというわけですね。

 

スポンサードサーチ

 

 

まとめ:CSSの記述方法3つ

まとめ-1

ということで、本記事のまとめです。

 

CSSを書くパターンは3つ

方法①:CSSファイルを作ってHTMLに読み込ませる【外部CSS】

方法②:HTMLファイルのheadタグ内に記載する【styleタグ】

方法③:HTMLタグそれぞれの中に追記する【インライン】

CSSの読み込み優先順位は ”HTMLタグに近い順”

優先順位①:インライン

優先順位②:styleタグ

優先順位③:外部CSS

おすすめのカスタマイズ方法

外部CSSでカスタマイズを全体に施し、特別なカスタマイズをしたい時にだけ <styleタグ> やインラインを使う。

 

こんな感じです。

それぞれのCSS記述方法で特徴を覚えて、状況に合わせた使い方ができるようにしましょう。

 

おわり。