Logo: Ubie Vitals

Heading

View on GitHub: Copmonent

ページ、セクションなどの見出しを提供

Example#

Props#

NameTypeDefaultDescription
textAlign
optional
"left" | "center" | "right"-テキストの配置。指定しない場合、親要素の配置を継承
primaryIcon
optional
ReactNode-アイコン。プライマラーカラーで表示。icon propはどれかひとつのみを指定してください
accentIcon
optional
ReactNode-アイコン。アクセントカラーで表示。icon propはどれかひとつのみを指定してください
whiteIcon
optional
ReactNode-アイコン。ホワイトカラーで表示。icon propはどれかひとつのみを指定してください
size"xs" | "sm" | "md" | "lg" | "xl"mdサイズ。Typographyトークンの値を指定 xs=16px, sm=18px, md=20px, lg=24px, xl=28px
leadingBorderbooleanfalse行の先頭にボーダーを表示
as"object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr"pレンダリングされるHTML要素
color"main" | "primary" | "accent" | "white"secondaryテキストのカラーバリエーション
id
optional
string-HTMLのID属性
htmlFor
optional
string-HTMLのfor属性。label要素の場合に使用
boldbooleantrue太字とするかどうか、falseの場合はnormal
noWrap
optional
boolean-ｚ
data-*
optional
string-Custom data attributes

Feature#

  • 見出しのスタイルを提供します
  • 書籍などと違い、ユーザーはコンテンツを注意深くは読みません。要素を拾っていくザッピングするような閲覧方法をするといわれています
  • そのため、見出しで視覚的に目立つ箇所をデザインすることで、ユーザーがコンテンツを素早く把握することが期待できます

Usage#

  • 通常見出しのスタイルの場合、意味的にも見出しであることが多いです。asでh1〜h6を指定してください
    • pを使うような場合は例外です
  • アイコンは、1種類のみ指定可能です
  • 見出しに含めるテキストは簡潔に保ちましょう

見出しのレベル順序を守る#

  • <hx>として<Heading>を用いる場合、見出しレベルを昇順で扱いましょう
  • 極力見出しレベルの数字をスキップすることは避けましょう。<h4>の次に<h6>を使ってはいけません。
  • 見出しは、スクリーンリーダーの「見出しジャンプ機能」で利用されます。見出しのみを抜き出し、メニューとして表示します。
  • 視覚的にも情報の階層を意識すると良いでしょう
    • サイズ、色、アイコンなどにより、情報の階層が表現できます

<hx>と<section>はセットで#

見出しは、あるコンテンツのまとまりを説明するために配置されます。そのためHTMLマークアップでもセクショニング・コンテンツである<section>要素と合わせて使用されることがほとんどです。 書籍の章・節・項をイメージするとわかりやすいでしょう。文章のまとまりを表すものが<section>であり、見出しが<hx>にあたります。

<section>
    <Heading as="h2">...</Heading>

    <p>...<p/>
    <p>...<p/>
    <p>...<p/>
</section>

裏を返せば、見出しのない場所には<section>要素は配置しません。

<section>以外のセクショニング・コンテンツは<article>、<aside>、<nav>があります。適切なマークアップをすることで、開発者にとってもコードの可読性が向上します。

参考: