CSSのスタイルの優先順位とは【初心者向け】
CSSのスタイルの【優先順位】について解説した記事です。CSSでは、「一番最後に書いたもの」が最優先で適応されるという特徴があります。スタイルシートの記述方法がわかった上で、この特徴も理解しておきましょう。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,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を基礎から学ぶことができます。
