カテゴリー: CSS

HTML5+CSS3で新サイトを構築していたら、CSSの特にセレクタ周りでいろいろとできるな～と思ったので忘れないうちにメモしておきます。ちなみにCSS3からのセレクタもありますが、CSS2.1でもセレクタはたくさんありました。それらも含めて使ったものの紹介なので、CSS3に特化したものではないことにご注意ください。

まずはよくある「最初だけ」とか「最後だけ」とか「偶数・奇数」などなど。

htmlコード

<section id="contents">

  <h1>title</h1>

  <article>
    <h2>sub_title1</h2>
    <p>contents1</p>
  </article>

  <article>
    <h2>sub_title2</h2>
    <p>contents2</p>
  </article>

  <article>
    <h2>sub_title3</h2>
    <p>contents3</p>
  </article>

  <article>
    <h2>sub_title4</h2>
    <p>contents4</p>
  </article>

</section>

例えばこのようなソースがあったとします。この時以下のことをやるには…

１．最初のコンテンツだけ枠をつけたい
CSSコード

#contents article:first-child {
  border:1px solid;
}

２．最後のコンテンツだけ枠をつけたい
CSSコード

#contents article:last-child {
  border:1px solid;
}

３．偶数のコンテンツだけ枠をつけたい
CSSコード

#contents article:nth-child(even) {
  border:1px solid;
}

４．奇数のコンテンツだけ枠をつけたい
CSSコード

#contents article:nth-child(odd) {
  border:1px solid;
}

まあ、このあたりはgoogle先生でCSSセレクタで探すと普通に書いてありますね。
さらに…

５．最初のコンテンツ以外に枠をつけたい
CSSコード

#contents article:not(:first-child) {
  border:1px solid;
}

上記５の書き方で他に、
・特定のclassが描かれているコンテンツを省く
CSSコード

#contents article:not([class="hoge"]) {
  border:1px solid;
}

などもできますね！

これらは組み合わせることもできるので、例えば
CSSコード

section:not(:last-child) article:ntn-child(odd) {
  border:1px solid;
}

とかすると、最後のセクション以外の奇数のアーティクルに枠をつけるなんてこともできますね。

もっと変態な書きかたをすれば…

#contents article:not(:first-child):not(:last-child) {
  border:1px solid;
}

なんて書けば最初と最後のアーティクル以外に枠をつけます。

いやぁ、深いですねぇ。

ん～、またバグなのかどうなのか、いまいち分からない問題を発見ヽ(´ー｀)ノ

文字の色を<em class="font_red">赤</em>にする。

このようなコードの場合で、cssを以下のように

.font_red { /* 赤色 */
	color: red;
	background-color:inherit;
}

記述した場合文字が赤色にならない。
これを以下のように

.font_red { /* 赤色 */
	background-color:inherit;
	color: red;
}

入れ替えるだけで反映されるようになる。
background-color:inherit指定がだめなのか、順番が問題なのかは不明。

ちなみに、以下のように

.font_red { /* 赤色 */
	color: red;
	background-color:blue;
}

などと色を指定した場合はどちらも反映されます。

えっと、HTML5＋CSS3で新規ページを作り始めたわけですが、いろいろはまった上に後で忘れそうなので【メモ】残します。

まず、(X)HTML5+CSS3での3カラムデザインを行うためにdisplay:box;を使おうとしているわけですが、以下コード。

<div id="container">
  <section data-role="content" id="contents">
    <h2>main_content</h2>
    <article>
      <p>main</p>
    </article>
  </section>
  <nav id="sidebar_left">
    <h3>sidebar_left</h3>
    <ul>
      <li>menu_1</li>
      <li>menu_2</li>
      <li>menu_3</li>
    </ul>
  </nav>
  <nav id="sidebar_right">
    <h3>sidebar_right</h3>
    <ul>
      <li>menu_1</li>
      <li>menu_2</li>
      <li>menu_3</li>
    </ul>
  </nav>
</div><!-- END div#container -->

このコードでCSSを記述して3カラムを作ります。次にCSSコード。

#container {
　　width:100%;
　　display:box;
　　display:-moz-box;
　　display:-webkit-box;
　　display:-ms-box;
}

#sidebar_left {
　　width:18%;
　　box-ordinal-group:1;
　　-moz-box-ordinal-group:1;
　　-webkit-box-ordinal-group:1;
　　-ms-box-ordinal-group:1;
　　background-color:#CF6;
}

#contents {
　　width:64%;
　　box-ordinal-group:2;
　　-moz-box-ordinal-group:2;
　　-webkit-box-ordinal-group:2;
　　-ms-box-ordinal-group:2;
　　-webkit-box-sizing:border-box;
　　background-color:#FFF;
　　padding:5px;
}

#sidebar_right {
　　width:18%;
　　box-ordinal-group:3;
　　-moz-box-ordinal-group:3;
　　-webkit-box-ordinal-group:3;
　　-ms-box-ordinal-group:3;
　　background-color:#9999FF;
}

これはCSS3のdisplay:boxを使って、ソース上ではコンテンツが先でサイドバーがあとに記述されているような状況でも、box-ordinal-groupで順番を変更して表示してしまいましょうという方法です。

Chromeでは普通に表示できるんですけどね。Firefoxでdisplay:boxを使用し、かつ子要素の幅を％（パーセント）で指定すると幅がなくなっちゃいます。
なぜ％（パーセント）指定したいかというと、@media screen and (max-width: 1000px)  なんてやってリキッドデザインを目指すとどうしても必要になっちゃうんですね。

そこで、Firefox用にCSSを少し足します。

#sidebar_left {
　　-moz-box-flex:1;
}

#contents {
　　-moz-box-flex:1;
　　max-width:640px;
}

#sidebar_right {
　　-moz-box-flex:1;
}

-moz-box-flexで幅を均等にした上でmax-width:640pxで想定している最大の幅を指定しました。（当方の場合、最大幅1000pxでサイドバーの最大幅を180pxとしているため）

最初はFirefoxでcontentsに入力していたダミーの文字が折り返されずに表示されてしまったためにデザインが崩れてしまっていました。上記-moz-box-flexで相対幅をしていするとなぜか直ったのでこれを利用しています。％（パーセント）指定が効かないのはなぜなのかわかりません。。。