理論的なHTML構造だけで角丸背景を実装するサンプルの小技の紹介

論理的なHTML構造を崩さずに、角丸などの背景を実装するサンプルです。

タイトル

ここに適当なテキストを入れます。
考えられる最大サイズを想定した背景を用意しておくことで、少ないDIVで角丸などを実現しています。

サイトの横幅などにもよりますが、横は800pxほどの画像を用意しておけば問題ないでしょう。
縦幅に関しては、表示する内容にもよると思いますが、1000pxほどもあれば十分収まると思います。

それ以上伸びる可能性があったとしても、今回のサンプルのような画像であれば、たとえ10,000pxまで大きくしても、5KBから18KBくらいになるだけなので、ファイルサイズ的にはそれほど大きくならないと思います。 (実際に、10,000pxまで大きなコンテンツはそうないでしょうし)

なので、簡単なグラデーションの背景などであれば、gifで書き出せばファイルサイズもほとんど変わらずにサイズの大きな画像が作れると思います。

※文字サイズを変更すると、背景の伸縮が確認できます。