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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ