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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ