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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ