個別記事のページです

2014年12月22日(月)
このエントリーをはてなブックマークに追加

CSSの記述で覚えておきたい意外な事実

CSSを記述する時、idやclassが増えると「navi01」「navi02」...など
数字を使うシーンも出てくると思います。


そこで、idやclass名で数字を使う際に覚えておきたい意外なことをご紹介します。


まずはCSSを設定したいサンプルを用意

とりあえず今回は同じ3つ四角を用意してました。

まずはhtmlとCSSを用意

htmlでリストを作成。

<ul>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
</ul>


CSSでリストをボックス化します。

li {
float:left;
width:100px;
border:1px solid #000;
height:100px;
padding:10px;
text-align:center;
list-style:none;
font-weight:bold;
}


この3つをclassを使って全て違う色に振り分けしていこうと思います。


異なるclass名を使ってCSSの振り分け

いよいよCSSを使って3つの四角に異なる色を付けていきます。


まずはhtml側でclass名をあてます。

<ul>
<li class="box">サンプル1</li>
<li class="1box">サンプル2</li>
<li class="2box">サンプル3</li>
</ul>


CSSはこのように背景に色を指定します。

.box{background:#F30;}
.1box{background:#03F;}
.2box{background:#FF3;}


さぁ変わるかな!?とブラウザでチェックしてみると...

CSSが反映しきれていない様子

あれ...?一番左の1つしか変わっていない?
html側とCSSのclass名は同じなのにどういうこと?となると思います。


実は...idやclass名の先頭に使ってはいけなかった!

ちょっと意外かもしれませんが、実はidやclass名では、
先頭に数字を使った名前ではCSSで設定したスタイルを読み込んでくれないのです。


※「-(ハイフン)」など記号が先頭の場合は一応CSSが反映されます


そこで、class名の数字が先頭にならないよう、htmlとCSSの記述を以下のように変更しました。


html側でclass名を修正。

<ul>
<li class="box">サンプル1</li>
<li class="box1">サンプル2</li>
<li class="box2">サンプル3</li>
</ul>


CSSのclass名もhtmlに合わせます。

.box{background:#F30;}
.box1{background:#03F;}
.box2{background:#FF3;}


さて、CSSは反映されたかな...?とブラウザを再読み込みして...

全てのCSSが反映された様子

今度はちゃんと変わりました!
たったこれだけ...?という感じの事ですが、知っておいて損は無いです。


ちなみにidやclass名は数字が先頭でなければ、
「main1style」など数字が間に入る名前でもOKです。

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ