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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ