知らないと困るかも？CSSの読み込み方法は3種類！優先順位についても理解しよう
HTMLの見た目を整えるのがCSSの役割ですが、HTMLにCSSで書いたスタイルを適用する方法はいくつかあります。
また、適用されるスタイルの優先度も決められています。
これらを把握しておかないと、
「確かに書いたはずなのに何で変わらないんだ？」みたいなことになり得ます。
今回はCSSの読み込み方法と優先順位についてまとめます。
余談ですけど、僕が最初CSS苦手だなーと思ってた時の原因が「書いたのに効いてない」っていうことがしばしばあったからです。
ここをクリアできるとCSSのことをもっと好きになれるかも。。
CSSの読み込み方法は3種類
読み込み方法はいくつかあります。
- CSSファイルを読み込む
- HTMLのstyleタグに書く
- HTML要素のstyle属性に書く
一つずつ見ていきましょう。
CSSファイルを読み込む
HTML
<link rel="stylesheet" href="./style.css">
多分これが一番使われる方法です。
linkタグはHTMLファイルとは別のファイルを読み込む時に使うタグです。href=”○○”はどのファイルかを指定する属性です。
○○にはファイルパスを書きます。
ファイルパスとはファイルがある場所のことです。
「.」はこのHTMLファイルが入っているフォルダのことを指します。
なので、上記の場合は「./style.css」と書いていますが、これはこのHTMLファイルと同じフォルダにあるstyle.cssを読み込みますよ、という意味になります。
このようにHTMLファイルの場所を起点にファイルを指定する書き方を相対パスといいます。
他にも「href=”https://test.com/css/style.css”」みたいにファイルのURLを指定することもできます。こういった書き方を絶対パスといいます。絶対パスは誰かが作ったライブラリを読み込む時などに使います。
rel=””はこのHTMLファイルと読み込もうとしているファイルの関係性を指定する属性です。「rel=”stylesheet”」と書くと読み込もうとしているファイルはスタイルシート(CSS)ですよという意味になります。
ファイルを読み込む利点として、
・HTMLファイルの肥大化防止
・HTMLファイル間でCSSの共有ができる
・誰かが作った外部のCSSを使うことができる
などがあります。
HTMLファイルにCSSまで書いてしまうとHTMLファイルが大きくなって見辛くなります。なのでHTMLはHTML、CSSはCSSで棲み分けをするのがいいと思います。
また、HTMLにCSSを書いてしまうと、そのCSSを別のファイルでも使いたいなと思った時に同じことを書く必要が出てきますが、それは冗長ですし、保守性が高いとは言えません。
プログラミングの基本ですが、特別な事情を除いて同じコードを何度も書くのは良いこととはされません。
同じことを書かなければならないのであればそれは関数なりファイルなりにまとめて、それを参照させるべきです。
また、CSSは自分が作ったものだけではなく、誰かが作ったものを読み込むこともできます。
例えばローディングとかグラフとかよく使われるパーツは世界中のエンジニアによって作られたものが公開されていたりします。
それらのCSSファイルをダウンロードして読み込ませることもできますし、CDNなどのサービスを使って配信しているのであれば、インターネット上のCSSファイルのURLを指定することで自分のプロジェクトにファイルを置かなくても読み込むことができます。
HTMLのstyleタグに書く
HTML
<style>
body {
background: blue;
}
</style>
HTMLにはstyleタグが用意されていて、そこにCSSを書くことができます。
このブログでソースコードを載せる時にはよくこの方法を使っています。
ただ、実務ではあまり使わないかもしれません。
やっぱりファイルで読み込むほうが都合がいいので、styleタグに書くタイミングがあるとすれば、ちょっと動作確認をしたい時とか、ファイルを用意するまでも無いほど書くことが少ない時でしょうか。
HTML要素のstyle属性に書く
HTML
<body style="background: blue;">
</body>
style属性を使えば、pタグとかdivタグとかのHTML要素に直接CSSを書くこともできます。
ただ、上述のとおり僕はHTMLにCSSを混在させて書くべきではないと思いますし、実務でもそういうプロジェクトはあまり見ないので基本的にはおすすめしません。
CSSには優先順位がある
ここまでいろいろなCSSの読み込み方法を見てきましたが、もし一つのHTML要素に対していろいろなところからCSSが書かれていたらどうなるでしょうか。
実はCSSには優先順位があって、複数の設定が書いてある場合は優先度が高いCSSが適用されることになります。
優先順位は以下のとおりです。一番上が優先度高いです。
・HTML要素のstyle属性に書かれたCSS
・最後に読み込まれたCSS
HTML
<html>
<head>
<link rel="stylesheet" href="./style.css">
<style>
.box {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div>
<div class="box" style="background: yellow;"></div>
</div>
</body>
</html>
CSS
.box {
background: blue;
}
上にサンプルコードを用意しました。
boxというクラス名の縦横100pxの正方形を表示しているのですが、3箇所で正方形の色を指定しています。
・style.cssで青
・styleタグで赤
・divタグに直接黄色
上記を動かすと以下のようになります。
結果はdivタグにstyle属性で書かれた黄色が有効になります。（見づらかったらすみません。）
ではstyle属性を消したらどうなるでしょう。
HTML
<html>
<head>
<link rel="stylesheet" href="./style.css">
<style>
.box {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div>
<div class="box"></div>
</div>
</body>
</html>
赤くなりました。これはlinkタグ(青)よりもstyleタグ(赤)のほうが後に読み込まれているからです。
ではlinkタグとstyleタグの順番を入れ替えてみましょう。
HTML
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background: red;
}
</style>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>
<div class="box"></div>
</div>
</body>
</html>
青くなりましたね。後に書かれたlinkタグの色設定が有効になりました。
このように基本的に書いたCSSの順番で適用されるスタイルが変わりますが、HTML要素に直接指定された場合がそれが優先されます。
ただ、この基本的な優先順位をねじ曲げてこれを優先にして！と指示することもできます。「!important」を使うのです。
HTML
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background: red !important; ←ココ
}
</style>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>
<div class="box"></div>
</div>
</body>
</html>
一番優先度の低いはずの赤指定が有効になりました。
!importantを付け加えるとそれが最優先になります。
ただし、この方法は本来の優先順位を強制的にねじ曲げてしまう手法なので極力使わないほうがいいです。!importantばかり使っているとどこが効いているのかだんだんわかりづらくなって、修正がしづらくなります。
いろいろな事情を加味してからの最終手段としてこういう方法があることも覚えておいてください。
効いてるスタイルを確認する方法
ソースコードを細かく追っていけばどこのスタイルが効いているかわかると思いますが、追うのがつらすぎる。。そんなことはまあまあある話です。（規模が大きければ大きいほど）
どこに書いたスタイルが効いているのか手っ取り早く知りたい場合はブラウザの開発者ツールを使うといいでしょう。
チェックしたいWebページを開いた状態で、開発者ツールを開いてみましょう。（Macの場合はoptionキー+commandキー+iキーの同時押し、Windowsの場合はF12キー）
最近のブラウザにはだいたい備わっていると思いますが、上はGoogle Chromeの開発者ツールです。Elementsタブを開くとHTMLが確認できます。
チェックしたい要素をクリックすると画面右側のStylesタブに設定されているスタイルが表示されます。もしHTMLの内容がボリューミーで、調べたい要素がパッとわからない時は画面左上の赤枠で囲ったボタンをクリック後、ブラウザに戻って対象の要素をクリックしてください。すると自動的に該当のHTML要素が選択状態になります。
Stylesタブを見ると3箇所にbackgroundが設定されていて、それぞれどのファイルの何行目に書かれたものかがわかります。
一番上のbackground: yellow;はelement.styleに書かれていることになっていますが、これはHTML要素に直接書かれているという意味になります。つまりHTML要素のstyle属性に書かれたCSSです。
二番目はstyle.cssというファイルの1行目に書かれたboxクラスのCSSですよという意味になります。
三番目はtest.htmlの4行目に書かれたboxクラスのCSSですよという意味になります。
上2つに取り消し線が引かれているのがわかるかと思います。取り消し線が引かれているのはその設定は無効になっているという意味です。
こうして一番下のtest.htmlに書かれたスタイルが効いていることがわかります。
まとめ
今回はCSSの読み込み方法と優先順位について紹介しました。
基本的な原則として最初に書かれたスタイルよりも後に書かれたスタイルのほうが適用されます。
ページ数の多いWebサイトを作る時とかは読み込むCSSも多くなります。
そういう時はWebサイト全体にかかってくる土台となるスタイルを先に読み込んで、局所的な細いスタイルは後で読み込むようにするとうまくいくと思います。
したっけ！
- CSSは別ファイルに書いて、そのファイルを読み込む方法がよく使われるが、HTMLファイルに直接書くこともできる
- CSSには適用の優先順位があり、最後に読み込まれたスタイルが優先される
- 裏技として!importantを使うとそのスタイルが最優先されるが、基本的には使わないようにしましょう
- どのスタイルが効いているのか知りたい場合はブラウザの開発者ツールを活用しましょう
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy