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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ