Semantic UI Doc ( Elements - Header ) を読む

Semantic UI の Header を読んだ。ヘッダーにテーマは 5 個ある。

ヘッダーはコンテンツの短い要約を示すのに使われる。ヘッダーにはいくつかタイプがあり、ひとつはページヘッダーである。これはページにおけるセクションの階層をあらわすために使われ、h1.ui.header 〜 h6.ui.header といった具合に HTML 要素と合わせて指定する。フォントサイズと余白は rem を使った値でスタイルされている。

つぎはコンテンツヘッダーで、これはセクション内でコンテンツの重要性をあらわすために使われ、.ui.huge.header や .ui.small.header のように指定する。フォントサイズと余白は em を使った値でスタイルされている。

3 つ目はアイコンヘッダーで、これはアイコンを主役としたヘッダーで、.ui.icon.header をコンテナーに、アイコンとテキストを包んで指定する。

<!-- アイコンヘッダー -->
<h2 class="ui icon header">
  <i class="settings icon"></i>
  <div class="content"> ... </div>
  </div>
</h2>

4 つ目はサブヘッダーで、ヘッダーほど強調したくない要素に対して指定する。.ui.sub.header でサブヘッダーを表示できる。

ここからはヘッダーの中身について。ヘッダーは画像やアイコンを含めることができる。また、サブヘッダーをふくめることも可能。

<h2 class="ui header">
  ...
  <div class="ui subheader"> ... </div>
</h2>

見た目的に無効な状態のヘッダーを表示することもでき、これには .ui.disabled.header を指定する。

ヘッダーにはいくつかバリエーションがあり、背景あり、下線あり、水平方向の配置、色つき、反転色など、見た目を変更できる。