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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ