line-heightで重ねあわせる

今回のテクニックはline-heightを使って文字重ね合わせてみます。 見出しに使うと効果的かも。

テクニック使用前

WEB工房きくちゃん
Super Style Sheet Technique

テクニック使用後

WEB工房きくちゃん
Super Style Sheet Technique

結構かっこいいでしょ？

やり方

HTMLはこんな感じになります。

<h6 class="sample">WEB工房きくちゃん<br>
<span>Super Style Sheet Technique</span>
</h6>

brで改行、spanでそれ以降の部分をマークアップします。

サンプルのスタイルシートはこんな感じになります。

h6.sample{
    margin:0;
    font-family:"ＭＳ Ｐゴシック","Osaka",sans-serif；
    font-size:36px;
    color:#cc9966;
    font-style:italic;
    border-bottom:double 3px #760014;
    line-height:0.4;
}
.sample span{
    font-family:"Times New Roman"；
    font-size:24px;
    color:#663300;
    padding-left:2em;
    font-variant:small-caps;
    word-spacing:10px;
    letter-spacing:3px;
    display:block;
}

今回のポイントはline-height:0.4とdisplay:block;です。

line-heightは主に行間を広げるのに使いますが、値を小さくすることで文字を重ねることも出来ます。今回のテクニックはそれを利用しています。

display:blockは本来なら無くても良いのですが、無いとIEとfirefoxでの見た目がだいぶ変わってしまうので設定しています。

font-familyやfont-variant、word-spacingプロパティを使って見栄えを整えてやれば、画像を使わなくてもかなりのところまで魅せることができます（センス次第ですが･･･）。上手く活用してみてください。

---

使いこなすための＋α

背景を指定する場合はちょっと注意が必要です。

h6に背景を指定した場合

WEB工房きくちゃん
Super Style Sheet Technique

spanに背景を指定した場合

WEB工房きくちゃん
Super Style Sheet Technique

背景を指定すると、背景がきちんと付かなかったり、文字が切れてしまったりします。 それで問題があるならば、上下のpaddingやmarginを指定してあげることで解決できます。

---