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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ