Skip to content

テクニック G224:意味のあるテキストのインデント及びリフローを考慮する

このテクニックについて

このテクニックは 1.4.10: リフロー (十分なテクニック) に関連する。

このテクニックは、スタイルの切り替えをサポートする全ての技術に適用される。

解説

テキストのインデントは、テキストコンテンツの提示及び理解しやすさにとって重要であると考えられる場合がある。インデントを削除すると、意味又は機能性が損なわれる可能性がある。例えば、インデントを削除すると、順序なしリストの入れ子に気づくのが難しくなる可能性がある。さらに、コードの機能には必須ではないとしても、インデントを維持することはコードパターンを理解する上で重要な場合もある。

インデントを維持することは、これらのテキストのインスタンスにとって重要であるため、これらの個別のコンテンツセクションの 2 次元スクロールが必要になる可能性がある。しかし、インデントを維持しながら、ビューポート内に可能な限り多くのテキストを表示するために、スタイルを修正することが可能である。そのような修正を行うことで、2 次元スクロールの発生を緩和しないまでも、制限することができ、コンテンツを読みやすくすることができる。

事例

事例 1

ウェブサイトは、入れ子にされたリスト形式で情報を伝達している。リスト階層の分かりやすさは、リストコンテンツのインデントによって支えられている。個々のリスト項目のテキストをリフローすることは重要であるが、全てのコンテンツを 320 CSS ピクセル幅のビューポートに収めるためにフラット化すると、リスト階層が損なわれる。

下記の例のリストでは、親リスト項目のテキストに詳細なコンテキストを提供するために、入れ子にされたリストがさらに追加されている。視覚的な階層構造を維持するために、各リストレベルのインデントはそのまま維持されるが、コンテンツ制作者が定義した CSS ブレークポイントに達するとインデントが変更される。コンテンツが 320 px 幅のビューポートを超えて広がる可能性を軽減するため、各ブレークポイントにスタイルが追加されている。ビューポートのボーダーとの視覚的な間隔も考慮し、コンテンツが窮屈に感じられないように配慮されている。最小のブレークポイントでは、リスト項目のコンテンツに最小幅が与えられ、多数の入れ子レベルを持つコンテンツリストが「押しつぶされる」可能性を軽減する。このブレークポイントでは、入れ子にされた各リストレベルを水平スクロールで表示できる。入れ子にされたリストがビューポート内に表示されると、入れ子にされたリスト項目のコンテンツを読むのに垂直スクロールだけが必要になる。

<div class="example">
	<ul>
		<li>
			<p>Make a list using one of the HTML list elements, or even an ARIA <code>role=list</code> container.</p>
			<ul>
				<li>
					<p>There are three types of lists in HTML which can contain list items (<code>li</code> elements).</p>
					<ul>
						<li><p>the <code>ul</code> element</li>
						<li><p>the <code>ol</code> element</li>
						<li><p>the <code>menu</code> element</li>
					</ul>
				</li>
				<li>
					<p>Another type of list, description lists, exist as well - but they do not contain list items (<code>li</code> elements).</p>
				</li>
        ...
			</ul>
		</li>
		<li>
			<p>Neither the start or end tags of any of the HTML list elements are omissible.</p>
			<ul>
				<li><p>The end tags of <code>li</code> elements can be omitted if the <code>li</code> element is immeditely followed by another <code>li</code> element or there is no more content in the parent list element.</p>
				</li>
				...
			</ul>
		</li>
		...
	</ul>
</div>

*, *::before, *::after {
    box-sizing: border-box;
}
body, html {
    font-family: arial;
}
@media screen and ( max-width: 640px ) {
    .example {
        overflow: auto;
        max-width: 640px;
    }
    ul {
        padding-inline-start: 1.25em;
    }
    li p {
        padding: .25em;
        margin: .5em 0 .5em -.25em;
        max-width: 300px; /* saftey net for max-width */
    }
}
@media screen and ( max-width: 400px ) {
    ul { padding-inline-start: 1em; }
    li p { min-width: 300px } {
        min-width: 300px;
    }
}

動作例: a list where nested levels can be read within a 320px wide viewport.

事例 2

コードスニペットを提供するウェブサイトでは、行のインデントを維持する必要がある。インデントはコードの構造だけでなく、Python などの一部の言語では、コードブロックを定義する際の要件でもあるためである。

利用者がウェブページを拡大すると、このインデントの CSS が調整され、この必要な構造を維持しながら、1 行に表示されるテキストを増やすことができる。

次は Python コードの例である。各行のインデントは、ブロックとして実行される一連のステートメントのグループを作成するために必要である。

def complex_function(x):
    if x > 0:
        for i in range(x):
            if i % 2 == 0:
                print(f"{i} is even")
                for a in range(i):
                    if a % 5 == 0:
                        print(f"  {a} can be divided by 5")
                    else:
                        print(f"  {a} cannot be divided by 5")
            else:
                print(f"{i} is odd")
                for a in range(i):
                    if a % 2 == 0:
                        print(f"  {a} is even")
                    else:
                        print(f"  {a} is odd")
    else:
        print("x is not a positive number")

次のコード例は、インデントを使用して HTML ドキュメント内の要素の入れ子を伝える方法を示している:

<html lang=en>
	<head>...</head>
	<body>
		<div>
			<!-- ... keep indenting as necessary  -->
		</div>
	</body>
</html>

このようなコードブロックのインデントは、CSS メディアクエリを使用して、さまざまなビューポートサイズで調整できる。

@media screen and ( min-width: 320px ) {
	pre {
		tab-size: 8px;
	}
}

@media screen and ( min-width: 640px ) {
	pre {
		tab-size: 16px;
	}
}

@media screen and ( min-width: 1280px ) {
	pre {
		tab-size: 32px;
	}
}

動作例: code snippets using CSS to modigy indentation width at different breakpoints.

検証

リストの事例の手順

  1. ウェブページを、ページをズームしたり、ユーザエージェントのサイズを変更したりできるユーザエージェントで表示する。
  2. ブラウザのウィンドウをズームイン又はサイズ変更し、ビューポートが 320 CSS ピクセル幅に相当するようにする。
  3. リストの内容は幅に収まるため、リストを読むには垂直スクロールだけで済む。
  4. 又は、入れ子にされた各リストを水平スクロールで表示する。入れ子にされた各レベル内のリスト項目の内容を読むには、垂直スクロールだけが必要である。

期待される結果

  • チェック 3 又は 4 が真である。

コードスニペットの事例の手順

  1. ウェブページを、ページをズームしたり、ユーザエージェントのサイズを変更したりできるユーザエージェントで表示する。
  2. ブラウザのウィンドウをズームイン又はサイズ変更し、ビューポートが 320 CSS ピクセル幅に相当するようにする。
  3. コードスニペットは幅に収まるため、各行を読むには垂直スクロールするだけで済む。
  4. 又は、折り返しのない行が必須でないコードでは、コードが折り返されるもしくは、行の折り返しを可能にするメカニズムが提供される。
  5. 又は、インデント及び改行はコード言語にとって意味を持つ。

期待される結果

  • チェック 3、4 又は 5 が真である。
Back to Top