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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ