Bulma歴3日目のド素人による自分用メモです。
動機
Bulmaのドキュメントはとても分かりやすいのですが、カテゴリ別に整頓してあるのが微妙に使いづらいなぁと思っています。例えばtitleクラスの使い方を確認したいと思ったときに、「どのカテゴリを見ればいいんだっけ？Components？ちがった。Elementだった」ということがあるのでちょっと辛い。一覧になっているとページ内検索で一発でたどり着けて少し楽なので、リンクのリストを作りました。
最初は機能ごとに整理しようと思いましたが、面倒になったのでアルファベット順に並べました。また、全部網羅出来ているわけでもありませんのでご注意ください。例えばmodal,modal-contentなどの親子関係になるようなクラスについてはmodalだけしか記載していません。
クラス一覧(Bulma 0.8.0)
| クラス名 | メモ |
|---|---|
| box | 枠・影つきのコンテナ |
| breadcrumb | パンくずリスト |
| button | ボタン |
| card | カード |
| checkbox | チェックボックス |
| columns | 列レイアウト |
| container | 汎用コンテナ |
| content | コンテンツ用のコンテナ。<UL>等のHTMLタグを使うときはこれで囲む |
| control | フォーム要素用のコンテナ。<input>を使うときはこれで囲む |
| delete | ×ボタン |
| dropdown | ドロップダウンメニュー |
| field | フォーム要素用のコンテナ。<label>と<input>をまとめて囲む |
| file | ファイル選択用ボタン |
| footer | フッタ |
| has-addons | フォーム用。inputの右にボタン付ける等の用途に |
| has-addons-centered | |
| has-addons-right | |
| has-arrow-separator | breadcrumb用 |
| has-background-<type> | 背景色の指定 |
| has-bullet-separator | breadcrumb用 |
| has-dot-separator | breadcrumb用 |
| has-fixed-size |
<textarea>リサイズ禁止 |
| has-icon-<position> | input内アイコンの位置 |
| has-name | File用。ファイル名表示するプレースホルダ |
| has-ratio | エレメントのアスペクト比指定 |
| has-succeeds-separator | breadcrumb用 |
| has-text-<color> | 文字色の指定 |
| has-text-<position> | 文字のアラインメント指定 |
| has-text-weight-<weight> | 文字サイズ指定 |
| help | フォーム用。inputの下に緑や赤文字でヒント出すやつ |
| hero | ヒーローヘッダー |
| icon | アイコン |
| image | 画像。指定のサイズに収めたり、丸の形にくり抜いたり |
| input | フォーム用。文字入力用 |
| is-<color> | 要素のカラーバリエーションを指定する。 black/danger/dark/info/light/link/primary/success/warning/white |
| is-<size> | Title用。要素の文字の大きさを指定する(H1～H6に対応) |
| is-<x> | Columns用。要素の幅を指定する。 is-3 → (3/12 = 25%) is-one-fifths → (1/5 = 20%) その他にis-half/is-fullがある |
| is-<x>by<y> | 画像の表示アスペクト比を指定 |
| is-<x>x<y> | 画像の表示サイズを指定 |
| is-active | 要素がアクティブであることを示す |
| is-ancestor | Tiles用 |
| is-block | display:block |
| is-bold | |
| is-bordered | テーブル用。枠をつける |
| is-boxed | Fileで使用すると大きいボタンになる。Tabで使用するとタブがクラシックスタイルとなる |
| is-capitalized | 先頭を大文字に |
| is-centered | 中央寄せ |
| is-child | Tile用 |
| is-clearfix | |
| is-clipped | |
| is-delete | Tags用。×ボタン追加 |
| is-desktop | レスポンシブデザイン: デスクトップ向け要素 |
| is-expanded | フォーム用。inputのサイズを最大化 |
| is-family-* | フォントファミリーの指定 |
| is-flex | display:flex |
| is-focused | フォーカスが当たっているときの見た目に固定する |
| is-fullhd | Container用 |
| is-fullheight-with-navbar | |
| is-fullwidth | |
| is-gapless | Columns用。Column間の間隔を削除 |
| is-grouped | フォーム用。要素のグルーピング(横に整列する) |
| is-grouped-centered | |
| is-grouped-multiline | |
| is-grouped-right | |
| is-hidden | 要素を非表示(display: none) |
| is-horizontal | フォーム用。複数のFieldを横に並べる |
| is-hoverable | マウスホバー時に反応するようにする |
| is-hovered | Button/TextArea用。マウスホバー時の見た目に固定する |
| is-inline | display:inline |
| is-inline-block | display:inline-block |
| is-inline-flex | display:inline-flex |
| is-invisible | 要素を非表示(visibility: hidden) |
| is-italic | 文字をイタリック体にする |
| is-large | 要素を大きくする(効果はコンポーネントによる) |
| is-left | |
| is-loading | Button用。スピナーを表示 |
| is-lower-alpha |
<ol>要素の連番を小文字のアルファベットにする |
| is-lower-roman |
<ol>要素の連番を小文字のローマ数字にする |
| is-lowercase | 文字列を小文字にする |
| is-marginless | マージンを消去する |
| is-medium | 要素を標準と大きいの中間程度の大きさにする(効果はコンポーネントによる) |
| is-mobile | レスポンシブデザイン: モバイル向け要素 |
| is-multiline | Columns用。複数行にわたってColumnを並べる |
| is-multiple | Select用。複数選択可能にする |
| is-narrow | Column用。幅を縮めてもよいカラムであることを指定 |
| is-narrow-<target> | レスポンシブデザイン: ターゲット毎のis-narrow設定 |
| is-normal | 要素を標準の大きさにする |
| is-offset-* | Column用。カラムの開始位置を指定 |
| is-outlined | ボタン用。枠線に色を付ける |
| is-overlay | |
| is-paddingless | パディングを消去する |
| is-parent | Tiles用。要素が親タイルであることを示す |
| is-pulled-left | |
| is-pulled-right | |
| is-radiusless | border-radiusを0にする |
| is-relative | position: relative |
| is-right | |
| is-rounded | コンポーネントの角を丸める |
| is-selected | Table用。指定した行を選択した状態にする |
| is-shadowless | box-shadow: none |
| is-size-<x> | 文字サイズを指定する(1～7) |
| is-small | 要素を小さくする(効果はコンポーネントによる) |
| is-spaced | Title/Navbar用。スペースを空ける |
| is-sr-only | |
| is-static | Button/Input用。枠と背景を消す。readonly属性と合わせて固定フィールドとして使える |
| is-srtiped | Table用。行が交互にしましま |
| is-toggle | Tabs用。タブがラジオボタン風になる |
| is-toggle-rounded | Tabs用。タブのボタンが丸くなる |
| is-transparent | |
| is-unselectable | テキストを選択できないようにする |
| is-up | Dropdown用。ドロップダウンの表示をボタンの上側にする |
| is-upper-alpha |
<ol>要素の連番を大文字のアルファベットにする |
| is-upper-roman |
<ol>要素の連番を大文字のローマ数字にする |
| is-uppercase | 大文字にする |
| is-variable | |
| is-vcentered | Columns用。Columnを上下中央揃えにする |
| is-widescreen | |
| label | フォームのラベル |
| level | 汎用の列レイアウトコンテナ。コンテンツが左と右に分かれる(e.g. Navbar)場合向け |
| media | Qiitaの記事作成者欄やコメント欄みたいなの |
| menu | メニュー(階層付きインデックス的な) |
| message | タイトル付メッセージボックス。あるいはToastのようなもの |
| modal | モーダルダイアログ(Javascript実装は各自で) |
| navbar | ナビゲーションバー |
| notification | タイトルなしメッセージボックス |
| number | ドキュメントなし。数値を強調したい場合に |
| pagination | ページ番号 |
| panel | 複数のコンポーネントを縦方向にリスト状に並べられるコンテナ |
| progress | プログレスバー |
| radio | フォームのラジオボタン |
| section | ページ分割用のレイアウトコンテナ |
| select | フォームのセレクトボックス |
| table | テーブル |
| tabs | タブバー |
| tags | (分類用)タグコンポーネント |
| textarea | フォームのテキストエリア |
| tile | タイルレイアウト用のコンテナ |
| title | タイトル・見出し用 |