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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ