このページの本文へ
ナビゲーション

サンプルダウンロード

トップページ > サンプルダウンロード > 法則75 文字サイズを変更してもテキストが重ならないようにする

法則75 文字サイズを変更してもテキストが重ならないようにする

Internet Explorer 6

CSSソース

.container {
     width: 400px;
     height: 110px;
     margin: 0 auto 10px;
     padding: 10px;
     background: #6AACDB url(img/bg.gif) no-repeat right bottom;
     border: 1px solid #666;
}

ほかのWebブラウザ

XHTMLソース

<div class="container">
 <p>
  テキスト量は一定の為、height指定して固定しているが、
  文字サイズを変更するとテキストが重なってしまう。
 </p>
 <p>
  テキスト量は一定の為、height指定して固定しているが、
  文字サイズを変更するとテキストが重なってしまう。
 </p>
</div>
<div class="container">
 <p>
  テキスト量は一定の為、height指定して固定しているが、
  文字サイズを変更するとテキストが重なってしまう。
 </p>
 <p>
  テキスト量は一定の為、height指定して固定しているが、
  文字サイズを変更するとテキストが重なってしまう。
 </p>
</div>

CSSソース

p {
     margin: 0 0 1em;
     padding-right: 150px;
     font-size: small;
}
.container {
     width: 400px;
     height: 110px; ←①
     margin: 0 auto 10px;
     padding: 10px;
     background: white url(img/bg.gif) no-repeat right bottom;
     border: 1px solid #666;
}
body > .container {
     height: auto;
     min-height: 110px;
}

第5章 実践的なCSSデザインの法則 一覧

  1. 法則71 Webブラウザのデフォルトスタイルをリセットする
  2. 法則72 1行テキストの上下中央配置にはline-heightプロパティを使用する
  3. 法則73 画像の下の余白はvertical-alignプロパティで解消する
  4. 法則74 字下げとぶら下がりはCSSでコントロールする
  5. 法則75 文字サイズを変更してもテキストが重ならないようにする
  6. 法則76 定義リストを横並びにしてスマートに見せる
  7. 法則77 リストの横並びはインラインとして実現する
  8. 法則78 透過gif画像を利用してカラーバリエーションを作る
  9. 法則79 背景画像を指定してimg要素の見栄えをよくする
  10. 法則80 JavaScriptを使わずにロールオーバー時の画像拡大効果を再現する
  11. 法則81 ステッカーを貼ってプロモーション効果を高める
  12. 法則82 スクロールバー領域を常に確保してセンタリング位置のズレを避ける
  13. 法則83 角丸の背景は最低限の要素で実現する
  14. 法則84 未対応セレクタも状況により使用してかまわない
  15. 法則85 CSS3セレクタを使用してスマートなCSS を記述する

このページのトップへ


取り扱いオンラインショップ
  • インプレスダイレクト
  • Amazon
  • 楽天ブックス
  • Kinokuniya BookWeb
  • 7&Y セブンアンドワイ
  • livedoor BOOKS