リスト(ul要素)を装飾した際の表示差を解消 [ホームページ作成] All About

リスト（ul要素）の装飾結果がブラウザによって異なる ul要素とli要素で作る「リスト」（箇条書きなど）をスタイルシートで装飾したとき、ブラウザによって表示が大きく異なってしまった経験はありませんか？ 今回は、ブラウザによって「リストの装飾結果」に差が出てしまう点の、原因と対策をご紹介致します。 下図は、まったく装飾していない状態のリストです。左側がHTMLソースで、右側が表示結果です。 この状態なら、ブラウザ間に表示上の差はほとんどありません。 ここで、リスト全体に背景色を加え、左端にバーを表示するデザインを施したいとします。そこで以下のようにスタイルシートを記述すると…… ul { background-color: #eeffee; /* 背景 */ border-left: 5px solid green; /* 左端線 */ } 各ブラウザでは、以下のように見えます。 Inter

[jdash]

すぐに忘れる「ul」「li」とかの左の余白の話。『marginプロパティとpaddingプロパティのデフォルト値（標準の値）が異なっているのが原因ですから、 marginとpaddingの値を両方指定しておけば、表示上の差をなくせます。』