# Bulma デザインシステム

## Bulmaデザインシステムのインターフェースプレビュー

見出しと要約を編集し、概要を検証して公開可能にし、ライト／ダーク表示を切り替えます。

## Bulmaデザインシステムの設計リファレンス

Bulma 1.0.4のコンパイル済みCSSと、公式のレスポンシブ／ヘルパーのドキュメント。HSLコンポーネントはパッケージのデフォルトであり、ブランドパレットの代わりではありません。remへの換算は、ルートサイズを16pxとして計算しています。

### タイポグラフィとコントロールの基礎

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --bulma-family-primary | Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif | フォントの優先順位を指定するスタックです。パッケージはこれらのフォントファイルをダウンロードしません。 |
| --bulma-size-normal | 1rem | コントロール／本文のデフォルトサイズ。 |
| --bulma-size-small | 0.75rem | 補助コントロールのコンパクトサイズ。 |
| --bulma-size-medium | 1.25rem | medium修飾子のサイズ。 |
| --bulma-size-large | 1.5rem | large修飾子のサイズ。 |
| --bulma-weight-semibold | 600 | ラベルと、より強調されたUIテキスト。 |
| --bulma-block-spacing | 1.5rem | ブロック要素間の間隔。 |
| --bulma-radius | 0.375rem | ルートサイズ16pxの場合のデフォルトの角丸半径6px。 |
| --bulma-radius-small | 0.25rem | 小さめの角丸半径4px。 |
| --bulma-radius-large | 0.75rem | 大きめの角丸半径12px。 |
| --bulma-control-height | 2.5em | コントロールサイズが16pxの場合、2.5emは40pxです。 |
| --bulma-control-border-width | 1px | コントロール共通の境界線の太さ。 |
| --bulma-control-line-height | 1.5 | コントロール共通のテキスト行の高さ。 |
### 色の構成

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --bulma-primary-h / -s / -l | 171deg / 100% / 41% | プライマリカラーの基本HSL成分。 |
| --bulma-link-h / -s / -l | 233deg / 100% / 63% | is-linkが使用するアクションおよびリンクの役割。 |
| --bulma-scheme-h / -s | 221 / 14% | ニュートラル配色の色相と彩度。 |
| --bulma-scheme-main-l | 100% in light mode | メインの明るい背景面の輝度。 |
| --bulma-text-l | 29% in light mode | 通常配色のテキストの輝度。 |
| --bulma-text-title-l | 14% in light mode | 強調された見出しテキストの輝度。 |
### スペーシングヘルパー

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| mb-0 | 0 | 下マージン用ユーティリティ。他の方向にも同じ接尾辞の段階が使われます。 |
| mb-1 | 0.25rem | 下マージン用ユーティリティ。他の方向にも同じ接尾辞の段階が使われます。 |
| mb-2 | 0.5rem | 下マージン用ユーティリティ。他の方向にも同じ接尾辞の段階が使われます。 |
| mb-3 | 0.75rem | 下マージン用ユーティリティ。他の方向にも同じ接尾辞の段階が使われます。 |
| mb-4 | 1rem | 下マージン用ユーティリティ。他の方向にも同じ接尾辞の段階が使われます。 |
| mb-5 | 1.5rem | 下マージン用ユーティリティ。他の方向にも同じ接尾辞の段階が使われます。 |
| mb-6 | 3rem | 下マージン用ユーティリティ。他の方向にも同じ接尾辞の段階が使われます。 |
### レスポンシブの境界値

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| mobile | ≤768px | is-mobileを追加しない限り、columnsとlevelは縦に積み重なります。 |
| tablet | ≥769px | デフォルトではcolumnsが横並びになります。 |
| desktop | ≥1024px | デスクトップ専用の修飾子が適用されます。 |
| widescreen | ≥1216px | より幅広いコンテナー／レイアウトの範囲。 |
| fullhd | ≥1408px | デフォルトで最も広い範囲。 |
## Bulmaデザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Bulmaデザインシステム：CSSの明示的な動作を備えたフレームワーク

### セマンティックなHTMLにBulmaクラスを使用する

> Bulmaは、要素、コンポーネント、レイアウトヘルパー、修飾子からなる視覚表現の語彙を提供します。フォームの状態管理機能や、JavaScriptのウィジェットランタイムではありません。編集デスクでは公式の1.0.4スタイルシートを読み込み、検証、テキストのライブプレビュー、テーマ切り替えを行うスクリプトを追加しています。スクリプトの全内容はここに示されています。Reactへの依存やフレームワークプロバイダーはありません。

フィールドは、ラベル、コントロールのラッパー、ヘルプテキストで構成されます。inputクラスは実際のinputに付け、selectはネイティブのselect要素を包むラッパーに付けます。装飾と間隔はラッパーが担うため、この違いは重要です。スクリーンショットの見た目だけを汎用的なdivに再現しても、ネイティブの編集機能やキーボード操作は失われます。

関連する仕様を確認する

## BulmaデザインシステムのHSLロールとライト／ダークテーマ

### ハードコードしたパッチではなく、修飾子を使用する

Bulma 1では色の系統をHSL成分で管理し、関連する値を導出します。リンクのロールは、確認ボタン、セクションラベル、補助的なアクセントに適用されます。警告タグと成功タグは「下書き」と「確認待ち」を示しますが、テキストラベルは常に表示されます。このメッセージは、エラーではなく手順の範囲を説明するため、is-infoを使用します。

デモでは、htmlにdata-theme=lightを設定して開始します。表示切り替えボタンを押すと、その属性がlightとdarkの間で切り替わります。すべてのカード、フィールド、ヘルプテキスト、メッセージに、適切なテーマがまとめて適用されます。ボックスに白い背景を直接設定すると、この切り替えが損なわれます。ブランドに合わせて上書きする場合は、最終的なボタンの背景色だけを変更するのではなく、ドキュメントに記載されたロール変数を変更し、導出される状態も確認してください。

関連する仕様を確認する

## Bulmaデザインシステムのフォント設定と使いやすい文字サイズの段階

### パッケージが指定するのはフォントの優先順位であり、フォントの提供ではありません

デフォルトのフォントスタックはInterから始まり、複数のシステムフォントを代替フォントとして指定しています。Bulmaを読み込んでも、Interはダウンロードされません。このオフラインの見本では、一覧にあるフォントのうちインストール済みのものが使われます。そのため、特定のフォントを必要とする本番ビルドでは、フォントファイルと読み込み方針を別途用意する必要があります。titleクラスとsubtitleクラスで視覚的な階層を作れますが、HTMLの見出しレベルは変わりません。

編集デスクでは、ページにtitle is-2、フォームにtitle is-4、記事の見出しにtitle is-3を使用しています。狭い画面ではローカルな調整として、ページタイトルを2remに縮小します。コントロールは通常の1remサイズを維持します。ヘルプテキストはフィールドの近くに配置されているため、別のサイドバーにある説明と照らし合わせる必要がありません。

関連する仕様を確認する

## Bulmaデザインシステムのスペーシングヘルパーとレスポンシブなカラム

### 自然に縦積みになる7対5の分割

親要素のcolumnsにはis-variable is-6を指定し、子要素にはcolumn is-7とcolumn is-5を指定します。この比率により、記事プレビューよりもフォームに広い幅を割り当てます。モバイルファーストのデフォルト動作では、モバイル幅でカラムが縦に積み重なります。そのため、窮屈な横並びを維持するis-mobileは追加しません。

スペーシングヘルパーの接尾辞は、ピクセル単位で一定の比率で増える値ではありません。特に、接尾辞の5は1.5rem、6は3remです。カードとメッセージの間にはmt-5、小さなラベルにはmb-3を使用します。外側のセクションでは、上下2rem、左右1.5remのアプリケーション固有の上書きを行います。追加のCSSはすべてセットアップで提供されます。

関連する仕様を確認する

## Bulmaデザインシステムのフィールド構造と検証

### エラーは色だけで伝えるものではありません

見出しと要約は、それぞれラベルとヘルプテキストに明示的に関連付けられています。送信が拒否されると、inputとヘルプテキストにis-dangerを追加し、aria-invalid=trueを設定して、最初の無効なコントロールにフォーカスします。見出しは前後の空白を除いて5文字以上、要約は20文字以上必要です。これは編集上の要件の例であり、Bulmaの制約ではありません。

コピー確認のチェックボックスも選択する必要があります。説明用のエラーメッセージはaria-describedbyで関連付けています。Bulmaはこれらの状態を描画できますが、コピーの確認が完了したかどうかは判断できません。その判断はスクリプトが行い、ブラウザー標準のフォーム遷移を防ぎます。サーバーからの結果を装うことはありません。

1. 見出しを消して送信し、無効な入力欄にフォーカスが移ることを確認してください。

2. 見出しと20文字以上の要約を復元してください。

3. コピー確認にチェックを入れて送信し、その後もう一度編集して、概要の状態を「下書き」に戻してください。

関連する仕様を確認する

## Bulmaデザインシステムのカード、メッセージ、状態タグ

### 各コンテナの役割を一つに絞る

記事カードはcard-headerとcard-contentに分かれています。ヘッダーのテキストで記事の内容を示し、タグで編集状態を表示します。コンテンツには、ライブセクション、見出し、要約の後にメタデータを配置します。プレビューは意図的にテキストを中心に構成しています。プレースホルダー画像に邪魔されず、作成者が情報の優先順位や文章の長さを確認できます。

メッセージコンポーネントでは、message-headerとmessage-bodyを使って、確認準備の状態がこの画面内だけのものであることを説明します。入力の検証結果にかかわらず、メッセージは表示され続けます。一時的な成功通知では、このような重要な境界を伝えるのに適しません。通知を閉じた後、記事が公開されたとユーザーが誤解するおそれがあるためです。

- カード：現在の記事の構成。

- タグ：下書きまたは確認状態を明示。

- メッセージ：操作内容を継続して説明。

関連する仕様を確認する

## Bulmaデザインシステム：ウィジェットランタイムに依存しないアプリケーション状態

### 古い成功状態と安全でないプレビュー挿入を防ぐ

入力イベントのたびにプレビューを更新し、状態を「下書き」に戻します。これにより、作成者が確認済みのテキストを変更した後も、「準備完了」タグが残るのを防げます。表示にはtextContentを使うため、入力したHTMLはマークアップとして解釈されず、テキストとして表示されます。これらはアプリケーション側の責務です。Bulmaのスタイルシートでは対応できません。

「下書きを復元」を実行するとform.resetを呼び出し、検証用クラスとaria-invalidを削除し、チェックボックスの補足を消去して、プレビューを再構築します。ドキュメントを再読み込みせずに、元のサンプル内容に戻します。ステータス段落にはrole=statusを指定し、送信後の変更を通知します。一方、入力中にフォーカスが繰り返し移動することはありません。

関連する仕様を確認する

## Bulmaデザインシステム：CSSをインストールし、動作の仕組みを明示する

### プロバイダー不要、Bulma同梱なしのJavaScript

bulma@1.0.4をインストールして、コンパイル済みのCSSをローカルアセットにコピーするか、既存のバンドラーでそのCSSをインポートします。ここで示すプレーンなHTMLの構成では、アセットをコピーした後にビルド工程は必要ありません。デスクのマークアップ全体をbodyに配置し、app.jsをdefer付きで読み込みます。Bulmaのコンポーネントが有効になることを期待して、無関係なJavaScriptパッケージを読み込まないでください。

後からモーダルやドロップダウンを追加する場合は、対応するキーボード操作、フォーカス管理、閉じる動作を意図的に実装してください。is-activeのようなクラスは見た目を変えるだけで、フォーカストラップにはなりません。このサンプルでは、ネイティブの入力欄とボタンを使い、動作の範囲を小さく保って確認しやすくしています。

関連する仕様を確認する

## Bulmaデザインシステム：適切な範囲でカスタマイズする

### コンポーネントの変数を確認してから上書きする

グローバルな--bulma変数でテーマを設定できますが、コンポーネントも独自のセレクター上に変数を定義しています。より詳細度の高いコンポーネント側の指定が、ルートレベルの値を上書きする場合があります。ルートでの上書きが効かないように見える場合は、コンパイル済みのCSSで該当クラスを確認し、無関係な宣言を追加するのではなく、適切なコンポーネントに上書きを指定してください。

長期運用するプロダクトでは、パッケージのデフォルト、ブランド用の上書き、画面固有のレイアウトルールを分けて管理してください。この例の小さなコンテナやモバイル向けタイトルの調整は、画面用のルールです。参照表では実際のBulmaの値を別途掲載しているため、再利用できる設定と、この編集デスクだけに適用される設定を明確に区別できます。

関連する仕様を確認する

## Bulmaデザインシステムのコンポーネント例

### 編集デスクのマークアップ全体

Bulmaのfield/control/label/help構成、7/5カラム、カード、メッセージ、状態タグ。

```
<section class="section"><div class="container"><div class="level"><div class="level-left"><div><p class="is-size-7 has-text-weight-bold has-text-link mb-3">BULMA / LOCAL EDITORIAL DESK</p><h1 class="title is-2">Shape the next issue.</h1><p class="subtitle is-5">An article brief, a preview, and an explicit editorial state.</p></div></div><div class="level-right"><button class="button is-light" id="theme">Dark appearance</button></div></div><div class="columns is-variable is-6"><div class="column is-7"><form id="brief" class="box" novalidate><h2 class="title is-4">Article brief</h2><div class="field"><label class="label" for="headline">Headline</label><div class="control"><input class="input" id="headline" value="A quieter way to work" maxlength="90" aria-describedby="headline-help"></div><p class="help" id="headline-help">Use 5–90 characters. This field updates the preview as you type.</p></div><div class="field"><label class="label" for="section">Section</label><div class="control"><div class="select is-fullwidth"><select id="section"><option>Design notes</option><option>Field research</option><option>Product craft</option></select></div></div></div><div class="field"><label class="label" for="summary">Summary</label><div class="control"><textarea class="textarea" id="summary" rows="3" aria-describedby="summary-help">How small choices in layout and language can make a demanding interface feel manageable.</textarea></div><p class="help" id="summary-help">Use at least 20 characters to give the reviewer enough context.</p></div><div class="field"><label class="checkbox"><input id="checked" type="checkbox" aria-describedby="checked-help" aria-describedby="checked-help"> I have checked the headline and summary</label><p class="help" id="checked-help"></p></div><div class="field is-grouped is-grouped-multiline"><div class="control"><button type="submit" class="button is-link">Mark ready for review</button></div><div class="control"><button id="reset" type="button" class="button is-light">Restore draft</button></div></div><p id="result" class="help" role="status">Draft changes stay in this page only.</p></form></div><div class="column is-5"><article class="card"><header class="card-header"><p class="card-header-title">Issue 08 / Article preview</p><span id="state" class="tag is-warning is-light mr-4 my-4">Draft</span></header><div class="card-content"><p class="is-size-7 has-text-link has-text-weight-bold mb-3" id="preview-section">Design notes</p><h2 class="title is-3" id="preview-title">A quieter way to work</h2><div class="content" id="preview-summary">How small choices in layout and language can make a demanding interface feel manageable.</div><hr><p class="is-size-7">Copy desk · Reading time assigned after editing</p></div></article><article class="message is-info mt-5"><div class="message-header"><p>Review is a separate step</p></div><div class="message-body">Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.</div></article></div></div><p class="is-size-7">Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.</p></div></section>
```

コードリファレンス

- CSSライブラリはフォームの検証や送信を行いません。

- aria-describedbyで入力欄と補足テキストを関連付けます。

- プレビューではtextContentを使ってユーザー入力を表示します。

### 検証とローカルプレビューの動作

元のイベントハンドラーが、Bulmaではなくアプリケーション側が担う動作を実装します。

```
const $=id=>document.getElementById(id);
const fields=['headline','summary'];
function draft(){ $('state').textContent='Draft';$('state').className='tag is-warning is-light mr-4 my-4';$('result').textContent='Draft changes stay in this page only.';}
function preview(){ $('preview-title').textContent=$('headline').value.trim()||'Untitled article';$('preview-summary').textContent=$('summary').value.trim()||'No summary yet.';$('preview-section').textContent=$('section').value;draft();}
for(const id of ['headline','summary','section','checked'])$(id).addEventListener('input',preview);
$('brief').addEventListener('submit',event=>{event.preventDefault();let first=null;for(const id of fields){const invalid=$(id).value.trim().length<(id==='headline'?5:20);$(id).classList.toggle('is-danger',invalid);$(id).setAttribute('aria-invalid',String(invalid));$(id+'-help').classList.toggle('is-danger',invalid);if(invalid&&!first)first=$(id);}$('checked-help').textContent=$('checked').checked?'':'Confirm the copy check before review.';$('checked-help').className='help is-danger';if(!$('checked').checked&&!first)first=$('checked');if(first){$('result').textContent='Check the highlighted brief fields.';first.focus();return;}$('state').textContent='Ready for review';$('state').className='tag is-success is-light mr-4 my-4';$('result').textContent='Marked ready in this local preview. Nothing was published.';});
$('reset').addEventListener('click',()=>{$('brief').reset();for(const id of fields){$(id).classList.remove('is-danger');$(id).removeAttribute('aria-invalid');$(id+'-help').classList.remove('is-danger');}$('checked-help').textContent='';preview();});
$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.theme!=='dark';document.documentElement.dataset.theme=dark?'dark':'light';$('theme').textContent=dark?'Light appearance':'Dark appearance';});
```

コードリファレンス

- 入力内容に不備がある状態で送信すると、最初の未入力欄にフォーカスします。

- 確認準備ができた概要を編集すると、「下書き」に戻ります。

- data-theme属性で外観を切り替えます。

## Bulmaデザインシステムのエージェント設定

### 実装の出発点

指定に従って、マークアップ全体とJavaScriptの例を保存してください。BulmaがCSSを提供し、付属のアプリケーションスクリプトが検証とローカル状態の管理をすべて実装します。オフラインプレビューでは両方のファイルをインライン化します。HTMLのラッパーにはbodyのマークアップ全体を含めてください。付属の操作例とCSSの例は、ここで参照するファイル名で保存してください。

```
<!-- Install and copy the local asset:
npm install bulma@1.0.4
mkdir -p assets
cp node_modules/bulma/css/bulma.min.css assets/bulma.min.css
-->
<!doctype html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Editorial desk</title>
<link rel="stylesheet" href="assets/bulma.min.css">
<style>.section{padding:2rem 1.5rem}.container{max-width:1080px!important}.card-header{align-items:center;flex-wrap:wrap}.title{overflow-wrap:anywhere}.level-left{min-width:0}@media(max-width:768px){.title.is-2{font-size:2rem}.level-right{margin-top:1rem}}</style>
<script src="app.js" defer></script>
</head>
<body><section class="section"><div class="container"><div class="level"><div class="level-left"><div><p class="is-size-7 has-text-weight-bold has-text-link mb-3">BULMA / LOCAL EDITORIAL DESK</p><h1 class="title is-2">Shape the next issue.</h1><p class="subtitle is-5">An article brief, a preview, and an explicit editorial state.</p></div></div><div class="level-right"><button class="button is-light" id="theme">Dark appearance</button></div></div><div class="columns is-variable is-6"><div class="column is-7"><form id="brief" class="box" novalidate><h2 class="title is-4">Article brief</h2><div class="field"><label class="label" for="headline">Headline</label><div class="control"><input class="input" id="headline" value="A quieter way to work" maxlength="90" aria-describedby="headline-help"></div><p class="help" id="headline-help">Use 5–90 characters. This field updates the preview as you type.</p></div><div class="field"><label class="label" for="section">Section</label><div class="control"><div class="select is-fullwidth"><select id="section"><option>Design notes</option><option>Field research</option><option>Product craft</option></select></div></div></div><div class="field"><label class="label" for="summary">Summary</label><div class="control"><textarea class="textarea" id="summary" rows="3" aria-describedby="summary-help">How small choices in layout and language can make a demanding interface feel manageable.</textarea></div><p class="help" id="summary-help">Use at least 20 characters to give the reviewer enough context.</p></div><div class="field"><label class="checkbox"><input id="checked" type="checkbox" aria-describedby="checked-help" aria-describedby="checked-help"> I have checked the headline and summary</label><p class="help" id="checked-help"></p></div><div class="field is-grouped is-grouped-multiline"><div class="control"><button type="submit" class="button is-link">Mark ready for review</button></div><div class="control"><button id="reset" type="button" class="button is-light">Restore draft</button></div></div><p id="result" class="help" role="status">Draft changes stay in this page only.</p></form></div><div class="column is-5"><article class="card"><header class="card-header"><p class="card-header-title">Issue 08 / Article preview</p><span id="state" class="tag is-warning is-light mr-4 my-4">Draft</span></header><div class="card-content"><p class="is-size-7 has-text-link has-text-weight-bold mb-3" id="preview-section">Design notes</p><h2 class="title is-3" id="preview-title">A quieter way to work</h2><div class="content" id="preview-summary">How small choices in layout and language can make a demanding interface feel manageable.</div><hr><p class="is-size-7">Copy desk · Reading time assigned after editing</p></div></article><article class="message is-info mt-5"><div class="message-header"><p>Review is a separate step</p></div><div class="message-body">Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.</div></article></div></div><p class="is-size-7">Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.</p></div></section>
</body>
</html>
```

### あなたのプロジェクト向けプロンプト

```
Bulma 1.0.4を使った編集デスクの全体構成から始めます。field/control/helpの構成、レスポンシブなカラム、カードとメッセージのコンポーネント、ドキュメント全体に適用するライト／ダークテーマを維持してください。見出しや要約を編集したら、textContentを通じて記事プレビューを更新し、状態を「下書き」に戻します。テキストのトリミング後の長さの条件とコピー確認の両方を満たした場合にのみ、確認準備完了にしてください。無効な入力欄を補足説明と関連付け、最初のエラーにフォーカスします。公開を示唆することなく、元の下書きを復元し、検証状態をクリアしてください。
```

## Bulmaデザインシステム：出典と対象範囲

Bulma 1.0.4のCSSリファレンス。編集デスク固有のルールとJavaScriptはオリジナルのサンプルコードです。下書きは保存も公開もされません。

- 概要 CSSのみを使う場合の設定とドキュメント要件。

- CSS変数 グローバルとコンポーネントの適用範囲。

- フォームコントロール フィールドとコントロールの構成。

- レスポンシブ対応 公式のビューポート境界。

- スペーシングヘルパー ユーティリティのサフィックス値。

- ダークモード テーマの選択。

- メッセージ メッセージコンテナの構成。

## Bulmaデザインシステム：関連リソース

### Chakra UI

トークン、セマンティックカラーの役割、レシピ、複合フォームコンポーネントを確認できる、Chakra UI v3のリファレンスです。実際のスペーシングと文字サイズのスケールを確認し、検証、保存失敗のシミュレーション、ライト／ダーク表示を備えた、ネイティブなワークスペースプロフィールフォームを試してみましょう。

### CoreUI

実際の5.9テーマ変数、ネイティブタブ、チェックボックスによる一括選択、直前のローカルなアーカイブ操作を取り消せる常時表示のトーストを使用して構築した、CoreUIのレビューキューです。

### daisyUI

CSSネイティブの招待状作成ツール。daisyUIの5つのセマンティックテーマ、文字色との組み合わせ、ラジオボタンの連結、範囲コントロール、ブラウザー標準の検証、実際のダイアログを使った確認ステップを紹介します。


- [実装リファレンス](https://bulma.io/documentation/form/general/)
- [ソース](https://bulma.io/documentation/features/css-variables/)
- [ソース](https://bulma.io/documentation/features/color-palettes/)
- [ソース](https://bulma.io/documentation/helpers/spacing-helpers/)
- [ソース](https://bulma.io/documentation/start/responsiveness/)
- [関連する仕様を確認する](https://bulma.io/documentation/start/overview/)
- [関連する仕様を確認する](https://bulma.io/documentation/features/dark-mode/)
- [関連する仕様を確認する](https://bulma.io/documentation/helpers/typography-helpers/)
- [関連する仕様を確認する](https://bulma.io/documentation/start/responsiveness/)
- [関連する仕様を確認する](https://bulma.io/documentation/form/general/)
- [関連する仕様を確認する](https://bulma.io/documentation/components/message/)
- [関連する仕様を確認する](https://bulma.io/documentation/features/css-variables/)
- [コードリファレンス](https://bulma.io/documentation/form/general/)
- [コードリファレンス](https://bulma.io/documentation/start/overview/)
- [概要 CSSのみを使う場合の設定とドキュメント要件。](https://bulma.io/documentation/start/overview/)
- [CSS変数 グローバルとコンポーネントの適用範囲。](https://bulma.io/documentation/features/css-variables/)
- [フォームコントロール フィールドとコントロールの構成。](https://bulma.io/documentation/form/general/)
- [レスポンシブ対応 公式のビューポート境界。](https://bulma.io/documentation/start/responsiveness/)
- [スペーシングヘルパー ユーティリティのサフィックス値。](https://bulma.io/documentation/helpers/spacing-helpers/)
- [ダークモード テーマの選択。](https://bulma.io/documentation/features/dark-mode/)
- [メッセージ メッセージコンテナの構成。](https://bulma.io/documentation/components/message/)