基礎から学ぶ!HTMLにCSSを適用(読み込み)させる方法【初心者向け】

初心者向けにHTMLにCSSを適用させる方法について解説しています。Webサイトを作っていく上でHTMLとCSSは必ず使います。その中でCSSを扱う方法について詳しく説明しているので、ぜひ使えるようにしておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。そんな時に必要になってくるのがCSSです。HTMLでCSSを読み込むためには、二つの方法があります。今回は、その方法について解説していきたいと思います。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

目次

CSSの読み込み方(適用方法)

HTMLでCSSを読み込むためには、次の二つの方法があります。

  • 外部CSSファイルをHTMLから読み込む方法
  • HTMLファイル内に直接CSSを記述する方法

 

1.外部CSSファイルを読み込む方法

外部CSSファイルを読み込む方法は、Webデザインの現場で一般的に使用されている方法です。事前に拡張子が「.css」のファイルを用意し、HTMLに以下のタグを記述します。

<link rel="stylesheet" href="sample.css">

HTMLファイルに上記のコードを1行追加することで、sample.cssという名称のファイルに記述されたCSS定義をHTMLに適用することができます。また、この1行をHTMLファイルのどこに記述するかという点についてですが、場所はHTMLファイルの<head>タグ内に記述します。

以下のようにHTMLファイルに記述しましょう。

HTML

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="sample.css">
    <title>HelloTechAcademy</title>
  </head>
  <body>
    <p>ここにHTMLの文章などが入ります</p>
  </body>
</html>

ここで、CSSファイル読み込み処理のhrefの値は、HTMLファイルとCSSファイルの配置場所によって変化するので気を付けましょう。上記サンプルの場合は、HTMLファイルとCSSファイルは同じディレクトリに配置する必要があります。

また、HTMLファイルと同じディレクトリにcssというフォルダがあり、その中にsample.cssというファイルが配置されている場合、CSSファイル読み込み処理は以下のように記述します。

<link rel="stylesheet" href="css/sample.css">

2.HTMLファイル内に直接CSSを記述する方法

HTMLファイル内に直接CSSを記述する方法は、一般的にはほとんど使う機会の無い方法ですが、このような適用のさせ方もあります。まず、以下のようにCSS定義を<style>タグの中に記述します。

<style type="text/css"> p { color : red; } </style>

用意した<style>タグは、HTMLファイルの<head>内に以下のように記述します。

HTML

<html>
  <head>
    <meta charset="UTF-8">
    <style type="text/css">p { color : red; }</style> 
    <title>HelloTechAcademy</title>
  </head>
  <body>
    <p>こんにちは</p>
  </body>
</html>

この場合、pタグにcolor:redのスタイルが適用され、画面には赤い文字で「こんにちは」と表示されます。

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

CSSが読み込めない場合の解決方法

実際に自分でHTMLファイルとCSSファイルを用意して動作確認すると、想定通りにCSSが適用されずにハマった!という方も多いと思います。ここでは、よくある失敗パターンと解決方法を解説しておきますので、ぜひ参考にしてください。

1.CSS定義が間違っている場合

HTMLからCSSファイルが読み込めていても、CSS定義が間違っている場合、画面表示に意図したCSSが適用されていない、といった結果になります。テスト用に簡単で確実なサンプルCSS定義を1つ用意して、まずは記述ミスがないか確認しましょう。

HTML側のid名やclass名と、CSS定義におけるセレクタ文字列がスペルミスにより一致していなかった・・・というケースもよくあります。

2.CSSファイルが読み込めない場合

CSSファイルが読み込めないこともよくあるパターンの1つです。開発環境によってはCSSファイルの読み込みに成功するまでにひと苦労することも多いです。Cloud9上で開発する場合は、まずはHTMLファイルとCSSファイルをプロジェクトフォルダ直下に配置することで、簡単にCSSファイルの読み込みが成功します。

また、ファイル数が多くなり、どうしてもHTMLファイルとCSSファイルをそれぞれ別フォルダ内に配置したい場合は、以下を参考にしてください。

ディレクトリ構成の例

こちらは、CSS_sampleProjectというプロジェクトフォルダ直下にそれぞれ、cssとhtmlというフォルダがあり、その中にファイルを配置している例です。このような場合、HTMLファイルに次のような記述をすることで、CSSファイルの読み込みが成功します。

CSS読み込みタグの記述例

<link rel="stylesheet" href="./../css/sample.css">

hrefの値として指定した「 ./ 」により、ディレクトリの基準が現在配置されているHTMLファイルの場所になります。また、「 ../ 」の指定で、ディレクトリが1階層上がり、そこから「 css 」フォルダにアクセスすることができています。

一般的に「 ./ 」を利用したカレントディレクトリ指定によるアクセスは好まれませんが、Cloud9の場合にはこちらが有効な解決方法となります。別途、JavaやPHP環境をベースにしている場合には、フレームワークごとにCSSファイルの配置場所や読み込み指定方式が定められていることも多いので、環境に応じたファイル読み込み仕様を調べて対応していきましょう。

 

大石ゆかり
「 ./ 」という見慣れないパス指定文字列がありますね。
田島悠介
Linuxでディレクトリを移動する時によく使う記号なんだ。

 

実際に書いてみよう

今回は、CSSで本格的なデザイン定義を始める前の動作確認用プログラムをご紹介します。

CSSは、次の3通りのセレクタ指定方式を使うことができますので、サンプルプログラムでも3通りの指定方式を用意して、動作確認していきます。

  • タイプセレクタ
  • classセレクタ
  • idセレクタ

各セレクタの特徴はこちらの一覧表の通りです。

まずは、HTMLファイルを用意します。

pタグと、idやclassを付与したテキストボックスを用意します。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HelloTechAcademy</title>
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
    <p>Hello TechAcademy !</p>
    <input type="text" id="textBox" value="こんにちは">
    <input type="text" class="sample-text" value="こんばんは">
  </body>
</html>

CSS ( sample.css )

/* タイプセレクタ。pタグ全てに適用される */
p {
  color : brown;
}

/* idセレクタ。指定idを持つタグに適用される */
#textBox {
  font-size : 20px;
}

/* classセレクタ。class名が一致するタグに適用 */
.sample-text {
  background-color : green;
  color : #fff;  /* 白 */
}

HTMLファイルとCSS定義が用意できたら、画面表示を確認しましょう。

実行結果(画面表示)

3通りのCSSセレクタにより、それぞれ3つの異なるHTML要素にデザインが適用できました。動作確認する場合、文字の色を変えるCSSが一番簡単で結果を確認しやすいでしょう。

まとめ

今回はCSSをHTMLに適用する方法をご紹介しました。外部ファイルをうまく読み込めること、CSSセレクタを間違わずに記述できることがポイントです。

Webデザインを始める前の事前準備として必須の知識ですので、ぜひマスターしておきましょう。

執筆してくれたメンター

寺谷文宏(Teratani Fumihiro)

Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。

TechAcademyではフロントエンド、Javaコースを担当。

 

大石ゆかり

うまく適用できないと思ったら、「#」をつけ忘れていました。

田島悠介

idの場合は「#」、classの場合は「.」を付与するんだ。

大石ゆかり

よくわかりました。これで自分でもCSSを書いていけそうです。

田島悠介

CSSは自分でいろいろ試してみると、上達が早いよ。

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。