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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ