CSSの優先順位と上書きルールについて

 

今日はCSS(スタイルシート)の優先順位について書こうと思います。

CSSファイルには上書きルールと言うものがあり、
このCSSのルールを利用する事でレイアウトの自由度が広がります。

優先順位とは、同じ記述があった場合、
どれが実際に表示されるのかと言う事で、
これは上書きルールと関係してきます。

 

基本的なCSSの優先順位と上書きルール

 

CSSの基本的な優先順と上書きルールとして、
記述する順番によるものがあります。

例えば、

<style type="text/css">
h1{color:#000000;} /* 黒 */
h1{color:#ff0000;} /* 赤 */
h1{color:#ffffff;} /* 白 */ 
</style>

 

こんなCSSがあったとしたらどれが実際に表示されるのか?
と言うことです。

上記はどれもh1に対してフォントカラーを指定していますが、
黒、赤、白とそれぞれ違う色を指定しています。

CSSに限らず、大抵のコードは上から読み込まれます。
そしてCSSには上書きルールがありますので、上記の場合は、

最初に黒が読み込まれ、その後に赤が上書きされ、最後に白で上書きされ、
最終的には白が表示されます。

つまり、次々と上書きされて、一番下に記述されているものが
最終的に表示されますので、
「より下に記述されているCSSコードが優先順位が高い」
ということになります。

ただし、下記のようなCSSコードの場合、

<style type="text/css">
h1{color:#000000; font-size:20px;} /* 黒+フォントサイズ20px */
h1{color:#ff0000;} /* 赤 */
h1{color:#ffffff;} /* 白 */ 
</style>

最初のCSS定義では 文字色を黒にしてフォントサイズを20pxに
指定されています。2番目、3番目では色指定のみで、
フォントサイズ指定がされていません。

この場合は、最初に文字色を黒、フォントサイズ20px
読み込まれ、2番目で文字色だけ赤に上書きされ、
3番目で文字色が白に上書きされますので、
結果は、文字色が白、フォントサイズ20pxが表示されます。

 

CSSの記述場所による優先順位

 

CSSの記述場所とは、CSSを定義する(書く)場所の事で、
主に、外部CSSファイル、HTMLのヘッダー内に記述する方法、
インラインCSSの3つになります。

優先順位としては、

インラインCSS > <head>内に記述 > 外部CSS

となります。

 

外部CSS

h1{color:#000000;} /* 黒 */

 

HEAD内に記述

<style type="text/css">
h1{color:#ff0000;} /* 赤 */
</style>

 

インラインCSS

<h1 style="color:#ffffff;">白文字</h1> 

 

上記の場合、文字色は白となります。

 

このパターンは知っていると結構レイアウトに幅が出ますので
覚えておくと良いと思います。

 

CSSセレクタによる優先順位と上書き

 

CSSセレクタによる優先順位です。
CSSセレクタには、

タイプセレクタ(要素名)、
ユニバーサルセレクタ(*)、
classセレクタ、
idセレクタ、
属性セレクタ

などがあります。

 

<html>
<head>
<title></title>
<style type="text/css">
<!--
h1{ color : #000000; }
.colors{ color : #ff0000; }
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h1 class="colors">てすと </h1>
</body>
</html>

 

上記の場合、

タイプセレクタであるh1は、
classセレクタやidセレクタよりも優先されますので、
文字色は黒となります。

 

この投稿は役に立ちましたか? 役に立った 役に立たなかった

 

ネットビジネス速報メールマガジン

 

メルのネットビジネス速報では、悪質高額塾などの被害が拡大しないように
新しい悪質販売者の情報が入り次第、速報でお伝えいたします。

Dreamweaver、Fireworks、PhotoshopなどのTipsやチュートリアルの紹介、
最新SEO情報、その他ネットビジネスに関する情報をいち早く配信しています。

お名前(必須)
メールアドレス(必須)

記事「CSSの優先順位と上書きルールについて」にコメントを残す

*

サブコンテンツ

危険な高額塾

タグ

SmoothScroll.js wpXサーバー ツール 転売大園塾 ソースコード 日本語入力変換ソフト RSS Includes Pages 加工 Line 賢威 Internet Explorer 特権ビジネス 背景 ネットビジネス フォローマティック せどり Login LockDown ドメイン 自己アフィリ 株式会社SRシステム Windows 7 インターネットエクスプローラー ネオヒルズアカデミー 短縮URL 蝶乃舞 SyntaxHighlighter MT アクセスアップ スクロール Favicon バイマ MovableTYpe 関根義光 Wordpress Content Slide 短縮URLツール 固定ページ WP クラック やしろ塾 マニュアル WEB RSS レイアウト Google Maps ECサイト IE 無料 バックアップ フレンドシップメール ソフト 土屋ひろし スカイプ HTML4.0 RMT カスタマイズ ウイルス html バイドゥー system Firefox 新井浩 スマホ ブラシ SEO moza 立体 ブラウザ ソース タイガーウイング ネットビジネス最後の楽園 原田真 与沢翼 秀吉塾天下統一 パズル CS6 大西良幸 滑らか 株式会社WINGOOD Yahoo Chrome ぼかし wordpress もざ ロリポップ 表示 tool explorer DOCTYPE 池田純矢 ブルートフォースアタック PPC レタープレス office 山下 LinkShaker 配布 ワードプレス アドセンス Diamond Affiliate Masters Program 中山秀人 久積篤史 上位表示 ネットガレージ 副業術 詐欺組織 KMSpico Extension Manager document.all iphone アクセス制限 Youtube トラフィック 81a338 ヤフーショッピング ライオンアフィリエイト 画像 BUYMA セキュリティ 球体 プロファイル google 特定のメールアドレス ライブチャット クリックランキング 株式会社ニュース クラウド入力機能 YouTube Maniax 2017 スムーズ レイアウト崩れ Agency Business 改竄 人物 高速ゲーム やしろひろたみ テーマ 登録禁止 SKナレッジ レンタルサーバー High Concept Marketing 申請金ビジネス android FireWorks 優先順位 権利収入 css 無料オファー アンダーグラウンドアフィリエイトクラブ プロモーション 不正アクセス followmatic ネットビジネス大全集 トレンドアフィリエイト XHTML functions.php プラグイン 大園式転売塾 大園転売塾 メモ 流出 個人情報 wp-login.php ネットショップ シャンプー サイト改ざん Tiger-Wing エキスパートメール BBIZ スタイルシート ハート テンプレート .htaccess 定型文 Baidu ブロックポリシー Adobe 株式会社SRシステム モザイク 伊藤虎太郎 大園麗花 アフィ匠 石井匠 株式会社Free Agent Style ムーバブルタイプ ping送信 感染 getElementByTagName ウインドウ 三橋美仁 postpost CS5 アイコン ブロック 改ざん twitter 村上省吾 自動 秒速で1億円稼ぐ男 KMS認証 伊藤 歩 アレックス式ネオせどりスクール 株式会社A-ブログレス 個人情報流出 エディタ Ban Hammer エクスチェンジ クロスアフィリエイト 到達率 Google Maps API Newpost Catch @PAGES インペリアルゴールド 関根塾 情報商材 Windows 出店料 タスクバー マルウエア アンダーグラウンドメソッド ネットゲーム 伊藤塾 管理画面 PHP Thunderbird ランキング グラデーション CGI 脆弱性 リンクシェイカー 管理ツール ユーチューブマニアクス2017 FTP アレックス 高額塾 コピーボタン ビジネス バナー エクスプローラー Cash on Wordpress 切り抜き ボタン メルマガ配信システム 復元 ライン アフィリエイト 既得権益 小笠原健一 EC ざくざく君 ブラクラ 加藤 秀吉 クラウド変換 量産 IBS 掲示板 音量アイコン デスクトップ ファビコン 不労所得の神 インフォトップ 与沢翼×蝶乃舞 インターネットビジネススクール DTD ヤフオク トレンドキーワード マイクロソフト 放射線 詐欺 インターネット レビュー 自動化 ツイッター MasterCollection 百度 JavaScript getElementById 比較 ping 宮田麗花 自己アフィリエイト IP 切抜き 株式会社バンザイ 不正送信 がら空きビジネス 北川 雅嗣 サンタ 無断送信 force puzzle ヤフー 伊藤 虎太郎

アーカイブ

エステトラブル

このページの先頭へ