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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ