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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ