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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ