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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ