基礎から学ぶ！HTMLにCSSを適用（読み込み）させる方法【初心者向け】
初心者向けにHTMLにCSSを適用させる方法について解説しています。Webサイトを作っていく上でHTMLとCSSは必ず使います。その中でCSSを扱う方法について詳しく説明しているので、ぜひ使えるようにしておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。
そんな時に必要になってくるのがCSSです。
HTMLでCSSを読み込むためには、2つの方法があります。
今回は、その方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
HTMLにCSSを適用（読み込み）させる方法について詳しく説明していくね！
お願いします！
CSSの読み込み方（適用方法）
HTMLでCSSを読み込むためには、次の2つの方法があります。
- 外部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のスタイルが適用され、画面には赤い文字で「こんにちは」と表示されます。
CSSが読み込めない場合の解決方法
実際に自分でHTMLファイルとCSSファイルを用意して動作確認すると、想定通りにCSSが適用されずにハマった！という方も多いと思います。
ここでは、よくある失敗パターンと解決方法を解説しておきますので、ぜひ参考にしてください。
1．CSS定義が間違っている場合
HTMLからCSSファイルが読み込めていても、CSS定義が間違っている場合、画面表示に意図したCSSが適用されていない、といった結果になります。
テスト用に簡単で確実なサンプルCSS定義を1つ用意して、まずは記述ミスがないか確認しましょう。
HTML側のid名やclass名と、CSS定義におけるセレクタ文字列がスペルミスにより一致していなかった・・・というケースもよくあります。
２．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ファイルの配置場所や読み込み指定方式が定められていることも多いので、環境に応じたファイル読み込み仕様を調べて対応していきましょう。
実際に書いてみよう
今回は、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セレクタにより、それぞれ３つの異なるHTML要素にデザインが適用できました。
動作確認する場合、文字の色を変えるCSSが一番簡単で結果を確認しやすいでしょう。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
今回はCSSをHTMLに適用する方法をご紹介しました。
外部ファイルをうまく読み込めること、CSSセレクタを間違わずに記述できることがポイントです。
Webデザインを始める前の事前準備として必須の知識ですので、ぜひマスターしておきましょう。
執筆してくれたメンター
| 寺谷文宏（Teratani Fumihiro）
Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 テックアカデミーではフロントエンド、Javaコースを担当。 |
うまく適用できないと思ったら、「#」をつけ忘れていました。
idの場合は「#」、classの場合は「.」を付与するんだ。
よくわかりました。これで自分でもCSSを書いていけそうです。
CSSは自分でいろいろ試してみると、上達が早いよ。
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
