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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ