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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ