CSSのスタイルの優先順位とは【初心者向け】
CSSのスタイルの【優先順位】について解説した記事です。CSSでは、「一番最後に書いたもの」が最優先で適応されるという特徴があります。スタイルシートの記述方法がわかった上で、この特徴も理解しておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSの記述場所は、次の3つの記述場所があります。
- HTML上のstyleタグに記述する
- HTML上のタグのインラインに直接記述する
- CSSファイルを作成・スタイルを記述し、HTMLに読み込む
今回は、上記の3つの記述場所でのスタイルの優先順位について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
今回は、CSSで記述されたものの優先順位について勉強するよ。
田島メンター！！どこに書いたものが一番優先されるんでしょうか～？
記述した場所が後になるほど優先順位は高くなるんだ。同じ場所にスタイルを指定して、どちらが適用されるか実際に見てみよう。
了解です！
スタイルは、最後に書いたものが最優先で適応される
はじめに答えを言ってしまうと、スタイルは、一番最後に書いたものが最優先で適応されます。
例えば、コードの始めのほうで先にスタイルを指定していたとします。しかし、後の方で重複したタグへの指定した場合、一番最後に書かれたスタイルが適応されるのです。
なぜなら、ブラウザはHTMLやスタイルシートのデータを上から順に一行ずつ読み込んでいくので、下にいけばいくほど、読み込む情報が最新になるからです。
そのため、次のファイルでは、<p> の文字色は上で指定したピンクではなく、最後に指定したブルーで上書きされ、文字色はブルーで表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
h1 {color: red; }
/* ↓は、pタグの文字色を指定している */
p {color: pink; }
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS入門</h1>
<!-- ↓は、pタグの文字色を最後に指定しているので、適用 -->
<p style="color: blue;">はじめてのCSS</p>
</body>
</html>ブラウザではこのように表示されます。
<head>内で一度ピンクに指定して、そのあとインラインで青色を指定してみたよ。
画面ではインラインで設定した青色が適用されていますね。
あとから記述された方が反映されているのが分かるね。試しにインラインの方を一度消してみようか。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
h1 {color: red; }
p {color: pink; }
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS入門</h1>
<p>はじめてのCSS</p>
</body>
</html>もちろん、HTMLタグのインラインで文字色のブルーを指定しなければ、文字はピンク色になります。
まとめ
スタイルは、最後に書いたものが最優先で適応されます。開発中にしばし起こる問題なので、しっかり覚えておきましょう。
優先順位が上だったインラインの青色への指定を消してみると、<head>で指定されていたピンクが反映されたよ。
例えばピンクと青の両方を指定した状態で、外部ファイルで緑を指定した場合はどうなるんですか～？
その場合もインラインである青色が優先されるんだ。記述場所の優先順位はインライン＞head内(内部参照)＞外部参照と覚えておこう。
外部ファイルは優先順位が一番下になるんですね。分かりました！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
