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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ