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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ