見出しH1~H6

823 views

見出しH1~H6

見出しH1~H6は、文書の構造を階層的に示すための重要なHTML要素です。
SmartUXでは、見出しを使用してページやセクションのタイトルを明確にし、ユーザーがコンテンツの構造を理解しやすくすることができます。
HTMLの見出し要素には、”h1″から”h6″までの6段階があります。それぞれの要素は重要度と階層を示し、スタイルの適用にも使われます。

詳細な説明

  1. “h1″から”h6″までの違い

    • “h1”: 最も重要な見出し。通常、ページ全体のタイトルや主要なセクションの見出しに使用されます。
    • “h2”: “h1″に次ぐ重要な見出し。ページ内の主要なセクションやサブセクションの見出しに使用されます。
    • “h3″:”h2” のサブセクションの見出しに使用されます。
    • “h4″:”h3” のサブセクションの見出しに使用されます。
    • “h5”:”h4″のサブセクションの見出しに使用されます。
    • “h6”:最も低い階層の見出し。通常はほとんど使われませんが、詳細な文書構造が必要な場合に使用されます。
  2. 階層構造の役割

    • 見出し要素は文書の階層構造を示し、ユーザーや検索エンジンにとってコンテンツの意味と構造を明確にします。
    • アクセシビリティの観点からも重要で、スクリーンリーダーを使用するユーザーが文書の構造を理解しやすくなります。

文書の構造を明確に示すための重要なツールです。見出しを適切に使うことで、ユーザーにとって読みやすく理解しやすいコンテンツを提供することができます。また、見出しを正しく使うことで、検索エンジンのインデックス作成やアクセシビリティの向上にも寄与します。

セクションの見出しを 6 段階で表します。<h1> が最上位で、<h6> が最下位です。

コンポーネントを配置すると、デフォルトで以下のコードが定義されます。

<h1 data-comp-id=”h1.1″ id=”h1.1″>Heading1:</h1>

以下のプロパティがあります

プロパティ 内容
Text コントロールに表示されるテキスト。
歯車ボタンをクリックするとダイログが表示されます。ここで、表示するテキストを入力したり、Angular関数を選択することができます。
Text Transformation テキストの変換方法を指定します。以下から選択できます。

  • Default …… 変換しません。
  • Uppercase …… 大文字に変換します。
  • Lowercase …… 小文字に変換します。
  • Capitalize …… 先頭文字のみ大文字に変換します。
Class 任意のクラスを定義することができます。

Share this Article

見出しH1~H6

Or copy link

CONTENTS