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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ