Webパーツ辞典

コンテナ・カード

中身をひとまとまりに見せる箱。カード・パネル・アコーディオン・区切り線など。

  • カードCard

    画像・見出し・説明をひとまとまりの箱に入れて見せる部品。同じ形を並べて一覧にする使い方が多い。

    • 骨格
    • 一覧

  • パネルPanel

    見出しと中身を持つ、画面の一区画。管理画面で情報を種類ごとに分けるときによく使う。

    • 骨格
    • 管理画面

  • ボックスBox

    中身を枠で囲んだだけの箱。見出しを持たず、まとまりを示すためだけに置く。

    • 骨格

  • アコーディオンAccordion

    見出しを押すと下の中身が開く部品。閉じているときは見出しだけになり、場所を取らない。

    • 開閉
    • 省スペース

  • ヒーローHero

    ページを開いて最初に目に入る大きな領域。何のサイトかを一言で伝え、次の行動へ送り出す。

    • 骨格
    • 導線

  • セクションSection

    見出しと中身でひとまとまりにした、ページの一区切り。ページを読みやすい単位に割る。

    • 骨格

  • 区切り線Divider

    内容の切れ目を示す細い線。余白だけでは足りないときに、1本引いて話題が変わったことを伝える。

    • 骨格

  • 補足ボックスCallout

    本文の流れから少し浮かせて、補足や注意を目立たせる枠。ヒント・注意・警告で色を変えることが多い。

    • 補助
    • 注意

見分け方