HTML Living Standard/非フロー・コンテンツ
HTMLの「非フロー・コンテンツ」とは、フローコンテンツの流れに影響を与えない要素を指します。これらの要素は、通常のドキュメントの表示や構造には直接関与せず、主にスクリプトやスタイルシートの定義など、文書の振る舞いに関連した目的で使用されます。
特徴
[編集]非フロー・コンテンツは、次のような特徴を持ちます：
- レンダリングに影響を与えない：これらの要素は、ページのレイアウトや表示には影響を与えません。
- フロー外の要素として扱われる：フローコンテンツ内に含まれていても、その流れを中断しません。
- 特定の目的に特化：スタイル定義やスクリプト実行など、特定の技術的な機能を提供します。
主な非フロー・コンテンツ要素
[編集]以下は非フロー・コンテンツに分類される主な要素です。
<script>
[編集]<script> 要素は、クライアントサイドのスクリプトを埋め込むために使用されます。
- 使用例
<script> console.log("This is a script example."); </script>
- 主な属性
-
- src: 外部スクリプトファイルのURLを指定します。
- type: スクリプトの種類を指定します（例: `text/javascript`）。
- async: スクリプトを非同期で読み込むことを指定します。
<style>
[編集]<style> 要素は、埋め込みCSSスタイルを定義するために使用されます。
- 使用例
<style> body { background-color: #f0f0f0; } </style>
- 主な属性
-
- 通常、属性を持たず、CSSコードが直接記述されます。
その他の非フロー・コンテンツ
[編集]以下の要素も非フロー・コンテンツに分類されます：
非フロー・コンテンツの使用上の注意
[編集]非フロー・コンテンツは、適切な場所で正しく使用することで、ページの機能性を向上させます。以下のポイントに注意してください：
- 適切な属性設定: スクリプトやスタイルの読み込みを効率化するために、
asyncやdefer属性などを活用します。 - HTML内での適切な配置: 非フロー・コンテンツは、通常
<head>内に配置することが推奨されます。ただし、必要に応じて<body>内にも配置可能です。 - セキュリティ対策: 外部リソースを利用する場合は、信頼できるソースを選び、必要に応じてCSP（Content Security Policy）を設定します。
まとめ
[編集]非フロー・コンテンツは、HTML文書においてスタイルやスクリプトなどの追加機能を提供します。これらの要素はフローコンテンツの流れに影響を与えず、主に文書の振る舞いを制御するために使用されます。適切に使用することで、ユーザー体験を向上させることが可能です。