無料web素材 Tyto-Style

CSSの初心者向けの本や記事は「背景画像を使って見出しを飾ろう」という感じで、繰り返しのない一枚の画像を置く方法書いてくれていることはあっても、繰り返しについてはあまり詳しく触れられていないことが多い気がします。

逆に上級者向けのものを見ると、この辺りはできて当然というレベルで、説明を飛ばしてしまっています。

こんな状態なので、今ばりばりコーディングをやっている人でも初級者から中級者への移行期は結構悩んだりしたんじゃないでしょうか。

そんな風に思い、これから何回かに分けて見出しの装飾方法を紹介して行こうと思います。

まずはブログなどで見出しを書くと横幅も縦幅も固定された背景画像を利用すると、長いタイトルの時など背景画像からはみ出てしまいますが、それを画像の分割とCSSでうまく回避する方法を紹介します。

今はまだ全体を覆うdiv要素の中にマルチカラムでレイアウトされているものが多いと思うので、比較的横への繰り返しは制限されている一方、縦は自動的に繰り返される仕様になっていることが多いですから、縦への繰り返しを使ってテキストのはみ出しを回避したいと思います。