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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ