CSSのスタイルの優先順位とは【初心者向け】
CSSのスタイルの【優先順位】について解説した記事です。CSSでは、「一番最後に書いたもの」が最優先で適応されるという特徴があります。スタイルシートの記述方法がわかった上で、この特徴も理解しておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSの記述場所には、styleタグに書く、タグのインラインに直接書く、外部ファイルを作って読み込むという3つの書き方があります。
その上で、今回は、スタイルの優先順位について解説します。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
今回は、CSSで記述されたものの優先順位について勉強するよ。
田島メンター！！どこに書いたものが一番優先されるんでしょうか～？
記述した場所が後になるほど優先順位は高くなるんだ。同じ場所にスタイルを指定して、どちらが適用されるか実際に見てみよう。
了解です！
スタイルは、最後に書いたものが最優先で適応される
はじめに答えを言ってしまうと、スタイルは、一番最後に書いたものが最優先で適応されます。
どういうことかと言うと、コードの始めのほうで先にスタイルを指定していたとしても、重複したタグへの指定の場合は、一番最後に書かれたスタイルが適応されるのです。
なぜなら、ブラウザはHTMLやスタイルシートのデータを上から順に一行ずつ読み込んでいくので、下にいけばいくほど、読み込む情報が最新になるからです。
ですので、次のファイルでは、<p> の色は先に指定されたピンクではなく、最後に指定されたブルーによって上書きされます。
<!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 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>
今回は以上です。
基本的な内容ですが、しっかりと覚えておきましょう。
優先順位が上だったインラインの青色への指定を消してみると、<head>で指定されていたピンクが反映されたよ。
例えばピンクと青の両方を指定した状態で、外部ファイルで緑を指定した場合はどうなるんですか～？
その場合もインラインである青色が優先されるんだ。記述場所の優先順位はインライン＞head内(内部参照)＞外部参照と覚えておこう。
外部ファイルは優先順位が一番下になるんですね。分かりました！
CSSを自分で書いてみたい場合は、CSSの書き方の記事も合わせてご覧ください。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
