HTML応用

HTML5

CSS3

jQuery

PHP

デザインのコツ

SEO対策

CSSのさまざまな適用方法

特定の要素にスタイルを適用するとき、何重にもdivを重ねたり、いちいちidやclassを使うのは効率がよくありません。

さまざまなスタイルの適用方法を知っておくことで、シンプルなhtmlの構造でも自在にスタイルを適用することができます。

入れ子構造を使う

以下のhtmlのそれぞれのpタグに赤や青を適用するとします。

index.html
<div id="left">
<p>この文字は赤にしたい</p>
</div>

<div id="right">
<p>この文字は青にしたい</p>
</div>

そんな場合、それぞれのpタグにclassをつけて指定すると以下のようになります。

index.html
<div id="left">
<p class="red">この文字は赤にしたい</p>
</div>

<div id="right">
<p class="blue">この文字は青にしたい</p>
</div>
style.css
.red{
    color:rgb(100%,0,0);
}
.blue{
    color:rgb(0,0,100%);
}

この方法だと、classが増えてしまったり、htmlの書き換えが必要だったりと面倒です。

なので、以下のようにどのidのdivボックスに入っているかで判別して指定してみましょう。

index.html
<div id="left">
<p>この文字は赤にしたい</p>
</div>

<div id="right">
<p>この文字は青にしたい</p>
</div>
style.css
#left p{
    color:rgb(100%,0,0);
}
#right p{
    color:rgb(0,0,100%);
}

この方法なら、classを増やさずにそれぞれのpタグに別のスタイルを適用できます。

htmlも最初のままでOK!

ひとつの要素に複数のclassをつける

Classは、一つの要素に複数設定することもできます。

index.html
<p class="red">この文字は赤にしたい</p>

<p class="bold">この文字は太字にしたい</p>

<p class="bold red">この文字は赤で太字にしたい</p>
style.css
p.red{
    color:rgb(100%,0,0);
}
p.bold{
    font-weight:bold;
}

複数のclassに同じスタイルを適用

「別の要素だけどスタイルがほとんど一緒！でも一部だけ違う！」
そんなとき、同じスタイルの部分は以下のようにまとめて書くことができます。

index.html
<p class="red">この文字は赤にしたい</p>

<p class="bold">この文字は太字にしたい</p>
style.css
/* .redと.boldそれぞれ独自のスタイル */
p.red{
    color:rgb(100%,0,0);
}
p.bold{
    font-weight:bold;
}

/* .redと.boldに共通するスタイルは一括で設定 */
p.red, p.bold{
    font-size:15px;
    margin:10px;
}
PAGE TOP