From 4f8c275977386a8e5ef969cf54d0575fc7b2d566 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 7 Nov 2021 15:31:45 +0900 Subject: CSS Lists に関する記事を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/07 時点の英語版に同期 --- .../consistent_list_indentation/index.md | 103 +++++++++++++++++++++ files/ja/web/css/css_lists_and_counters/index.md | 78 ++++++---------- 2 files changed, 131 insertions(+), 50 deletions(-) create mode 100644 files/ja/web/css/css_lists_and_counters/consistent_list_indentation/index.md diff --git a/files/ja/web/css/css_lists_and_counters/consistent_list_indentation/index.md b/files/ja/web/css/css_lists_and_counters/consistent_list_indentation/index.md new file mode 100644 index 0000000000..67b2c55a70 --- /dev/null +++ b/files/ja/web/css/css_lists_and_counters/consistent_list_indentation/index.md @@ -0,0 +1,103 @@ +--- +title: 一貫性のあるリストのインデント +slug: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +tags: + - CSS + - ガイド + - NeedsUpdate +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +--- +{{CSSRef}} + +リストのスタイル変更でよくあるのが、インデントの幅 (リスト項目がどれだけ右に移動するか) の変更です。あるブラウザーではうまくいっても、別のブラウザーでは同じ効果が得られないことが多いので、これには不満が残ります。例えば、リストに左マージンをなくすと、Internet Explorer ではリストが移動しますが、Gecko ベースのブラウザーでは頑固に固定されてしまいます。この記事では、起こりうる問題を理解し、それを回避する方法をご紹介します。 + +なぜそうなるのか、もっと大切なことはどうすればその問題を回避できるのか、それを知るためには、リストの構造を詳しく知る必要があります。 + +## リストの作成 + +まず、単一の純粋なリスト項目を考えます。このリスト項目は、マーカー (「ビュレット」とも) を持たず、まだリスト自体の一部ではありません。図 1 に示すように、シンプルで飾り気のない、空虚な空間に単独でぶら下がっています。 + +![図 1](consistent-list-indentation-figure1.gif) + +赤い点線の境界線は、リスト項目のコンテンツ領域の外縁を表しています。この時点では、リスト項目にはパディングも境界もないことを覚えておいてください。さらに 2 つのリスト項目を追加すると、図 2 のような結果になります。 + +![図 2](consistent-list-indentation-figure2.gif) + +これらを親要素で囲みます。ここでは順序なしリスト (`