text-indentを使って装飾

text-indentプロパティは、段落の先頭の一字下げなどに利用されるプロパティですが、これの値にマイナス値を指定して装飾に使ってみます。

テクニック使用後

Sample見出しです。

やり方

HTMLはこんな感じ。

<h6 class="sample">
Sample見出しです。
</h6>

スタイルシートはこんな感じ。

h6.sample{
    background-color:#c8a485;
    border-color:#7f2d00;
    border-width:0px 0px 2px 80px;
    border-style:solid;
    font-size:25px;
    text-indent:-24px;
    color:#ffffff;
    height:30px;
    margin:10px;
}

HTMLは見出しの設定だけなので特に言うことはありません。

スタイルシートも背景色やボーダーで基本的な装飾を施した上に、text-indentで適当なマイナス値を設定するだけというシンプルな物です。

しかし、たったコレだけのことで、背景画像を使うこともなくサンプルのような装飾が可能になります。

---

使いこなすための＋α

ボーダーの幅を短くしたり、indentのマイナス値を大きくするとはみ出すことも出来ます。

Sample見出しです。

一文字だけ被るようにすると見出しとして有効かもしれませんね。

---