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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ