無料web素材 Tyto-Style

複数行の見出しに対応した背景画像の使い方(2)

| CSS, トピック, 無料背景素材, 見出し用背景素材

複数行の見出しに対応した背景画像の使い方(2)

今回は以前の記事に続き、複数行の見出しに対応した画像の装飾に付いての解説です。

ポイントはHTMLは前回と同じものを利用して、違うデザインにすることです。前回と同様、横幅のみ固定して、縦に伸ばしてもうまく背景画像内にテキストが収まるようにします。

» 『複数行の見出しに対応した背景画像の使い方(2)』の続きを読む

複数行の見出しに対応した背景画像の使い方(1)

| CSS, 無料背景素材, 見出し用背景素材

複数行の見出しに対応した背景画像の使い方(1)

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

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

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

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

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

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

» 『複数行の見出しに対応した背景画像の使い方(1)』の続きを読む