プログラミング・ITCSS

Blog Article

CSSの適用方法やファイルの読み込み方をわかりやすく解説

こんにちは、Mochiです。

CSSを適用するにはどうすればいいんだろう?CSSファイルってどうやって読み込むんだっけ?🤔

そんな方々に向けてCSSの適用方法やファイルの読み込み方をわかりやすく解説します。学んでいきましょう!

✍️CSSの3つの適用方法

CSSの適用方法は主に3つあります。
3種類のcss適用方法

  1. インラインCSS:直接書き込む
  2. インターナルCSS:まとめて書き込む
  3. エクスターナルCSS:別ファイルに書き込む

それぞれについて解説し、結局どれを使えば良いのかを説明します。

インラインCSS:直接書き込む

1つ目の方法は、インラインCSSです。インラインCSSとはHTML要素に直接CSSを書き込む方法です。書き込み方のルールは

<tag sytle="property: value">Text</tag>

のようになります。直接指定するため、セレクターはいらないです。

例えば見出しを青色にしたい場合は

<h1 sytle="color: blue">Mochi Blog</h1>

というふうに書きます。
見出しの色を青色にした例

ただし、このインラインCSSは使わないほうがいいです。CSSを直接書いてしまうと後で変更する際に大変になります。例えば、1000行あるコードのうち、700番目のコードを探してCSSを書き換えるということを毎度やるのは大変です。

では、次の方法を見てみましょう。

インターナルCSS:まとめて書き込む

2つ目の方法は、インターナルCSSです。インターナルCSSとはHTMLのhead要素の中にまとめてCSSを書く方法です。書き方のルールは

<head>
    <style>
        selector {
            property: value;
        }
    </style>
</head>

のようになります。

head要素ってなんだっけ?🤔という方は記事「HTMLの基本的な構造をわかりやすく解説」を読むと内容を理解しやすくなるのでおすすめです。

例えば見出し2を紫色にする場合は

<head>
    <style>
        h2 {
            color:blueviolet;
        }
    </style>
</head>

<body>
	<h2>Mochi Blogはスキルアップのブログ</h2>
</body>

のように書きます。
見出し2の色を紫色にした例

ただし、インターナルCSSも使わないほうが良いです。その理由はたくさんのCSSコードがあるとHTMLが見辛くなるためです。例えば200行のCSSコードを書いた場合、HTMLを見るには毎回200行分スクロールする必要があり、大変です。

また、インターナルCSSで書いたCSSは書き込んだHTMLファイルのみに有効で、他のHTMLには適用できません。そのため、同じ装飾を他のHTMLファイルにしたいときは、再度書いたり細かいコピペが必要になってしまいます。

では、どうすれば良いのでしょうか?最後の方法を見ていきましょう。

エクスターナルCSS:別ファイルに書き込む

3つ目の方法は、エクスターナルCSSです。エクスターナルCSSはCSSを別のファイルに書き込み、HTMLファイルでその別のCSSファイルを読み込む方法です。
エクスターナルCSSのイメージ図
2つのステップ

  1. CSSファイルを作り、書き込む
  2. CSSファイルを読み込む

に分けて説明します。

CSSファイルを作り、書き込む
CSSファイルは”css”という拡張子をつけることで作成できます。例えば”style.css”という名前のファイルを作成すれば、そのファイルがCSSファイルになります。フォルダはどこでも良いのですが、CSSファイルだけを入れたフォルダがあるとわかりやすくて良いです。

CSSファイル内の書き方は、基本に則ったシンプルな方法で

selector {
property: value;
}

のように書きます。

例えば、段落の文字の色を紫色にしたい場合は

p {
    color: blueviolet;
}

のように書きます。

ただ、これだけでは文字の色は変わりません。これはHTMLファイルにCSSファイルの存在を教えてあげていないためです。そこで次のステップに移りましょう。

CSSファイルを読み込む
適用するCSSファイルを教えてあげるためのコードを、HTMLファイルへ書き込みます。書き込み方のルールは

<head>
    <link href="path.css" rel="stylesheet" />
</head>

のようになります。

href属性には適用するCSSファイルまでのパスを与えます。フォルダの中に入れている場合は、フォルダまでのパスも含める必要があるため、”folderName/style.css”のようなパスになります。

rel属性にはスタイルシートであることを伝えるために”stylesheet”を入れます。

例えば、先ほど段落の文字の色を紫色にしたCSSファイル”apply.css”を読み込むには

<head>
    <link rel="stylesheet" href="apply.css">
</head>

のように書きます。これによりCSSファイルが適用され、色が変わります。
段落の文字を紫色にした例

ここでの注意点は<link>タグはページのリンクとは関係ないです。<link>タグはHTMLとCSSを繋ぐためのタグです。ページのリンクを作成するHTML要素には<a>タグを使います。

<a>タグってなんだっけ?🤔という方は記事「HTMLでリンクを作成するaタグについて分かりやすく解説」を読むと理解が深まるため、おすすめです。

CSSを適用する方法には、このエクスターナルCSSを使いましょう。この方法は一般的に使われています。理由は1つのファイルを作成するだけで、複数のHTMLファイルに適用できるためです。また、修正も複数のファイルに行き来することなく、一括で行えます。ですので、今後はエクスターナルCSSを使うのがおすすめです。

🎉まとめ

CSSを適用する3つの方法インラインCSS、インターナルCSS、エクスターナルCSSについて解説しました。3つのうち、エクスターナルCSSを使うのが良いです。

みなさんはCSSファイルの適用方法を身につけ、スキルアップしました。素晴らしいです👏

CSSを使って装飾していく上で避けては通れない方法ですので、忘れた時にはまたこの記事を見返してください!

🤗おすすめ

本で体系的にCSSについて学びたいという方にはこちらの本をおすすめします。HTML・CSSの基礎から実際のWebサイト作成まで書かれており、豊富な図が含まれているため、多くの方が理解しやすい本です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

YouTubeのように動画でサクサク学びたいという方には、Udmeyの講座をおすすめします。私もよく使うのですが書籍に比べ実用的な内容を学びやすく、隙間時間に見れるのがいいです。HTMLやCSSなど、ぜひ気になるWeb開発の人気オンラインコースを受講してみてください。

Udemy 人気のオンラインコース ウェブ開発

参考になれば幸いです。 読み返したい方は、ぜひブックマークへの登録がオススメです。
読んでいただきありがとうございました!🙌

このページの内容