ホームページ背景画像ありのボックスの文字をはみ出させない方法
ボックスに背景画像を割り当てることって結構ありますよね。例えばこの部分のすぐ上を見てください。これは、下記のような背景画像を割り当てたボックスの上に、テキストがのっています。
実はこういった使い方は、文字がはみ出してしまう可能性を有しています。この利用例では2行しか使わないと決めているので、文字がはみ出す機会はあまりないと思いますが、行数が変化する場合はどうでしょうか。
はみ出してしまいますよね。これをはみ出させないようにしてみよう、というのがこのページの趣旨です。
実際、Web制作の中ではかなりよく使われる基礎テクニックなのですが、まだやったことがない！という方のためにご紹介します。
解決方法
解決方法にはいくつかありますので、一つずつ説明します。
背景画像を大きくする（最適な大きさにする）
一番簡単で誰にでも思いつくのが、背景画像の縦幅を最適な大きさに修正する方法です。試しにやってみましょう。
ピッタリの大きさに画像を大きくしたので、当然揃いますよね。でもこれは、一行の文字が多くなると、環境によってははみ出してしまう可能性もあるのです。例えば、下記のような場合。
上は、Windows環境では問題なく表示されていると思います。しかし、MacのSafariやFirefoxだと、次のように見えるのです（Mac Safariのスクリーンショット）。
これでは仕事だったらクライアントからクレームを受けても仕方ありません。
また、もう一つ問題があります。四行・五行となると、その都度画像を大きくしなければならないので、大変面倒だということです。逆に、長くなることをみこんで画像を大きくしすぎると、文字を少なくしたときに、空白が目立ってしまいます。
ただし手っ取り早く実装できるので、あえてこの方法が使われることも結構あるんですけれどね。
可変長のボックスにする
これが本命の方法です。はみ出しが許されない場合や、文章の増減があるとき、コストをかける時（と言っても5分～10分程度の違いですが）はこちらを用います。画像を三分割にして、本文部分のみ、背景画像をY方向に繰り返し処理することで、可変長のボックスを作ることが可能です。まずは、下記のように画像をスライスします。
そして、次のようなコードを書きます。
- ※<div class="header">部分は、見だしタグ（hX）でもいいと思います。
- ※実装方法には、いろいろ違ったやり方もあります。
<div id="mybox">
<div class="header">～問題解決バージョン～</div>
<div class="body">本文<br>本文</div>
</div>
■CSS
#mybox {
padding-bottom:55px;
width:585px;
background:url(img/extendable_box/box_footer.gif) bottom no-repeat;
/* ↑三分割した一番下の画像 */
}
#mybox .header {
height:55px;
text-align:center;
line-height:55px;
background:url(img/extendable_box/box_header.gif) no-repeat;
/* ↑三分割した一番上の画像 */
}
#mybox .body {
padding:0 20px;
background:url(img/extendable_box/box_body.gif) repeat-y;
/* ↑三分割した真ん中の画像。これにより本文の背景が繰り返される */
}
すると、こんな感じになります。（※ここではシンプルに実装しているので、本文上下の隙間をあえて空けていますが、これを無くすようにもできます）
本文
こうすると、本文が長くなっても、ボックスのサイズが自動的に変わるようになります。
どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
短いCSSですので、読み解くのも難しくないと思います。解読するのもスキルを磨く内ですので、この方法をご存じなかった方はコードを解読してみてください。
これは実践では頻繁に出てくるテクニックですから、まだ覚えていない方は是非この機会に覚えてくださいね！
コメント
この記事へのコメントはまだありません。
Web制作Tips- デザイン
- ├フリーの写真素材を有効活用しよう
- ├デザイナーならこだわりたいカーニング（文字詰め）
- ├文字のジャンプ率で適切なサイトイメージを演出する
- ├TPOを考えてハズさないフォントを選ぶ
- └失敗しない配色の基本
- ユーザビリティ
- ├そのフォントサイズ、適切ですか？
- ├リンクテキストをわかりやすくする
- ├フォームのリセットボタンを考える
- ├リンク切れ時に適切な404ページを表示をする
- └フォームの確定ボタンは右?左?
- コーディング
- ├文法チェッカーで正しい(X)HTML/CSSを書こう
- ├インデントで読みやすいソースコードを
- ├文字化けを防ぐ&解消する方法
- └背景画像ありのボックスの文字をはみ出させない方法
- その他
- ├ディレクトリ構造は適切に
- └絶対パス?相対パス?ファイルの指定方法いろいろ
