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の優先順位と上書きルールについて」にコメントを残す

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ