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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ