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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ