Webパーツ辞典

すべてのパーツ（140件）

  • ヘッダーHeader

    ページのいちばん上に置く帯。ロゴと主要なメニューを入れ、どのページでも同じ場所に同じものが出るようにする。

    • 骨格
    • 全ページ共通

  • グローバルナビゲーションGlobal navigation

    全ページに同じ内容で置く、サイトの主要な行き先の一覧。サイト全体の地図の役割をする。

    • 骨格
    • 全ページ共通

  • ハンバーガーメニューHamburger menu

    横三本線のアイコンを押すとメニューが開く仕掛け。線がバンズと具に見えることからこの名前になった。

    • 開閉
    • スマホ

  • ドロワーメニューDrawer

    画面の端から引き出しのように滑り出してくるメニュー。ハンバーガーボタンと組で使うことが多い。

    • 開閉
    • スマホ

  • パンくずリストBreadcrumb

    トップページから今いるページまでの道すじを、階層順に並べたリンク。童話で道に落としたパンくずが由来。

    • 現在地
    • SEO

  • タブTabs

    同じ場所に複数の内容を重ねて置き、見出しを押して切り替える部品。書類のインデックスが由来。

    • 切り替え
    • 省スペース

  • ページネーションPagination

    一覧を何ページかに分けて、番号や「次へ」で行き来できるようにする部品。

    • 一覧
    • 移動

  • サイドバーSidebar

    本文の横に細長く置く領域。同じ階層のページ一覧や、絞り込み条件を並べる。

    • 骨格
    • 一覧

  • フッターFooter

    ページのいちばん下に置く領域。全ページ共通のリンク、運営者情報、著作権表示を入れる。

    • 骨格
    • 全ページ共通

  • アンカーリンクAnchor link

    同じページの中の特定の見出しへ飛ぶリンク。長いページの冒頭に目次として置くことが多い。

    • 移動
    • 目次

  • ページトップボタンBack to top

    ページの下の方まで進んだときに出てきて、押すと先頭まで戻るボタン。

    • 移動
    • 追従

  • ボトムナビゲーションBottom navigation

    スマートフォンの画面の下端に固定し、アイコンと短い名前を3〜5個並べたメニュー。アプリの主要な画面を親指ひとつで行き来させる。

    • スマホ
    • 追従

  • メガメニューMega menu

    グローバルナビの項目を押すと画面幅いっぱいの大きなパネルが開き、下層ページへのリンクを見出しつきで何列にも並べて見せるメニュー。

    • 開閉
    • 大規模

  • ステップ表示Step indicator

    入力・確認・完了のように、手続きがいま何番目の段階にあるかを番号つきの丸と線で示す部品。申し込みや購入の画面で見かける。

    • 現在地
    • 手順

  • 無限スクロールInfinite scroll

    一覧のいちばん下までスクロールすると、次の件数を自動で読み込んで継ぎ足していく仕組み。押して継ぎ足す「もっと見る」ボタン方式もある。

    • 一覧
    • 自動

  • 言語切り替えLanguage switcher

    地球儀のアイコンといま表示中の言語名を並べたボタン。押すと、各言語をその言語自身の文字で書いた一覧が開き、同じページの別の言語版へ移れる。

    • 多言語
    • 開閉

  • メニューバーMenubar

    「ファイル」「編集」「表示」のように、アプリの操作を種類ごとの見出しで横に並べた帯。見出しを押すと、その下に操作の一覧が垂れ下がる。

    • アプリ
    • 開閉

  • ツールバーToolbar

    元に戻す・切り抜き・削除のようなアイコンのボタンを横一列に並べ、種類ごとに区切り線で分けた帯。押しっぱなしの道具は押された見た目で残る。

    • 操作
    • アプリ

  • アプリランチャーApp launcher

    ヘッダーの右上にある、点が3×3に並んだボタン。押すと同じ会社のほかのアプリやサービスが、アイコンと名前のタイルで並んで開く。

    • 開閉
    • 切り替え

  • テキストリンクText link

    本文の中に置く、押すと別のページへ移動する文字。色と下線で「押せる」と伝える、Webでいちばん古い部品。

    • 基本
    • 遷移

  • ボタンButton

    押すとその場で処理が走る部品。保存・送信・削除など、ページを移動しない動作に使う。

    • 基本
    • 操作

  • アイコンボタンIcon button

    文字を持たず、アイコンだけで操作を表すボタン。閉じる・共有・お気に入りなど、場所を取りたくないところで使う。

    • 操作
    • 名前必須

  • CTAボタンCall to action

    ページの目的（申し込み・購入・資料請求）へ連れていく、いちばん目立たせるボタン。

    • 導線
    • 収益

  • フローティングアクションボタンFloating action button

    画面の隅に浮かせて常に見せておく丸いボタン。新規作成など、その画面で最も使う操作を1つだけ置く。

    • 操作
    • 追従

  • ボタングループButton group

    関係のあるボタンを隙間なく並べて1つのまとまりに見せる部品。表示の切り替えなど、選択肢が少ないときに使う。

    • 操作
    • 切り替え

  • トグルボタンToggle button

    押すたびに「入」と「切」が入れ替わるボタン。お気に入りやミュートのように、押したあとも状態が残る操作に使う。

    • 操作
    • 状態

  • リンクカードLink card

    見出し・説明・画像をひとまとめにして、全体を1つのリンクにしたもの。記事の紹介や関連ページへの誘導に使う。

    • 遷移
    • カード

  • 外部リンク表示External link indicator

    別のサイトや新しいタブへ移動することを、アイコンや注記であらかじめ伝える書き方。

    • 遷移
    • 予告

  • SNSシェアボタンShare buttons

    いま見ているページの URL を、X・LINE・Facebook などの投稿画面へ渡すボタン群。URL のコピーを並べることも多い。

    • SNS
    • 共有

  • スプリットボタンSplit button

    よく使う操作のボタンの右に、小さな▼のボタンがくっついた部品。▼を押すと「下書き保存」のような別のやり方が出てくる。

    • 操作
    • メニュー

  • スピードダイヤルSpeed dial

    画面の隅の丸い＋ボタンを押すと、その上に「メモ」「写真」などラベル付きの小さな丸ボタンが縦に広がる部品。

    • 操作
    • 追従

  • テキストフィールドText field

    一行の文字を入れてもらう枠。名前やメールアドレスなど、短い値の入力に使う。

    • 基本
    • 入力

  • テキストエリアTextarea

    改行を含む長い文章を入れてもらう枠。問い合わせ本文や備考に使う。

    • 入力

  • セレクトボックスSelect

    押すと選択肢が下に開く入力欄。都道府県のように、選択肢が決まっていて数が多いときに使う。

    • 入力
    • 選択

  • チェックボックスCheckbox

    四角い枠を押して入と切を切り替える入力。当てはまるものを何個でも選べる。

    • 入力
    • 選択

  • ラジオボタンRadio button

    丸い印を押して1つだけ選ぶ入力。古いカーラジオの選局ボタン（1つ押すと他が戻る）が由来。

    • 入力
    • 選択

  • トグルスイッチSwitch

    つまみを左右に動かして入と切を切り替える部品。押した瞬間に設定が反映される場面で使う。

    • 入力
    • 状態

  • スライダーSlider

    つまみを左右に動かして数値を決める入力。正確な値より、だいたいの位置を決めたいときに向く。

    • 入力
    • 数値

  • ファイルアップロードFile upload

    パソコンやスマートフォンの中のファイルを選んで送る入力。枠の中へ放り込める形にすることが多い。

    • 入力
    • ファイル

  • 検索ボックスSearch box

    キーワードを入れて探す入力欄。虫眼鏡のアイコンと組で使われることが多い。

    • 入力
    • 探す

  • プレースホルダーPlaceholder

    入力欄が空のときだけ薄く出ている文字。入力の見本を示すもので、ラベルの代わりではない。

    • 入力
    • 補助

  • バリデーションメッセージValidation message

    入力の内容が条件に合わないときに、入力欄のそばに出す説明。何が違うのか、どう直せばよいのかを書く。

    • 入力
    • エラー

  • ステッパーStepper

    プラスとマイナスのボタンで数値を1つずつ増減させる入力。買い物かごの個数などに使う。

    • 入力
    • 数値

  • オートコンプリートAutocomplete

    入力しかけた文字から候補を下に出し、選ばせる入力欄。駅名や商品名のように、正しい書き方を思い出しにくい値に使う。

    • 入力
    • 探す

  • フォームのラベルと必須マークForm label / Required indicator

    入力欄に「何を入れるか」を示す名前と、埋めないと送れない欄の印。「必須」「任意」は文字で書き、色だけで区別させない。

    • 入力
    • 基本

  • 日付ピッカーDate picker

    日付を入れる欄に、月のカレンダーを開いて選べる仕組みを付けたもの。予約日のように、曜日を見ながら決めたい日付に使う。

    • 入力
    • 日付

  • チャットの入力欄Chat composer

    チャット画面の下にある、角の丸い入力の箱。書くほど縦に伸び、左に添付のクリップ、右に送信の矢印ボタンがある。Enter で送信する。

    • 入力
    • 会話

  • タグ入力Tag input

    文字を入れて Enter を押すと、その語が × 付きの小さな札になって枠の中に並ぶ入力欄。記事のタグやメールの宛先のように、短い語をいくつも入れてもらうときに使う。

    • 入力
    • 複数

  • カラーピッカーColor picker

    丸い色見本を並べて1つ選ばせ、その下にカラーコードの欄と自由に色を選ぶボタンを置いた入力。テーマ色やラベルの色のように、色そのものを決めてもらうときに使う。

    • 入力
    • 色

  • ワンタイムコード入力One-time code input

    SMS やメールで届いた6桁ほどの数字を入れる欄。1桁ずつ四角い枠が並んだ見た目にすることが多い。ログインや登録の本人確認で使う。

    • 入力
    • 認証

  • 連動プルダウンCascading select

    1つ目のプルダウンで選んだ値に応じて、2つ目の選択肢が入れ替わる組。都道府県を選ぶと市区町村が選べるようになる形が代表で、2つ目は1つ目を選ぶまで押せない。

    • 入力
    • 選択

  • 時刻ピッカーTime picker

    時刻を入れる欄に、「時」と「分」の列を並べた小さな一覧を付けた入力。15分刻みのように決まった間隔から選ばせる予約の時間などに使う。

    • 入力
    • 時刻

  • リッチテキストエディターRich text editor

    太字・斜体・箇条書き・リンクのボタンが上に並び、その下の入力欄で見たままの書式を付けながら書ける部品。ブログやメールの本文入力に使う。

    • 入力
    • 書式

  • 絞り込みパネルFilter panel

    価格帯やブランドなどの項目ごとにチェックボックスと件数を並べ、選んだ条件のチップと該当件数を上に出す箱。通販や検索結果の横に置く。

    • 入力
    • 絞り込み

  • 選択カードChoice card

    枠で囲んだカードを並べ、どれか1つを押して選ぶ入力。見出し・説明・料金がカードに入り、選んだカードは枠が太くなりチェックの印が付く。

    • 入力
    • 選択

  • パスワード入力（表示切り替え）Password input

    入れた文字が●で伏せられる入力欄の横に、目のアイコンの「表示する」ボタンが付いた部品。押すと打った文字が見え、もう一度押すと伏せ字に戻る。

    • 入力
    • 認証

  • 単位つき入力欄Input with prefix / suffix

    入力欄の枠の中の左や右に、円・kg・https:// のような単位や決まった文字が灰色の帯で添えてある欄。値だけを打てばよいことが一目で分かる。

    • 入力
    • 数値

  • 入力マスクInput mask

    数字を打つそばからハイフンやスラッシュが自動で入る入力欄。090-1234-____ のように、まだ埋まっていない桁を下線で見せることもある。

    • 入力
    • 書式

  • 残り文字数つき入力欄Character count

    複数行の入力欄の下に「あと 9 文字」のように残りの文字数が出る部品。上限を超えると「11 文字多すぎます」に変わり、枠が赤く太くなる。

    • 入力
    • 文字数

  • インライン編集Inline edit

    ふだんは値が文字で並んでいて、鉛筆のボタンを押すとその場所が入力欄と「保存」「キャンセル」に変わる。設定画面やプロフィールの項目を1つずつ直すのに使う。

    • 入力
    • 編集

  • 左右移動リストTransfer list

    左右に2つの一覧が並び、間の「→」「←」ボタンで選んだ項目を行き来させる部品。表に出す列やメンバーの割り当てを選ぶ画面で見かける。

    • 入力
    • 選択

  • 生年月日の入力Date of birth input

    「年」「月」「日」が別々の小さな数字の欄になった入力。前に「平成」「昭和」などの元号を選ぶ欄が付くこともある。生年月日のように覚えている日付に使う。

    • 入力
    • 日付

  • 期間選択Date range picker

    「開始日〜終了日」の2つの欄と、間の日が帯で塗られたカレンダーが組になった入力。「今月」「先月」のボタンで一度に選べることも。集計や宿泊の期間に使う。

    • 入力
    • 日付

  • 複数選択プルダウンMulti-select

    見た目はプルダウンだが、開くとチェックボックスつきの一覧が出て、いくつでも選べる。閉じると「3件選択」のように件数や選んだ名前がボタンに出る。

    • 入力
    • 選択

  • カードCard

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

    • 骨格
    • 一覧

  • パネルPanel

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

    • 骨格
    • 管理画面

  • ボックスBox

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

    • 骨格

  • アコーディオンAccordion

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

    • 開閉
    • 省スペース

  • ヒーローHero

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

    • 骨格
    • 導線

  • セクションSection

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

    • 骨格

  • 区切り線Divider

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

    • 骨格

  • 補足ボックスCallout

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

    • 補助
    • 注意

  • モーダルModal

    画面の上に重ねて出し、閉じるまで背後を操作させない窓。操作を1つのモード（mode）に閉じ込める、という意味の modal が名前の由来。

    • 重ね
    • フォーカス

  • ダイアログDialog

    利用者に判断を求める小さな窓。削除の確認のように、取り返しのつかない操作の直前に出す。

    • 重ね
    • 確認

  • オーバーレイOverlay

    モーダルやドロワーを出したときに、背後を覆う半透明の膜。背後が操作できないことを見た目で伝える。

    • 重ね

  • ボトムシートBottom sheet

    画面の下から上がってくるパネル。スマートフォンで、親指の届く位置に選択肢を出したいときに使う。

    • 重ね
    • スマホ

  • ポップオーバーPopover

    押した要素のそばに、小さな窓を重ねて出す部品。背後の操作は止めない点がモーダルと違う。

    • 重ね

  • ツールチップTooltip

    要素に触れたり、フォーカスしたときに出る短い説明。アイコンだけのボタンの意味を補うのによく使う。

    • 重ね
    • 補助

  • ドロップダウンメニューDropdown menu

    押すと下に選択肢が開くメニュー。入力欄ではなく、操作を選ばせる点がセレクトボックスと違う。

    • 重ね
    • 操作

  • コンテキストメニューContext menu

    右クリックや長押しで、その場所に応じた操作を出すメニュー。対象を指したまま操作を選べる。

    • 重ね
    • 操作

  • コマンドパレットCommand palette

    Ctrl+K（Macは⌘K）で画面の上に出る、検索窓つきの一覧。文字を打つと操作やページの候補が絞られ、矢印キーで選んで Enter で実行する。

    • 重ね
    • 操作
    • 検索

  • コーチマークCoach mark

    初めて使う人に、画面の部品を1つずつ指して説明する案内。周りを暗くして対象だけを明るく残し、「1 / 3」「次へ」「スキップ」の小窓を添える。

    • 重ね
    • 案内

  • ポップ確認Popconfirm

    削除ボタンを押すと、そのすぐそばに「削除しますか？」の小窓が出て、キャンセルと削除するの2つのボタンで答える部品。画面全体は暗くならない。

    • 重ね
    • 確認

  • トグルチップToggletip

    項目名の横の小さな「i」や「?」のボタン。押すと短い説明の吹き出しが出て、Esc か外側を押すまで出たままになる。

    • 重ね
    • 補助

  • 三点メニューKebab menu

    一覧の行やカードの右端にある「⋮」や「…」のボタン。押すと、その項目だけに効く名前の変更・共有・削除などの操作が小さく開く。

    • 重ね
    • 操作

  • トーストToast

    画面の隅に少しだけ出て、しばらくすると自分で消える短い通知。トースターからパンが飛び出す様子が由来。

    • 通知
    • 一時表示

  • スナックバーSnackbar

    画面の下に出る、操作ボタンを1つ持った通知。「削除しました／元に戻す」のように、やり直しの機会を渡す。

    • 通知
    • 一時表示

  • アラートAlert

    その場に出しっぱなしにする、状態の知らせ。成功・注意・エラーを色とアイコンで区別する。

    • 通知
    • 常時表示

  • バナーNotification banner

    ページの上端に横いっぱいで出す帯状の知らせ。メンテナンス予告やキャンペーンの告知に使う。

    • 通知
    • 常時表示

  • プログレスバーProgress bar

    どこまで進んだかを、伸びる帯で示す部品。終わりが見えている処理に使う。

    • 状態
    • 進捗

  • ローディングスピナーSpinner

    処理が続いていることを、回り続ける印で示す部品。終わりが読めない待ち時間に使う。

    • 状態
    • 待ち

  • スケルトンスクリーンSkeleton screen

    読み込み中に、これから出る内容の形だけを灰色の箱で見せておく表示。空白やスピナーより待ち時間が短く感じられる。

    • 状態
    • 待ち

  • 空状態Empty state

    データが1件も無いときに出す画面。何も無い理由と、次にできることを書く。

    • 状態
    • 案内

  • バッジBadge

    状態や分類を短い文字で示す小さな札。「公開中」「NEW」など、一目で種類が分かるようにする。

    • 状態
    • 表示

  • 通知ドットNotification dot

    アイコンの右上に付ける小さな丸。新しいものがあることだけを伝え、件数を添えることもある。

    • 状態
    • 通知

  • Cookie同意バナーCookie consent banner

    Cookie や解析タグを使ってよいかを、訪問者に選んでもらうための知らせ。「同意する」と「拒否する」を同じ重みで並べる。

    • 通知
    • 同意

  • 結果画面Result page

    処理が終わったあとに、大きなアイコンと見出しで成功か失敗かを伝え、次に押すボタンを並べる画面。「送信が完了しました」がその例。

    • 状態
    • 案内

  • 通知一覧Notification center

    ベルのボタンを押すと開く、届いた通知を新しい順に並べたパネル。未読の印と時刻が付き、「すべて既読にする」でまとめて読んだことにできる。

    • 通知
    • 一覧

  • 円形プログレスCircular progress

    輪っかが時計回りに伸びて、どこまで進んだかを示す部品。真ん中に「72%」のように数字が入る。終わりが読めないときは輪が回る。

    • 状態
    • 進捗

  • メーターMeter

    決まった範囲の中で、いまどのくらいの量かを帯で示す部品。「7.2GB / 10GB」のストレージやバッテリー残量に使い、多すぎ・少なすぎで色が変わる。

    • 状態
    • 量

  • テーブルTable

    行と列で情報を並べる表。縦と横の両方に意味があるデータに使う。

    • 一覧
    • 比較

  • リストList

    項目を縦に並べたもの。並び順に意味があるかどうかで、番号付きと点付きを使い分ける。

    • 一覧

  • 定義リストDescription list

    「項目名」と「その中身」を対にして並べるリスト。住所や仕様のように、名前と値が対応するものに使う。

    • 一覧
    • 詳細

  • タイムラインTimeline

    出来事を時間の順に、縦の線に沿って並べる表示。配送状況や更新履歴に使う。

    • 一覧
    • 経過

  • ツリー表示Tree view

    親子の関係を、字下げと開閉で表す表示。フォルダやカテゴリーの階層に使う。

    • 一覧
    • 階層

  • チップChip

    短い語を丸い枠に入れた小さな部品。分類の表示にも、絞り込み条件の表示にも使う。

    • 一覧
    • 絞り込み

  • アバターAvatar

    利用者を表す小さな丸い画像。写真が無いときは頭文字や既定の絵で埋める。

    • 表示
    • 人物

  • 数値タイルStat tile

    1つの数値を大きく見せる小さな箱。前と比べてどう変わったかを添えることが多い。

    • 表示
    • 数値

  • 星評価Rating

    星の数で評価を示す部品。見せるだけの場合と、押して評価してもらう場合がある。

    • 表示
    • 評価

  • ソート可能なテーブル見出しSortable table header

    表の列見出しを押すと、その列で行を並べ替えられるもの。見出しの横の三角で、どの列をどちら向きに並べているかを示す。

    • 一覧
    • 操作

  • チャットのメッセージChat message

    会話を角の丸い枠で1通ずつ積み上げる表示。自分の発言は右に色つきで、相手は左にアイコンつきで並び、時刻や「入力中」の動く点が添う。

    • 表示
    • 会話

  • テーブルの操作バーTable toolbar

    表のすぐ上に置く横長の帯。検索欄・並べ替え・表示する列の設定と件数を並べ、行を選ぶと「n件を選択中」と一括操作のボタンが現れる。

    • 一覧
    • 一括操作

  • カレンダー（月表示）Month calendar

    1か月の日付を曜日の見出しの下にマス目で並べ、定休日やイベント、予約の空き（○△×）を各日に書き込んで見せる表。今日の日付は枠で囲む。

    • 表示
    • 日付

  • アバターグループAvatar group

    丸い顔アイコンを少しずつ重ねて横一列に並べ、入りきらない人数を最後の丸に「+5」とまとめて見せる表示。参加者やメンバーの顔ぶれに使う。

    • 表示
    • 人物

  • コメントスレッドComment thread

    丸いアイコンと名前・日時の下に本文を置き、返信やいいねのボタンを添えたコメントを縦に並べる表示。返信は1段字下げして左の線で親につなぐ。

    • 表示
    • 会話

  • サムネイルThumbnail

    中身を小さく縮めて見せる画像。一覧の中で、どれがどれかを見分ける手がかりになる。

    • 画像
    • 一覧

  • カルーセルCarousel

    複数の画像を同じ場所で順に切り替えて見せる部品。回転木馬（carousel）が名前の由来。

    • 画像
    • 切り替え

  • ギャラリーGallery

    画像を格子状に並べて見せる表示。押すと大きく開く形にすることが多い。

    • 画像
    • 一覧

  • ライトボックスLightbox

    サムネイルを押すと、暗い背景の上に画像を大きく表示する仕掛け。

    • 画像
    • 重ね

  • 動画プレイヤーVideo player

    動画を再生し、再生・停止・音量・シークを操作できる部品。

    • メディア

  • アスペクト比ボックスAspect ratio box

    幅が変わっても縦横の比を保つ枠。画像や動画の読み込み前から場所を確保しておける。

    • レイアウト
    • 画像

  • パララックスParallax

    スクロールに合わせて、背景と前景を違う速さで動かす演出。奥行きがあるように見せる。

    • 演出

  • ビフォーアフタースライダーBefore/after slider

    加工前と加工後の2枚の画像をぴったり重ね、縦の境目のつまみを左右に動かすと、片側が前・もう片側が後の画像に切り替わって見比べられる部品。

    • 画像
    • 比較

  • グリッドレイアウトGrid layout

    縦と横の線で区切った格子に、要素を並べる配置の考え方。カードの一覧はほぼこれで作る。

    • 配置

  • 横並び（フレックス）Flexbox

    要素を一列に並べ、余った幅の配り方を決める配置の考え方。ボタンの並びやヘッダーに使う。

    • 配置

  • 最大幅コンテナContainer

    本文の横幅に上限を付けて、中央に寄せるための箱。文章が横に伸びすぎるのを防ぐ。

    • 配置

  • 余白（ガター）Spacing

    要素の内と外に取る空き。外側の空きがマージン、内側の空きがパディング、列と列の間がガター。

    • 配置
    • 基礎

  • 固定表示Sticky

    スクロールしても特定の位置に貼り付いたままにする表示。ヘッダーや表の見出しに使う。

    • 配置
    • 追従

  • 2カラムTwo column layout

    メニューと本文のように、画面を左右2つに分ける配置。辞典やマニュアルの基本形。

    • 配置
    • 骨格

  • ブレークポイントBreakpoint

    この幅を境にレイアウトを変える、という切り替え点。スマートフォンとパソコンの境目を決める。

    • 配置
    • 基礎

  • メーソンリーMasonry

    高さの違う要素を、隙間なく積み上げる配置。石積み（masonry）が名前の由来。

    • 配置

  • 分割パネルSplit pane

    画面を左右（または上下）の2枚のパネルに分け、間の仕切りをつかんで動かすと両側の幅が変わる配置。メールアプリやコードエディターで見かける。

    • 骨格
    • リサイズ

  • 見出しHeading

    内容のまとまりに付ける題。大きさではなく、階層で h1〜h6 を選ぶ。

    • 文字
    • 構造

  • リード文Lead

    見出しのすぐ下に置く、内容を要約した数行。読むかどうかをここで判断してもらう。

    • 文字

  • キャプションCaption

    画像や表の近くに添える短い説明。何が写っているか、どこから取ったかを書く。

    • 文字
    • 補助

  • 引用Blockquote

    他の文章をそのまま載せるときに使う囲み。どこから取ったかを必ず添える。

    • 文字

  • コードブロックCode block

    プログラムの記述をそのままの形で見せる枠。空白と改行を保ち、等幅の書体で表示する。

    • 文字
    • 実装

  • 省略表示Truncation

    入りきらない文字を途中で切り、末尾に「…」を付ける表示。1行や決まった行数に収めたいときに使う。

    • 文字
    • レイアウト

  • 注釈Note

    本文の内容に条件や例外を添える小さな文字。「※」で始めることが多い。

    • 文字
    • 補助

  • ルビRuby text

    漢字の上に読みを小さく添える表示。印刷で使われた5.5ポイント活字の呼び名「ruby」が由来。

    • 文字
    • 日本語