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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ