CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ

Posted under - Web Design

32

Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。

Cascading Style Sheets

Attention

記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。

この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事:CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね!

New Post

Webサイトをデザイン、レイアウトするのに欠かせないのが CSS(Cascading Style Sheets、スタイルシート)ですね!今では CSS3 が話題を集めていて、CSS の基本的なことは今更感もあるのかなーと思いつつ、少しまとめてみました。

Webデザイン、レイアウトを組む上で必須となる、インライン要素ブロックレベル要素 – 特にブロックレベル要素のクセを、おさらいしておきたいと思います(IE6 のことは、考えてません)。

CSS:ブロックレベル要素のクセとかいろいろ 目次

  1. インライン要素とブロックレベル要素
    1. インライン要素
    2. ブロックレベル要素
    3. marginの相殺
  2. インライン要素をブロックレベル化
    1. まるでブロックレベル要素のように扱えるようになる
    2. ブロックレベル化した<a>タグ
  3. ブロックレベル要素をインライン化
    1. display: inline で並べると隙間ができる
    2. インライン化したブロックレベル要素の誤解
  4. フロートさせたブロックレベル要素のあれこれ
    1. float させると、width を失う
    2. フロートした子要素の高さは含めないんです
  1. 左フロートさせた要素の後続の要素はこうなってます
  2. XHTML の文法を意識したレイアウト
  3. スタイルシートの優先順位
    1. 外部読み込みより、XHTML に直書きしたものが優先される
    2. CSS は、あとから書いたものが優先されます!
    3. 子孫セレクタ
    4. id と class と属性
    5. 個別性の優先順位
    6. こんな指定方法も … クラス同時指定
    7. XHTML 直書きの次に優先される !important

1. インライン要素とブロックレベル要素

その前に、ブロックレベル要素って何?っていう人のためにおさらいです。まず、Webサイトは、HTMLで書かれていますよね。HTML は、タグ(<p> とか <img /> とか)をいっぱい並べて書きますが、そのタグは大きく分けてインライン要素ブロックレベル要素というものに分けられます。

1.1. インライン要素

インライン要素のよく使う代表選手といえば、<a> タグ、<strong> タグ、<img> タグなどがありますよね。インライン要素は、基本的に 2つ以上続けて書いても横に並んでいきます。

XHTML
<a href="#">これはリンクです!</a>
<strong>これは強調です!</strong>

これはリンクです!これは強調です!

というような感じで、横に続けて並びます。改行するには <br /> タグを使用します。

文法的にも決まりがあって、インライン要素の中にブロックレベル要素を書いてはいけません。

  • 誤)<a href="#"><h2>これは h2 見出しです!</h2></a>
  • 正)<h2><a href="#">これは h2 見出しです</a></h2>
1. インライン要素の特徴

レイアウト的な視点で見ると、インライン要素には次のような特徴があります。

  • margin – 左右は効くけど、上下は効きません。
  • padding – 一応上下左右効くけど、上下は見た目的には効いてない風に見えます …。
  • width – 効きません。
  • height – 効きません。
  • border – 指定できます!
  • background – 指定できます!

padding などがどんな風に効いているか、サンプルを作ってみました。

SAMPLE
<a>タグはインライン要素
margin は横にしか効きません。
padding は効いてるけど … ボックスからはみ出します X(
width や height は無効です …
border や background は指定できます。
<strong>タグもインライン要素です!
2. 特別なインライン要素 img、input、textarea

同じインライン要素でも img タグinput タグtextarea タグ などはちょっと特別です。インライン要素なので、他のインライン要素と同じように、続けて書くと横に並びます。

でも、他のインライン要素との大きな違いは、margin や padding、width や height も指定できるところです!画像はレイアウトの視点からみても、柔軟に対応できるから嬉しいですね!

前述の普通のインライン要素の無効だったプロパティも、以下のようになっています。

  • margin – 上下左右ちゃんと効きます!
  • padding – 上下左右ちゃんと効きます!
  • width – もちろん効きます!
  • height – こっちも効きます!

画像、img タグの各プロパティーがどんな風に効いているかサンプルを作りました。

SAMPLE

1.2. ブロックレベル要素

続けて書いても横に並ぶインライン要素に対して、ブロックレベル要素は続けて書いても横に並びません。ブロックレベル要素は、その横幅に関係なく、どんどん下にレイアウトされていきます。

ブロックレベル要素の代表選手、h1 ~ h6 の見出しを続けて書けば、以下のように下へどんどんレイアウトされていきます。

SAMPLE

これは h3 の見出しです!

これは h4 の見出しです!

これは h5 の見出しです!

h1~h6 の見出しの他にも、たくさんのブロックレベル要素があります。段落を意味する p タグや、ボックスを定義する div タグ、リストの ul、ol、li タグなんかもブロックレベル要素です。

1. ブロックレベル要素の特徴

Webデザインのレイアウトを作るときは、大体このブロックレベル要素でレイアウトしていきますよね。ブロックレベル要素はインライン要素と違って、横幅や高さ、margin や padding の余白も自在に操れるので、レイアウトするのにはもってこいなんですね!

  • margin – 上下左右指定できます!
  • padding – 上下左右指定できます!
  • width – 指定できます!
  • height – 指定できます!
  • border – 指定できます!
  • background – もちろん指定できます!

1.3. margin の相殺

レイアウトを組むときに注意したいことに、margin の相殺があります。これは 1番目のブロックレベル要素の margin-bottom と、次にレイアウトした margin-top の間で起こります。言葉だと分かりにくいので、下の図を見てくださいね。

SAMPLE
div要素
margin-bottom :30px
div要素
margin-top :20px

上のボックスの margin-bottom: 30px と、下のボックスの margin-top: 20px は、お互いに相殺しあって、大きい方の値(上の例だと 30px)が採用されます。これは上下間だけで起こることで、横に並べたときには起こりません。

1.ちょっと寄り道 table タグの margin の相殺

ブロックレベル要素の上下 margin は相殺されるはずなんですが、table タグの margin の相殺、Firefox だと相殺されないんですよね … モダンブラウザの Firefox … X( table のマージンは気をつけたいですねー!

Attention

2012年 5月現在 – Firefox 12 では、margin の相殺がされています!

SAMPLE
田中さん :D X( :D X( :D X(
高橋さん X( :D X( :D X( :D
臼井さん ;D XD ;D XD ;D XD
杉山さん XD ;D XD ;D XD ;D
Firefox と Chrome での表示の違い

Chrome などでの表示

左は Google Chrome、右が Firefox のスクリーンショットです。… 明らかに違いますね …。上の例のふたつの table のマージンは、margin-bottom:30pxmargin-top: 20px と指定してあります。Chrome などで見ると、table 間の margin は、相殺されて 30px になっています。 でも、Firefox で見ると、マージンの相殺は効かず、50px になっています。

table タグの他にもこういうのあるのかな …

2. インライン要素をブロックレベル化

インライン要素やブロックレベル要素の代表的な特徴を見てきましたけど、display プロパティを使うと、その特徴がちょっと変化します。 display: block とか、display: inline とかいうやつです。よく見かけますよね。 そうするとどうなるか、ちょっと見ていきましょう。

ブロックレベル化っていう言葉は適切じゃないかもしれないけど、便宜上 display: block の事を、ブロックレベル化って表現させてくださいね。 下の例は、もともとインライン要素の <a> タグを、ブロックレベル化して、いろんなスタイルを指定してみました。ただのリンクがボタンになっちゃいます。

CSS
.button{
	display: block;
	font-size: 24px;
	font-family: "Tenderness";
	text-transform: uppercase;
	border:1px solid #777;
	padding: .5em 2em .55em;
	color: #fff;
	cursor: pointer;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, .4);
	background: #428ec9;
	-webkit-border-radius: 5px;
	-moz-border-radius:  5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 1px #fff;
	-webkit-box-shadow: 0 1px 1px #fff;
	box-shadow: 0 1px 1px #fff;
	background: -webkit-gradient( linear, left top, left bottom, from(#ffd1e8), to(#ff69b4));
	background: -moz-linear-gradient( top, #ffd1e8, #ff69b4);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd1e8', endColorstr='#ff69b4');
}

Sample

ブロックレベル化したリンク。

インライン要素をブロックレベル化すると、marginpadding も思った通りに効くし、widthheight も指定できるようになります。 まるでブロックレベル要素のように、インライン要素を扱えるようになるんです!

2.1. まるでブロックレベル要素のように扱えるようになる

display:block を指定したインライン要素は、以下のような特徴があります。ブロックレベル要素と同じみたいにレイアウトできるようになりますね!

  • margin – 上下左右指定できます!
  • padding – 上下左右指定できます!
  • width – 指定できます!
  • height – 指定できます!

これらは、インライン要素で指定しても無効になってしまうものばかり。でも display:block でブロックレベル要素化すると、ちゃんと有効になります。

また、ブロックレベル要素のようになるということは、改行タグを使わなくても、勝手に改行(改行という表現が適切かどうかはちょっと疑問 …)というか、下にレイアウトされていくようになります。<br /> タグ書くのが面倒なところとかにはいいですよ w form の label とかでよくやってます!

2.2. ブロックレベル化した<a>タグ

上記の例で、<a>タグをブロックレベル化したので、もうちょっと <a> タグについて補足的に。 <a> タグには、リンクという機能がついているので、デザインするときに、クリックしやすいリンクがいい!とよくいわれています。 クリックしやすいリンク … クリッカブルエリア(クリックできる領域)が広いほうがクリックしやすいですよね。

<a> タグのクリッカブルエリアを広げるのに、padding なども使われるんですけど、ブロックレベル化すると、クリッカブルエリアも広がります。 下の例では見出し(<h3> タグ)の中に、<a> タグが入っているパターンです。

SAMPLE

display: block によって、テキスト以外の部分、余白の部分(テキスト以外)もクリックできるようになります。

3. ブロックレベル要素をインライン化

今度はさっきと逆のパターン、ブロックレベル要素をインライン化したときに、どういう風になるかを確認です。 下の例では、ブロックレベル要素 <li> タグを、display: inline でインライン化してみました。

SAMPLE

ブロックレベル化をインライン化すると、横に並びます。これはインライン要素の特徴ですね!でも逆にブロックレベル要素の特徴である、margin、padding、width、height を自由に指定できるというメリットは、失う事になります。

  • margin – 左右は効くけど、上下は効きません。
  • padding – 一応上下左右効くけど、上下は見た目的には効いてない風に見えます …。
  • width – 効きません。
  • height – 効きません。

widthheight は指定しても無効になってしまいます。そして marginpadding は横には効くけど、上下にはききません …。これはインライン要素の特徴ですね。

3.1. display: inline で並べると隙間ができる

ブロックレベル要素をインライン化して横に並べた場合、XHTMLの書き方によって、隙間が生まれます。下は普通に XHTML を書いて、display: inline とした例です。リストの間に、小さな隙間ができちゃってますよね。

SAMPLE

これは XHTML を書くとき、改行して書いてるからです。

XHTML
<li>Home</li>
<li>Portfolio</li>
<li>About</li>

こんな風に … 普通こう書きますよね。

一応下のように改行せずに書くと、この隙間は消えますけど、とっても読みにくいコードになるのでおすすめしません!

  • 1. <li>Home</li><li>Portfolio</li><li>About</li>

とっても読みにくいですね X(

3.2. インライン化したブロックレベル要素の誤解

上記のように、ブロックレベル要素をインライン化すると、簡単に横に並んでくれます。 でも、私も昔誤解していたんですけど、display: inline は、ブロックレベル要素そのものをインライン化する訳ではありません。

Attention

コメントでご指摘していただきました!display: inline は、ブロックレベル要素そのものをインライン化するが正しいです。ちょっと言葉だと難しいのですが、akude さんがコメント欄で詳しく解説してくださってます!

display: inline は、ブロックレベル要素をひとつ以上のインラインボックスにするんです。分かりにくいですね …。例えば、さっきの<li> タグの中に、改行である <br /> タグを入れるとどうなるかというと(Ho<br />me みたいに)…。

下記のようになるのかな?って思うと、そうはならないんです。

こうなってもらいたい …

Attention

上記はフロートでレイアウトしています!

ではどういう風になるのかな … というとこんな下記のようになってしまいます。

SAMPLE

もうぐちゃぐちゃです … X( <li> タグの中に改行をいれても、リスト自体は横に並んでくれる … という期待は裏切られます X( display: inline はひとつ以上のインラインボックスを生成するので、こういう結果になっちゃいます。

4. フロートさせたブロックレベル要素のあれこれ

CSS でレイアウトを作るときに、頻繁に使うフロート。フロートした時のブロックレベル要素の特徴には、以下のようなものがあります。

4.1. float させると、width を失う

通常ブロックレベル要素は、特に width を指定しない場合、親要素いっぱいに広がりますよね。でも float させるとちょっと事情が変わってきます。 ブロックレベル要素は、float させると幅を失うというか、内包する要素の幅に依存するようになります。

Attention

基本的にフロートさせた要素には、width を指定するのが決まりのようです。決まった幅を入れたくない場合は、width: auto を指定しておきましょう。

詳しくは、11月7日の記事:CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね!

New Post

SAMPLE
div要素
width を指定せずに
floatさせてます。
div要素
これも width を指定せずに
フロートさせてます。

上記の例は、<div> タグに、width を指定せずに float させているので、ボックスの幅は、内包するテキストの幅によって変化しています。 ナビゲーションなど、テキストの長さに依存させたい場面などでは、知らず知らずにやってると思うんですけど …。

フロートさせたからといって、もともと持つブロックレベル要素の特徴が、全部なくなるという訳ではありません。もともともってる width: 100%(親要素いっぱいに広がる)という特徴を失うだけで、width や height の指定、margin、padding の指定などは普通通りにできます!

4.2. フロートした子要素の高さは含めないんです

ブロックレベル要素の特徴として、フロートした子要素の高さを、親要素では含めないというルールがあります。言葉では難しいので …。

Attention

フロートした子要素の高さは含めないという表現をしていますが、フロートした要素は通常のフロー(流れ)が外れるためにこのような事が起こります。

New Post

ul要素の背景画像

リストを横並びにしたナビゲーションを例にして、実際にやってみます。まず、親要素である <ul> タグの背景にはこんな画像を繰り返し表示で使うとします。


それぞれのナビの画像

そして、内包する <li> タグ(リンク入れるので、実際は a タグ)には、それぞれ次のような画像を使うとします。CSSスプライト用に、マウスホバーした時の画像もいっしょにくっつけてあります。

それでは <li> タグを float させて、横並びリストを作ってみます。

XHTML
<ul>
  <li class="corporate"><a href="#">会社案内</a></li>
  <li class="outline"><a href="#">事業内容</a></li>
  <li class="contact"><a href="#">お問い合わせ</a></li>
  <li class="blog"><a href="#">ブログ</a></li>
</ul>
CSS
ul{
  list-style: none;
  background:  url(../images/ul-bg.png) repeat-x 0 0;
}

li { float :left; }

li a{
  display: block;
  float: left;
  width: 156px;
  height: 56px;
  text-indent: -9999px;
}

/* ナビごとに背景 */
li.corporate { background: url(images/corpotrate.png) no-repeat 0 0; }
li.outline { background: url(images/outline.png) no-repeat 0 0; }

li a:hover{ background-position: 0 100%; }

そしてブラウザで確認してみると、以下のようになりました。

1. ul タグに指定した背景画像が表示されない …
SAMPLE

画面いっぱいに広がるはずが、ul タグの背景に指定した画像が、表示されていません …。おかしい … いえ、これはおかしくないんです!そういう決まりになっているんです。Firebug や デベロッパーツールで確認してみると …。

ul要素の高さが「0」に!

親要素である ul タグは、float した子要素(li タグ)だけしか内包していません。その結果、高さが「0」になっているんです。高さが「0」なら、背景を指定しても表示されないのは当然ですよね!フロートした子要素を高さを、親要素では含めないというルールによってこうなります。

1. clearfix を使ったり、高さを指定すれば OK

内包している li タグの高さに合わせて、ul タグの高さを出したいなら、clearfixoverflow:hiddenul タグ(親要素)に指定してあげます。

また、ul タグに高さ(height)を指定すればいいっていうのもあるんですけど、float の解除ということを考えれば、clearfix を使った方がいいかもですねー。clearfix を使ってみると、以下のように高さが出て、背景が表示されました!

SAMPLE

上記は ul タグを例にしましたが、div タグなど、ブロックレベル要素なら同じ現象がおこります。

clearfix や float の解除については、過去記事を参考にしてみてくださいね!

5. 左フロートさせた要素の後続の要素はこうなってます

下の例みたいに、画像を左フロートさせてレイアウトすることってよくありますよね!でも、float した要素に続く要素ってどうなってるんでしょう …。

5.1. 見出しのボーダーや背景が、画像の後ろに隠れる

float させた画像のあとに、float させてない見出しと <p> タグを書くと、下記のようにに表示されます …。見出しにはピンクの border-left を指定してあるのですが … (文法的には見出しの前に画像がきて変なんですけど、サンプルということで!)

SAMPLE

これは見出しです!

左の写真は float させてます。見出しにピンクの border を指定してあるのに … 変になってる …

見出しにつけたピンクのアクセントが、画像の左端にきちゃってます。でも、テキストだけは画像に押されて、ちゃんと左にくるんですけどねー。 これは見出しが画像の左上と同じ位置から始まってるということ。なので、border や 背景画像を指定した場合などは、左端が起点になるのも当然ですね。

1. 画像の分だけ margin を指定する

後続の要素には、画像の幅 + 余白分の margine-left を指定してあげる必要があります。そうすれば、ちゃんと思った通りに表示されます!

SAMPLE

これは見出しです!

左の写真は float させてます。見出しに指定したピンクの border もばっちりです!

こんな感じでキレイに表示されました!

Attention

これはフロートした要素が、通常フロー(流れ)から外される為に起こる現象です。

詳しくは、11月7日の記事:CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね!

New Post

6. XHTML の文法を意識したレイアウト

レイアウトを CSS で作っていくと、デザインによっては XHTML の文法というか、文章構造と表示したい順番が逆になる場合があります。 例えば下の例、本当は一番上に画像を持ってきたいなーというデザインだったとします。でも、文法的には写真を説明する見出しが先にあって、写真や文章が続くのが正しいですよね。

SAMPLE
これは見出しです。

文法的には見出しが先で、画像があとの方が正しいのだ :D

これは見出しです。

文法的には見出しが先で、画像があとの方が正しいのだ :D

6.1. レイアウトはCSSで!

画像を上に持ってきたいからといって、XHTML で先に画像を書くんじゃなくて、スタイルシートで何とか工夫してみれば、いろんなレイアウトが作れます。 例えば上の例だったら、XHTML では画像を見出しの後に書いて、レイアウト的には一番上に持ってくるのに position プロパティーが使えます。

XHTML
 
<div>
<h4>これは見出しです!</h4>
<p>position プロパティーを工夫すればOKです!</p>
<img src="images/image.jpg" alt="" />
</div>
CSS
div { position:relative;}
div img{ 
position:absolute;
left:0;
top:0;
}
div h4{ margin-top:160px;}

親要素の div に position: relative、画像には position: absolute、見出しには画像の分と余白の分だけ margin-top を指定します。こうすれば思った通り、デザインできますね!

SAMPLE
これは見出しです。

position プロパティーを工夫すれば OK です!

これは見出しです。

position プロパティーを工夫すれば OK です!

CSS でのデザインのレイアウト、そのテクニックばっかりに目が行きがちだけど、基本的には XHTML あってのもの。時々めんどくさがってデザイン優先して、文章構造無視したくなりますけど … X(


インライン要素やブロックレベル要素の特徴を中心に、CSSでのレイアウトについてみてきましたが、スタイル指定したのに、効かない … とか、思ったようなレイアウトにならない … という時は、上記のような要素のもつ特徴を、再確認してみるのもいいかもです!

7. スタイルシートの優先順位

インライン要素やブロックレベル要素の特徴の中で、指定しても無効になってしまうプロパティーがたくさんありました。スタイルシートで指定したのに、スタイルが反映されない!という原因は、各要素の特徴の他に優先順位が原因になっている場合もあります。

スタイルを一生懸命指定しているのに、無視されちゃって悲しい思いをしないためにも、もう一度スタイルシートの優先順位を確認してみました XD

7.1. 外部読み込みより、XHTML に直書きしたものが優先される

まずは基本的なこと。スタイルシートは、別ファイルにして読み込んだり、head 内に書いたり、XHTML のタグに style 属性で直書きすることができます(<p style=”color:red;”>みたいに)よね。たとえば下のような場合、どうなるかというと …。

XHTML
<link rel="stylesheet" href="style.css" type="text/css" />

<style="text/css">
@import url("local.css");
p.attention{
     color: red;
}
</style>

<p style="color: red">

優先順位はこんな風になりますよね(上から順に採用されて、最終的には 3 が採用されます)。

  1. 外部スタイルシート
  2. @import や <style>タグの記述
  3. XHTML に書いた、style 属性での記述

特に難しくないんですけど、気をつけたいのは、XHTML に直接 style 属性で直書きしちゃうこと。これは最優先なので、いくら他のスタイルシートなどでスタイルを変更しようとも、無視されます X(

私は WordPress をよく使うんですけど、WordPress の機能の中には、この style 属性でスタイルを吐き出すものもあって、苦労する部分でもあります …。できる限り style 属性で直書きするのはやめておいた方がいいかもですね!あとで苦労するのは自分だったりします。

7.2. CSS は、あとから書いたものが優先されます!

これも当たり前なんですけど、例えば同じ 1枚のスタイルシートの中でも、あとから書いた方が優先されます。

CSS
p { color:red; }
p { color :blue }

となっていたら、p タグは全部、あとから書いたスタイル、color: blue になっちゃいます。実際にはこうやって続けて書く事はないですけど、Webサイトひとつ作ろうとするときは、スタイルシートも自然と長くなります。そんな時、キレイにスタイルシートを書いておかないと、こういう競合はあっちこっちで起こってるものです。

基本的に CSSは後から書いたものが優先されるので、「おかしいなー … スタイル反映されないなー」というとき、下の方に書いてあるものが、反映されてないか確認することも大事ですね!

1. 複数のクラスを指定した時も同じです

ひとつの要素に複数指定できるクラス。例えば以下のように p タグにふたつのクラスをつけた場合も、後から指定したクラスが優先されます。

  • 1. <p class="red blue">
CSS
p.red { color :red}
p.blue { color :blue; }

class="red blue" となっているので、あとから指定したクラス、blue の値が反映されます。

7.3. 子孫セレクタ

これも普通に書いてるので、感覚的にわかりますねー。親要素だけに指定したものより、子要素まで指定したものが優先されます。

CSS
div { color :red; }
div p { color :blue; }

こうなってたら、div(親要素)の中に書いた p(子要素)には、color: blue が反映されますよね!これも簡単ですね!

7.4. id と class と属性

スタイルシートを書くとき、id や クラスを指定して、スタイルを指定していきますよね。idclass はもちろん id の方が優先順位が高いです。

では、class属性はどっちが優先順位高いでしょう …。私は form のエレメントにあんまりクラスを使わなかったので、意識した事なかったんですけど、今回この記事を書くのに、いろいろテストしてたら以下のような結果になりました。

XHTML

contact-form という id をつけた form タグ の中の input タグに、text-box というクラスを指定しています。

<form id="contact-form" method="post" action="#">
...省略 ...
<input type="text" name="your-name" id="name" class="text-box" value="お名前" />
...省略 ...
</form>
CSS
/* 属性 */
input[type="text"]{ color :red; }

/* クラス */
.text-box{ color :blue; }

上記のように指定すると、意外にもクラスより属性の方が優先されました …。知らなかったなー。input.text-box{ ... }とすると、クラスの方が優先されましたけど、基本的にクラスより属性が優先されるのかしら…。

7.5. 個別性の優先順位

上の例では、.text-box ではダメでも、input.text-box というようにすると、優先順位が変わりました。これは何によって優先順位が変わったのかというと、個別性というもの。CSS では、個別性というものを基準にして優先順位が変化しています。

個別性とは … なんでしょう?個別性には具体的にルールや計算式があったりして、ちょっと面倒くさい …。id 指定だと何点、クラスの場合は何点という感じで、点数の高い方が優先されるってイメージ。ざっくり言ってしまえば、より具体的に書いた方が優先されるという感じです。

例えば、同じクラスでも書き方は以下のように指定できますよね。

  • 1. .wrapper { /* Style */ }
  • 2. div.wrapper { /* Style */ }

上の場合、.wrapper に書いたものよりも、div.wrapper に書いたものの方が優先されます!

  • 1. #header { /* Style */ }
  • 2. #container #header { /* Style */ }

#header に書いたものよりも、#container #header に書いたものが優先されます。個別性っていうのが何となくイメージできましたか?より具体的に書いた方が優先するので次のような変な事も起こります。

XHTML
<div id="wrap1">
     <div id="wrap2">
          <div id="wrap3">
               ここに書いたもののスタイルを指定したい!
          </div>
     </div>
</div>

全部 id で入れ子になってますが …。 上記の場合、div#wrap3 で指定するのが最優先されると思ってしまいます。でも個別性を基準にすると、これよりも優先される書き方があります。

  1. div#wrap3 { /* Style */ }
  2. #wrap1 #wrap2 div { /* Style */ }

この例だと、直接 id をピンポイントに指定した div#wrap3 の方が優先されそうですけど、そうじゃありません。#wrap1 #wrap2 div の方が優先されてしまいます。より具体的に … というさじ加減が難しいですけど。

個別性も便利なんですけど、場合によっては他の要素のスタイルよりも優先されてしまって困る … ということもあるので、注意が必要です!

個別性についてはこちらのブログが参考になりました!

7.6. こんな指定方法も … クラス同時指定

クラスは複数指定できますよね。そんな時、両方のクラスが同時についてる時だけ、みたいな指定もできますね!

XHTML
&lt;p class="red blue"&gt;

ふたつクラスがついたパラグラフ、次のように書く事もできます。

CSS
.red { color: red; }
.blue { color: blue; }
.red.blue { color: purple; }

.red.blue のように、スペースを開けないで続けて書くと、.red.blue を同時に指定してあるクラスだけに適応されます。赤と青が同時だから紫!みたいな w

.red.blue じゃなくて、p.red.blue とすると、個別性により更に優先順位が高くなります。でもいくらクラスを具体的に書いても id にはかないません。

7.7. XHTML 直書きの次に優先される !important

どうしても競合してしまって、スタイルが反映されない … でも原因が分からないっていう時の最終手段として、!important をつけてしまうというのもあります。それでも XHTML に直書きしたスタイルよりも優先順は低いです。

間違いですね … コレ。優先されますねー。普段 HTML 直書きは全然使わないので間違えました。すいません X(

CSS
p { color :red !important; }

こうしちゃうと、全ての p タグが真っ赤になります w どうしてもっていう時の最終手段ですね!WordPress のプラグインの外部スタイルシートなど、アップグレードの度に書き換えるのが面倒なので、!important を使って、自前のスタイルシートに書いちゃったりしてますけど。

CSS での要素ごとの特性や、無効になるスタイル、スタイルの優先順位など見てきましたけど、思うようにスタイルが反映されないんだけど … という時は、こういうところを確認してみると、意外に落とし穴にハマっていることもあるかもですね!

私もちょくちょくハマってるので、この記事書いて再確認もできましたー :D


CSSやHTMLについて、Web Design KOJIKA 17 さんの記事もとても参考になります!

Comments

Thank you for the comment.