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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ