TOPページ >  箇条書きにする > 箇条書き文章の余白を指定する

箇条書き文章の余白を指定する

ホームページやブログなどのウェブサイトでは、HTML言語の OL タグや LI タグを使って、文章を箇条書きにして表示することができますが、これらのタグを使うと、通常自動で 文章の上下や左に余白がとられます。

スタイルを指定しない場合、デフォルトでの余白の量はブラウザの場合によってまちまちですが、必要に応じて、この余白を指定したほうがいいかも知れません。

このとき、各要素の領域の捉え方が異なるため、余白(マージンやパディング)を指定した際の挙動がブラウザにより大きく異なるので、注意が必要です。

テーブルを作成する
<ol style="background-color:yellow;">
<li style="background-color:orange;">縦にまたがるセルを作成する
<li style="background-color:orange;">横にまたがるセルを作成する
<li style="background-color:orange;">テーブルに枠線を付ける
<ul style="background-color:lime;">
<li style="background-color:cyan;">枠線の色を指定する
<li style="background-color:cyan;">枠線の太さを指定する
</ul>
<li style="background-color:orange;">テーブルに表題を付ける
<li style="background-color:orange;">セル内の余白を指定する
</ol>

このサンプルは、わかりやすいように各要素の背景色を指定しています。このソースを、InternetExplorer と Netscape の両ブラウザでそれぞれ表示させると、次のようになります。

  • InternetExplorerの場合
    InternetExplorerでのリスト表示
  • Netscapeの場合
    Netscapeでのリスト表示

デフォルトでは両方ともだいたい同じように見えますが、IEは マージンのみで、NNはパディングのみで数字や記号の表示領域(幅)を確保しています。

このため IEでデフォルトのマージンが多すぎるな、と思ってマージンを指定すると、 NNではマージンが0から増える格好になりますのでブロック全体がさらに右側に下がります。一方NNでパディングが多すぎるな、と思ってパディングを指定すると今度は IEで0だったパディングが増えますので右側に下がります。

両ブラウザの考慮して調節しましょう。上記のソースで、インデントを少し抑えたかたちにしてみます。

テーブルを作成する
  1. 縦にまたがるセルを作成する
  2. 横にまたがるセルを作成する
  3. テーブルに枠線を付ける
    • 枠線の色を指定する
    • 枠線の太さを指定する
  4. テーブルに表題を付ける
  5. セル内の余白を指定する

このソースは次のようになっています。

テーブルを作成する
<ol style="background-color:yellow;margin-left:25px;padding-left:0">
<li style="background-color:orange;;">縦にまたがるセルを作成する
<li style="background-color:orange;;">横にまたがるセルを作成する
<li style=;"background-color:orange;">テーブルに枠線を付ける
<ul style="background-color:lime;margin-left:18px;padding-left:0">
<li style="background-color:cyan;;">枠線の色を指定する
<li style="background-color:cyan;;">枠線の太さを指定する
</ul>
<li style="background-color:orange;;">テーブルに表題を付ける
<li style="background-color:orange;;">セル内の余白を指定する
</ol>

余白は、小さすぎると数字や記号がつぶれますので注意してください。上記の例では、padding を 0にして marginのみで調節しましたが、逆でも背景色の色分けがなければ、見た目は同じふうに表示されます。

マージンやパディングについての詳細は、別ページでご紹介しています。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
箇条書きの頭の記号に画像を指定する
定義語を表示する
箇条書き文章の余白を指定する
箇条書きの開始番号を指定する
箇条書きの番号形式を指定する
箇条書きにする(通し番号あり)
箇条書きの頭の記号を指定する
箇条書きにする(通し番号なし)
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス