HTML/CSS Framework for JP

v4.0.0

Repository / Releases

「腹が減ってはコードが書けぬ」

Webデザインの腹ごなしに、HTML/CSSフレームワーク「MUSUBii(むすびー)」どうぞ。
MUSUBiiは、日本語サイトのデザイン・コーディングを元気づけます。

OOCSSを応用したラフな設計

日本語フォントの利用を想定

Javascript 未使用

Getting Started

Use

Download

CSSファイル musubii.min.css をダウンロード後、読み込んでください。

<link rel="stylesheet" href="css/musubii.min.css">

npm

npm install musubii

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/musubii@4.0.0/docs/css/musubii.min.css">

Detail

HTML

要素 .(xxxx) 1つに対して、状態 .is-(xxxx) を複数追加してスタイリングするのが基本です。
すべてのクラス名は英小文字・数字・ハイフン1つで構成されています。

ボタンの例 A
ボタンの例 B
ボタンの例 C
ボタンの例 D
<div class="btn is-plain is-primary">ボタンの例 A</div>
<div class="btn is-plain is-success">ボタンの例 B</div>
<div class="btn is-plain is-success is-round">ボタンの例 C</div>
<div class="btn is-plain is-success is-round is-lg">ボタンの例 D</div>

CSS

CSSのレイヤーは主に4つに分類されています。

  • Base … リセットCSSなどの下地
  • Layout … 余白・マージン・グリッドシステム
  • Module … ボタン・テキスト・リスト・見出しなど
  • Utility … 調整用モディファイア

RWD

5つの画面サイズで可変するレスポンシブウェブデザインになっています。

  • Mobile … ~ 575px
  • Fablet … 576px ~ 767px
  • Tablet … 768px ~ 991px
  • Desktop … 992px ~ 1199px
  • Wide … 1200px ~

Support

Chrome Firefox IE Ege Safari(Mac)
Newest Newest 11~ Newest Newest
Safari(iOS) Chrome(Android) Browser(Android)
Newest Newest 4.4~

Documentation

Section

画面幅100%のブロック要素として使います。
.section 直下に配置する .inner には画面幅に応じてレスポンシブな固定幅が設定されます。

.section
.inner
<div class="section">
  <div class="inner">
    ...
  </div>
</div>

Space

ブロック要素を並べた場合に、その組み合わせに応じて後ろのコンテンツに margin-top が付与され、コンテンツ間の距離が保たれます。
対応しているクラスは以下の通りです。中でも広く距離を取りたい場合は .groups で囲みます。

.groups .group .heading .texts .blockquote .pre .btns .list .table .form .fieldset .field .wysiwyg

距離を開けたくない場合や、相互作用をリセットさせたい場合は、以下のようなクラス名で囲みます。

.contents .content .boxs .box

見出し

テキストテキストテキストテキストテキストテキスト

見出し

テキストテキストテキストテキストテキストテキスト

<p class="heading">見出し</p>
<p class="texts">テキストテキストテキストテキストテキストテキスト</p>
<p class="heading">見出し</p>
<p class="texts">テキストテキストテキストテキストテキストテキスト</p>

Grid

Flexboxを用いた12分割+αのグリッドシステムです。付与するクラス名によって、カラム幅の比率・配置の調整が可能になっています。
要素を、 .group > .grid > .col の順に書くのが基本構造です。.grid と .col には状態を表すクラスを付与します。

.col .is-mobile-12 .is-desktop-4
.col .is-mobile-12 .is-desktop-4
.col .is-mobile-12 .is-desktop-4
<div class="group">
  <div class="grid">
    <div class="col is-mobile-12 is-desktop-4">
      ...
    </div>
    <div class="col is-mobile-12 is-desktop-4">
      ...
    </div>
    <div class="col is-mobile-12 is-desktop-4">
      ...
    </div>
  </div>
</div>

Grid - Arrangement

グリッド内の配置をFlexboxのプロパティで調整することができます。
使用するには、 .grid に .is-center (横中央寄せ)や .is-between (等間隔)などの対応したクラスを付与します。

.is-middle
.is-middle
<div class="group">
  <div class="grid is-middle">
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
</div>
.is-bottom
.is-bottom
<div class="group">
  <div class="grid is-bottom">
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
</div>
.is-center
.is-center
<div class="group">
  <div class="grid is-center">
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
</div>
.is-right
.is-right
<div class="group">
  <div class="grid is-right">
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
</div>
.is-between
.is-between
<div class="group">
  <div class="grid is-between">
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
</div>
.is-around
.is-around
<div class="group">
  <div class="grid is-around">
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
</div>

Grid - Responsive

カラム幅の比率を変更するには、 .col にサイズを表すクラス名を付与します。サイズは、ディスプレイサイズごとにモバイルファーストな設定が可能です。

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

カラムの比率保持

.is-mobile-1
|
.is-mobile-12

.is-fablet-1
|
.is-fablet-12

.is-tablet-1
|
.is-tablet-12

.is-desktop-1
|
.is-desktop-12

.is-wide-1
|
.is-wide-12

残っている余白
いっぱいに広がり等分

.is-mobile-0

.is-fablet-0

.is-tablet-0

.is-desktop-0

.is-wide-0

子要素の
サイズに縮む

.is-mobile-auto

.is-fablet-auto

.is-tablet-auto

.is-desktop-auto

.is-wide-auto

1
0
2
0
3
0
4
0
5
0
6
0
7
0
8
0
9
0
10
0
11
0
12
0
<div class="group">
  <div class="grid">
    <div class="col is-mobile-1">...</div>
    <div class="col is-mobile-0">...</div>
  </div>
  <div class="grid">
    <div class="col is-mobile-2">...</div>
    <div class="col is-mobile-0">...</div>
  </div>
  <div class="grid">
    <div class="col is-mobile-3">...</div>
    <div class="col is-mobile-0">...</div>
  </div>
  <div class="grid">
    <div class="col is-mobile-4">...</div>
    <div class="col is-mobile-0">...</div>
  </div>
  <div class="grid">
    <div class="col is-mobile-5">...</div>
    <div class="col is-mobile-0">...</div>
  </div>
  <div class="grid">
    <div class="col is-mobile-6">...</div>
    <div class="col is-mobile-0">...</div>
  </div>
  <div class="grid">
    <div class="col is-mobile-7">...</div>
    <div class="col is-mobile-0">...</div>
  </div>
  <div class="grid">
    <div class="col is-mobile-8">...</div>
    <div class="col is-mobile-0">...</div>
  </div>
  <div class="grid">
    <div class="col is-mobile-9">...</div>
    <div class="col is-mobile-0">...</div>
  </div>
  <div class="grid">
    <div class="col is-mobile-10">...</div>
    <div class="col is-mobile-0">...</div>
  </div>
  <div class="grid">
    <div class="col is-mobile-11">...</div>
    <div class="col is-mobile-0">...</div>
  </div>
  <div class="grid">
    <div class="col is-mobile-12">...</div>
    <div class="col is-mobile-0">...</div>
  </div>
</div>

Grid - Stretch

カラムはデフォルトで高さが揃いますが、更に子要素まで高さを揃えるには、 .grid に .is-stretch を付与します。

.is-stretch


.is-stretch
<div class="group">
  <div class="grid is-stretch">
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
</div>

Grid - Gap

グリッドの溝を消す場合は、 .grid に .is-gap-none を付与します。

.is-gap-none
.is-gap-none
<div class="group">
  <div class="grid is-gap-none">
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
</div>

Heading

見出しを作るには、要素のクラス名を .heading にします。Utilityによってアレンジが可能です。

1番目に大きな見出し

2番目に大きな見出し

3番目に大きな見出し

4番目に大きな見出し

5番目に大きな見出し

6番目に大きな見出し

<p class="heading is-xxl">1番目に大きな見出し</p>
<p class="heading is-xl">2番目に大きな見出し</p>
<p class="heading is-lg">3番目に大きな見出し</p>
<p class="heading is-md">4番目に大きな見出し</p>
<p class="heading is-sm">5番目に大きな見出し</p>
<p class="heading is-xs">6番目に大きな見出し</p>

Text

文章を作るには、ブロック要素のクラス名を .texts 、インライン要素のクラス名を .text にします。

デフォルトストロングスモールItalic削除アイコン追加face注釈入れ※1

<p class="texts">
  <span class="text">デフォルト</span>
  <strong class="text is-strong">ストロング</strong>
  <small class="text is-small">スモール</small>
  <span class="text is-italic">Italic</span>
  <del class="text is-delete">削除</del>
  <span class="text">
    <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
    <span class="text">アイコン追加</span>
    <i class="material-icons">face</i>
  </span>
  <span class="text">
    <span class="text">注釈入れ</span>
    <sup>※1</sup>
  </span>
</p>

ダーク ダーク 1 ダーク 2 ダーク 3 ダーク 4 ダーク 5 ダーク 6 ダーク 7 ダーク 8 ダーク 9

ライト ライト 1 ライト 2 ライト 3 ライト 4 ライト 5 ライト 6 ライト 7 ライト 8 ライト 9

<p class="texts">
  <span class="text is-dark">ダーク</span>
  <span class="text is-dark-1">ダーク 1</span>
  <span class="text is-dark-2">ダーク 2</span>
  <span class="text is-dark-3">ダーク 3</span>
  <span class="text is-dark-4">ダーク 4</span>
  <span class="text is-dark-5">ダーク 5</span>
  <span class="text is-dark-6">ダーク 6</span>
  <span class="text is-dark-7">ダーク 7</span>
  <span class="text is-dark-8">ダーク 8</span>
  <span class="text is-dark-9">ダーク 9</span>
</p>

<p class="texts">
  <span class="text is-light">ライト</span>
  <span class="text is-light-1">ライト 1</span>
  <span class="text is-light-2">ライト 2</span>
  <span class="text is-light-3">ライト 3</span>
  <span class="text is-light-4">ライト 4</span>
  <span class="text is-light-5">ライト 5</span>
  <span class="text is-light-6">ライト 6</span>
  <span class="text is-light-7">ライト 7</span>
  <span class="text is-light-8">ライト 8</span>
  <span class="text is-light-9">ライト 9</span>
</p>

LinkPrimaryInfoSuccessWarningDanger

Link reversePrimaryInfoSuccessWarningDanger

<p class="texts">
  <span class="text is-link is-primary">Primary</span>
  <span class="text is-link is-info">Info</span>
  <span class="text is-link is-success">Success</span>
  <span class="text is-link is-warning">Warning</span>
  <span class="text is-link is-danger">Danger</span>
</p>

<p class="texts">
  <span class="text is-link-reverse is-primary">Primary</span>
  <span class="text is-link-reverse is-info">Info</span>
  <span class="text is-link-reverse is-success">Success</span>
  <span class="text is-link-reverse is-warning">Warning</span>
  <span class="text is-link-reverse is-danger">Danger</span>
</p>

capitalizelowercaseuppercase

<p class="texts">
  <span class="text is-capitalize">capitalize</span>
  <span class="text is-lowercase">lowercase</span>
  <span class="text is-uppercase">uppercase</span>
</p>

Text - Size

サイズを表すクラス名 .is-(x) を付与することでテキストの大きさを変化させられます。

極小小さい小さめ中くらい大きめ大きい特大

<p class="texts">
  <span class="text is-xxs">極小</span>
  <span class="text is-xs">小さい</span>
  <span class="text is-sm">小さめ</span>
  <span class="text is-md">中くらい</span>
  <span class="text is-lg">大きめ</span>
  <span class="text is-xl">大きい</span>
  <span class="text is-xxl">特大</span>
</p>

Text - Align

.texts にクラス名 .is-left .is-center .is-right を付与することでテキストの寄せる方向を変化させられます。

左寄せのテキスト

中央寄せのテキスト

右寄せのテキスト

<p class="texts is-left">左寄せのテキスト</p>
<p class="texts is-center">中央寄せのテキスト</p>
<p class="texts is-right">右寄せのテキスト</p>

Text - Ellipsis

テキストを端で折り返さずに三点リーダーで省略する場合は、ブロック要素に .is-ellipsis を付与します。

テキストを端で折り返さずに、三点リーダーで省略するスタイリング。テキストを端で折り返さずに、三点リーダーで省略するスタイリング。テキストを端で折り返さずに、三点リーダーで省略するスタイリング。

<p class="texts is-ellipsis">...</p>

Text - Blockquote

引用枠を表示させる場合は、 .blockquote で囲います。

引用の「blockquote」を使う場合。border-leftとbackground-colorを用いた装飾。
<blockquote class="blockquote">...</blockquote>

Text - Code

テキスト中にインラインでコードを表示させる場合は、 .code で囲います。 ブロック要素としてコードを表示させたい場合は、 .pre の中に .code を書きます。

テキストの途中に code を表示させる。

html {
  box-sizing: border-box;
  font-family: sans-serif;
  overflow-y: scroll;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
<p class="texts">
  テキストの途中に
  <code class="code">code</code>
  を表示させる。
</p>

<pre class="pre">
  <code class="code">
    .pre {
      position: relative;
      background-color: $dark-2;
      border-radius: 2px;
      color: $light;
      padding: 20px 0;
    }
  </code>
</pre>

Button

ボタンを作るには、ボタンをまとめるブロック要素のクラス名を .btns 、ボタン自体のクラス名を .btn にします。
装飾をプレーンタイプにするには .btn に .is-plain を付与します。

<div class="btns">
  <a class="btn is-plain">戻る</a>
  <a class="btn is-plain is-primary">決定</a>
  <a class="btn is-plain is-success">登録</a>
  <a class="btn is-plain is-danger">削除</a>
  <a class="btn is-plain is-disable">不可</a>
  <a class="btn is-plain is-primary">
    <i aria-hidden="true" class="fa fa-flag"></i>
    <span class="text">FontAwesome</span>
  </a>
  <a class="btn is-plain is-success">
    <span class="text">FontAwesome</span>
    <i aria-hidden="true" class="fa fa-angle-right"></i>
  </a>
  <a class="btn is-plain is-primary">
    <i class="material-icons">face</i>
    <span class="text">Material Icons</span>
  </a>
  <a class="btn is-plain is-success">
    <span class="text">Material Icons</span>
    <i class="material-icons">keyboard_arrow_right</i>
  </a>
</div>

Button - Melt

ホバーしたときに浮き上がるボタンを作るには .btn に .is-melt を付与します。

Button - Outline

アウトラインのみでボタンらしさを出すには .btn に .is-outline を付与します。

Button - Ghost

背景に色や写真を透かせるボタンを作るには .btn に .is-ghost を付与します。

Button - Size

サイズを表すクラス名 .is-(x) を付与することでボタンの大きさを変化させられます。角丸のサイズは相対的に変化します。

<div class="btns">
  <a class="btn is-xxs">極小</a>
  <a class="btn is-xs">小さい</a>
  <a class="btn is-sm">小さめ</a>
  <a class="btn is-md">中くらい</a>
  <a class="btn is-lg">大きめ</a>
  <a class="btn is-xl">大きい</a>
  <a class="btn is-xxl">特大</a>
</div>

Button - Align

.btns にクラス名 .is-left .is-center .is-right を付与することでボタンの寄せる方向を変化させられます。

<div class="btns is-left">...</div>
<div class="btns is-center">...</div>
<div class="btns is-right">...</div>

Button - Floating

.btns にクラス名 .is-floating を付与することで、ドロップシャドウを付けられます。

Button - Round

.btns にクラス名 .is-round を付与することでボタンの角を丸められます。

Button - Circle

.btns にクラス名 .is-circle を付与することでボタンの円形にできます。

<a class="btn is-plain is-circle">...</a>

Button - Responsive

.btns 直下のボタンは各デバイスサイズごとに
.is-(xxxx)-full で100%、 .is-(xxxx)-0 で等分、 .is-(xxxx)-auto で本来のサイズに戻せます。

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

100%に広がる

.is-mobile-full

.is-fablet-full

.is-tablet-full

.is-desktop-full

.is-wide-full

余白を等分しつつ広がる

.is-mobile-0

.is-fablet-0

.is-tablet-0

.is-desktop-0

.is-wide-0

本来のサイズに戻る

.is-mobile-auto

.is-fablet-auto

.is-tablet-auto

.is-desktop-auto

.is-wide-auto

Button - Bar

.btns にクラス名 .is-bar を付与することで子要素のボタンを連結させられます。

<div class="btns is-bar">
  <a class="btn is-plain">...</a>
  <a class="btn is-plain">...</a>
  <a class="btn is-plain">...</a>
</div>

List

デフォルトスタイルでリストを作る場合、黒丸は .is-disc 白丸は .is-circle ナンバリングは .is-decimal を .list に付与します。
親要素につけたクラス名によって子要素の .item に装飾を施せます。また、リストは入れ子にできます。
また、 .is-note を .list に付与した場合は、直下の要素が横並びになり自由にナンバリング付きの米印などを置けます。

  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
  • リストのテキストは1行目以外をインデントして読みやすくする
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
    • リストを入れ子にした場合は、その分インデントを追加して構造を見せる
  • ※1自由にナンバリング付きの米印などを置ける注釈用のスタイル
  • ※2自由にナンバリング付きの米印などを置ける注釈用のスタイル
  • ※3自由にナンバリング付きの米印などを置ける注釈用のスタイル
  • 自由にナンバリング付きの米印などを置ける注釈用のスタイル
  • ※100自由にナンバリング付きの米印などを置ける注釈用のスタイル
<ul class="list is-disc">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

<ul class="list is-circle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

<ul class="list is-decimal">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

<ul class="list is-note">
  <li class="item">
    <span>※1</span>
    <span>...</span>
  </li>
  <li class="item">
    <span>※2</span>
    <span>...</span>
  </li>
</ul>

Table

テーブルの装飾には、親要素に .table 、変化させたい箇所に .box を用います。
幅の指定や連結は、HTMLタグへの記述で行います。

見出しセル 見出しセル 見出しセル
#1 データセル データセル データセル データセル
データセル スポット表示 データセル データセル
#2 データセル データセル データセル データセル
#3 データセル データセル エラー表示 データセル
#4 データセル データセル データセル データセル
テーブルフッター
<table class="table is-stripe is-border is-center is-middle">
  <thead>
    <tr class="box is-paint">
      <th width="20"></th>
      <th>見出しセル</th>
      <th>見出しセル</th>
      <th colspan="2">見出しセル</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2" class="box is-paint">#1</td>
      <td>データセル</td>
      <td>データセル</td>
      <td>データセル</td>
      <td>データセル</td>
    </tr>
    <tr>
      <td>データセル</td>
      <td class="box is-spot">スポット表示</td>
      <td>データセル</td>
      <td>データセル</td>
    </tr>
    <tr>
      <td class="box is-paint">#2</td>
      <td>データセル</td>
      <td>データセル</td>
      <td>データセル</td>
      <td>データセル</td>
    </tr>
    <tr>
      <td class="box is-paint">#3</td>
      <td>データセル</td>
      <td>データセル</td>
      <td class="box is-danger">エラー表示</td>
      <td>データセル</td>
    </tr>
    <tr>
      <td class="box is-paint">#4</td>
      <td>データセル</td>
      <td>データセル</td>
      <td>データセル</td>
      <td>データセル</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="5" class="box is-right">テーブルフッター</th>
    </tr>
  </tfoot>
</table>

Table - Line

テーブルに線に加えるには .table に .is-line または .is-outline または .is-border を付与ます。

見出しセル 見出しセル 見出しセル 見出しセル 見出しセル
データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル
見出しセル 見出しセル 見出しセル 見出しセル 見出しセル
データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル
見出しセル 見出しセル 見出しセル 見出しセル 見出しセル
データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル
<table class="table is-line">
  ...
</table>

<table class="table is-outline">
  ...
</table>

<table class="table is-border">
  ...
</table>

Table - Align

.table または .box にクラス名 .is-left .is-center .is-right .is-middle を付与することでテキストの寄せる方向を変化させられます。

.box .is-left .box .is-center .box .is-right
.box .is-left
.box .is-left
.box .is-left
.box .is-center .box .is-right .is-middle
<table class="table">
  <thead>
    <tr>
      <th class="box is-left"></th>
      <th class="box is-center"></th>
      <th class="box is-right"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="box is-left"></td>
      <td class="box is-center"></td>
      <td class="box is-right is-middle"></td>
    </tr>
  </tbody>
</table>

Table - Paint

テーブルのセルを塗るには .box と .is-(xxxx) の形式で塗り設定を行います。tr タグに設定して一行すべて塗ることもできます。
.table に .is-stripe を設定した場合は、自動的に1行飛ばしで塗られます。

.box .is-paint default
.box .is-paint .box .is-spot
.box .is-paint .box .is-danger
見出しセル 見出しセル 見出しセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
<table class="table">
  <tbody>
    <tr>
      <td class="box is-paint"></td>
      <td></td>
    </tr>
    <tr>
      <td class="box is-paint"></td>
      <td class="box is-spot"></td>
    </tr>
    <tr>
      <td class="box is-paint"></td>
      <td class="box is-danger"></td>
    </tr>
  </tbody>
</table>

<table class="table is-stripe">
  ...
</table>

Table - Scroll

情報が多いテーブルをモバイルなどで表示させた場合、文字の折り返しに限界が来てレイアウトが崩れます。
データ量が多くなることが予想された場合、.table をUtilityを付与した .group .is-scroll-x でラッピングし、横スクロール機能を持たせます。

見出しセル 見出しセル 見出しセル 見出しセル 見出しセル 見出しセル 見出しセル
データセル データセル データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル データセル データセル
<div class="group is-scroll-x">
  <table class="table">
    ...
  </table>
</div>

Form

ブラウザデフォルトを拡張する設計ですので、クラスを当てなくても使用できます。
親要素に .form を用いることで、他のモジュールとの距離を保つことができます。

メールアドレス

パスワード

<form class="form">
  <div class="group">
    <p class="heading">メールアドレス</p>
    <div class="field">
      <input class="input is-mobile-0" type="email" placeholder="example@gmail.com">
    </div>
  </div>
  <div class="group">
    <p class="heading">パスワード</p>
    <div class="field">
      <input class="input is-mobile-0" type="password">
    </div>
  </div>
  <div class="group">
    <label>
      <input class="input" type="checkbox">
      <span class="text is-sm">次回から自動的にログイン</span>
    </label>
  </div>
  <div class="group">
    <div class="btns">
      <input class="btn is-plain is-success is-full" type="submit" value="ログイン">
    </div>
  </div>
</form>

Form - Field

フォームパーツを .field で囲むと横並びや可変に対応します。
.is-(xxxx)-full で100%、 .is-(xxxx)-0 で等分、 .is-(xxxx)-auto で本来のサイズに戻せます。
.is-middle を付与し天地中央寄せで並べることも可能です。

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

100%に広がる

.is-mobile-full

.is-fablet-full

.is-tablet-full

.is-desktop-full

.is-wide-full

余白を等分しつつ広がる

.is-mobile-0

.is-fablet-0

.is-tablet-0

.is-desktop-0

.is-wide-0

本来のサイズに戻る

.is-mobile-auto

.is-fablet-auto

.is-tablet-auto

.is-desktop-auto

.is-wide-auto

Desktopサイズまでは入力枠がフルサイズ↓

誕生日:

性別:

<form class="form">
  <div class="group">
    <p class="heading">Desktopサイズまでは入力枠がフルサイズ↓</p>
    <div class="field">
      <input class="input is-mobile-full is-desktop-auto" type="text" placeholder="Text">
      <input class="input is-mobile-full is-desktop-auto" type="text" placeholder="Text">
    </div>
  </div>
  <div class="group">
    <p class="heading">誕生日</p>
    <div class="field is-middle">
      <select class="select">
        <option>2017</option>
        <option>2016</option>
        ...
      </select>
      <select class="select">
        <option>1</option>
        <option>2</option>
        ...
      </select>
      <select class="select">
        <option>1</option>
        <option>2</option>
        ...
      </select>
    </div>
  </div>
  <div class="group">
    <div class="field is-middle">
      <p class="heading">性別:</p>
      <select class="select">
        <option>男性</option>
        <option>女性</option>
      </select>
    </div>
  </div>
</form>

Form - Parts

フォームの各パーツは、対応しているHTMLタグの属性と値が使用できます。

TEXT
SEARCH
URL
E-MAIL
TEL
PASSWORD
DATETIME LOCAL
DATE
MONTH
TIME
NUMBER
FILE
COLOR
RANGE
TEXTAREA
RADIO
CHECKBOX
SELECT
SELECT MULTIPLE
<form class="form">
  <fieldset class="fieldset">
    <legend class="heading is-sm">TEXT</legend>
    <div class="field">
      <input class="input" type="text" placeholder="Text">
      <input class="input" type="text" placeholder="Disabled" disabled="">
      <input class="input" type="text" value="Readonly" readonly="">
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">SEARCH</legend>
    <div class="field">
      <input class="input" type="search" placeholder="Search">
      <input class="input" type="search" placeholder="Search" disabled="">
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">URL</legend>
    <div class="field">
      <input class="input" type="url" placeholder="example.com">
      <input class="input" type="url" placeholder="example.com" disabled="">
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">E-MAIL</legend>
    <div class="field">
      <input class="input" type="email" placeholder="example@gmail.com">
      <input class="input" type="email" placeholder="example@gmail.com" disabled="">
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">TEL</legend>
    <div class="field">
      <input class="input" type="tel" size="14" maxlength="12" placeholder="000-000-0000">
      <input class="input" type="tel" size="14" maxlength="12" placeholder="000-000-0000" disabled="">
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">PASSWORD</legend>
    <div class="field">
      <input class="input" type="password">
      <input class="input" type="password" disabled="">
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">DATETIME LOCAL</legend>
    <div class="field">
      <input class="input" type="datetime-local" value="2017-02-02T00:00:00">
      <input class="input" type="datetime-local" value="2017-02-02T00:00:00" disabled="">
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">DATE</legend>
    <div class="field">
      <input class="input" type="date" value="2017-02-02">
      <input class="input" type="date" value="2017-02-02" disabled="">
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">MONTH</legend>
    <div class="field">
      <input class="input" type="month" value="2017-02">
      <input class="input" type="month" value="2017-02" disabled="">
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">TIME</legend>
    <div class="field">
      <input class="input" type="time" value="00:00:00">
      <input class="input" type="time" value="00:00:00" disabled="">
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">NUMBER</legend>
    <div class="field">
      <input class="input" type="number" step="10">
      <input class="input" type="number" step="10" disabled="">
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">FILE</legend>
    <div class="field">
      <input class="input" type="file">
      <input class="input" type="file" disabled="">
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">COLOR</legend>
    <div class="field">
      <input class="input" type="color" value="#1cb4c7">
      <input class="input" type="color" value="#1cb4c7" disabled="">
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">RANGE</legend>
    <div class="field">
      <input class="input" type="range">
      <input class="input" type="range" disabled="">
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">TEXTAREA</legend>
    <div class="field">
      <textarea class="textarea"></textarea>
      <textarea class="textarea" disabled=""></textarea>
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">RADIO</legend>
    <div class="field">
      <label>
        <input class="input" type="radio" name="radio-default-1" checked=""><span class="text">むすびー</span>
      </label>
      <label>
        <input class="input" type="radio" name="radio-default-1"><span class="text">むすびい</span>
      </label>
      <label>
        <input class="input" type="radio" name="radio-default-1" disabled=""><span class="text">むすび</span>
      </label>
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">CHECKBOX</legend>
    <div class="field">
      <label>
        <input class="input" type="checkbox" name="checkbox-default-1" checked=""><span class="text">HTML</span>
      </label>
      <label>
        <input class="input" type="checkbox" name="checkbox-default-1"><span class="text">CSS</span>
      </label>
      <label>
        <input class="input" type="checkbox" name="checkbox-default-1" disabled=""><span class="text">JS</span>
      </label>
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">SELECT</legend>
    <div class="field">
      <select class="select">
        <option>Select A</option>
        <option>Select B</option>
        <option>Select C</option>
        <option>Select D</option>
        <option>Select E</option>
      </select>
      <select class="select" disabled="">
        <option>Select A</option>
        <option>Select B</option>
        <option>Select C</option>
        <option>Select D</option>
        <option>Select E</option>
      </select>
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="heading is-sm">SELECT MULTIPLE</legend>
    <div class="field">
      <select class="select" multiple="">
        <option>Select A</option>
        <option>Select B</option>
        <option>Select C</option>
        <option>Select D</option>
        <option>Select E</option>
      </select>
      <select class="select" multiple="" disabled="">
        <option>Select A</option>
        <option>Select B</option>
        <option>Select C</option>
        <option>Select D</option>
        <option>Select E</option>
      </select>
    </div>
  </fieldset>
  <div class="btns">
    <input class="btn is-plain is-primary" type="button" value="インプットボタン">
    <input class="btn is-plain is-primary" type="button" value="インプットボタン" disabled="">
  </div>
  <div class="btns">
    <input class="btn is-plain" type="reset">
    <input class="btn is-plain" type="reset" disabled="">
  </div>
  <div class="btns">
    <input class="btn is-plain is-success" type="submit">
    <input class="btn is-plain is-success" type="submit" disabled="">
  </div>
</form>

Icon

アイコンの利用については、Font Awesome・Material Icons・IcoMoonなどの利用を想定しています。
要素のタグは .fa .material-icons .im .icon のうち、いずれも同じように使用できます。
HTMLソース上で各種アイコンと .text が隣り合うと、自動的にmargin-leftが付与され距離が保たれます。

ハートハートハートハート

<p class="texts">
  <i aria-hidden="true" class="fa fa-heart"></i>
  <span class="text">ハート</span>
  <i aria-hidden="true" class="fa fa-heart"></i>
  <span class="text">ハート</span>
  ...
</p>

Icon - Fit

各種アイコンのタグに .is-fit を付与することで、アイコンの領域を一定に統一できます。



<p class="texts">
  <i aria-hidden="true" class="fa fa-institution"></i>
  <br/>
  <i aria-hidden="true" class="fa fa-angle-right"></i>
</p>

<p class="texts">
  <i aria-hidden="true" class="fa fa-institution is-fit"></i>
  <br/>
  <i aria-hidden="true" class="fa fa-angle-right is-fit"></i>
</p>

Alert

アラートのUIを作るには、テキスト類を .alert でラッピングします。
アラートの役割にしたがって .is-primary .is-info .is-success .is-warning .is-danger を付与しスタイルを変化させます。

アプリの通知設定へようこそ!
アプリの通知設定へようこそ!
通知設定に関するチュートリアルはこちら。
通知設定は自動的に保存されました。
通知設定はアクティベートされていません。
通知設定は削除されました。
<div class="alert">
  <i aria-hidden="true" class="fa fa-thumbs-o-up is-fit"></i>
  <span class="text">アプリの通知設定へようこそ!</span>
</div>

<div class="alert is-primary">
  <i aria-hidden="true" class="fa fa-thumbs-o-up is-fit"></i>
  <span class="text">アプリの通知設定へようこそ!</span>
</div>

<div class="alert is-info">
  <i aria-hidden="true" class="fa fa-info-circle is-fit"></i>
  <span class="text">通知設定に関するチュートリアルはこちら。</span>
</div>

<div class="alert is-success">
  <i aria-hidden="true" class="fa fa-check is-fit"></i>
  <span class="text">通知設定は自動的に保存されました。</span>
</div>

<div class="alert is-warning">
  <i aria-hidden="true" class="fa fa-exclamation-triangle is-fit"></i>
  <span class="text">通知設定はアクティベートされていません。</span>
</div>

<div class="alert is-danger">
  <i aria-hidden="true" class="fa fa-times is-fit"></i>
  <span class="text">通知設定は削除されました。</span>
</div>

WYSIWYG

WYSIWYGやMarkdownで生成したHTMLタグに装飾を施すスタイルセットです。(WordPressの出力など)
使用するには、出力箇所を .wysiwyg でラッピングします。

1番目に大きな見出し

2番目に大きな見出し

3番目に大きな見出し

4番目に大きな見出し

5番目に大きな見出し
6番目に大きな見出し

WYSIWYG内のブロック要素も、他の要素のレギュレーションと近い形で前後のオブジェクトの組み合わせに基づきmargin-topが付与され、ブロックの距離感を保つことができます。主に、データベースからの動的な出力を行う「WordPress」などのプログラムを想定しています。

WYSIWYG内のブロック要素も、他の要素のレギュレーションと近い形で前後のオブジェクトの組み合わせに基づきmargin-topが付与され、ブロックの距離感を保つことができます。主に、データベースからの動的な出力を行う「WordPress」などのプログラムを想定しています。

  • リストのテキストはインデントとリストスタイルを施します
  • リストのテキストはインデントとリストスタイルを施します
  • リストのテキストはインデントとリストスタイルを施します
  • リストのテキストはインデントとリストスタイルを施します
    • リストのテキストはインデントとリストスタイルを施します
    • リストのテキストはインデントとリストスタイルを施します
    • リストのテキストはインデントとリストスタイルを施します
    • リストのテキストはインデントとリストスタイルを施します

WYSIWYG内のブロック要素も、他の要素のレギュレーションと近い形で前後のオブジェクトの組み合わせに基づきmargin-topが付与され、ブロックの距離感を保つことができます。主に、データベースからの動的な出力を行う「WordPress」などのプログラムを想定しています。

  1. リストのテキストはインデントとリストスタイルを施します
  2. リストのテキストはインデントとリストスタイルを施します
  3. リストのテキストはインデントとリストスタイルを施します
  4. リストのテキストはインデントとリストスタイルを施します
    1. リストのテキストはインデントとリストスタイルを施します
    2. リストのテキストはインデントとリストスタイルを施します
    3. リストのテキストはインデントとリストスタイルを施します
    4. リストのテキストはインデントとリストスタイルを施します

WYSIWYG内のブロック要素も、他の要素のレギュレーションと近い形で前後のオブジェクトの組み合わせに基づきmargin-topが付与され、ブロックの距離感を保つことができます。主に、データベースからの動的な出力を行う「WordPress」などのプログラムを想定しています。

引用の「blockquote」を使う場合。border-leftとbackground-colorを用いた装飾を施しています。

文章の途中にコードを書きたい場合は code タグで囲む。インラインでコードを表記することができるので、ちょっとしたコードへの説明が容易になります。逆に、コード自体をブロック化して全体を伝える場合は pre で囲み、以下のように表示させます。

html {
  box-sizing: border-box;
  font-family: sans-serif;
  overflow-y: scroll;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

WYSIWYGのテキストには、強調表示イタリック表示
打ち消し線などのスタイルを用いることができます。その他、テーブルを組んだ場合は以下の通り。テーブル内のテキストを寄せる方向はインラインで書き込みます。

Align left Align Center Align Right
左寄せ 通常 右寄せ
左寄せ 2行目 右寄せ
左寄せ 3行目 右寄せ
左寄せ 4行目 右寄せ
<div class="wysiwyg">
  <h1>1番目に大きな見出し</h1>
  <h2>2番目に大きな見出し</h2>
  <h3>3番目に大きな見出し</h3>
  <h4>4番目に大きな見出し</h4>
  <h5>5番目に大きな見出し</h5>
  <h6>6番目に大きな見出し</h6>
  <p>WYSIWYG内のブロック要素も、他の要素のレギュレーションと近い形で前後のオブジェクトの組み合わせに基づきmargin-topが付与され、ブロックの距離感を保つことができます。主に、<a>データベース</a>からの動的な出力を行う「<strong>WordPress</strong>」などのプログラムを想定しています。</p>
  <p>WYSIWYG内のブロック要素も、他の要素のレギュレーションと近い形で前後のオブジェクトの組み合わせに基づきmargin-topが付与され、ブロックの距離感を保つことができます。主に、<a>データベース</a>からの動的な出力を行う「<strong>WordPress</strong>」などのプログラムを想定しています。</p>
  <ul>
    <li>リストのテキストはインデントとリストスタイルを施します</li>
    <li>リストのテキストはインデントとリストスタイルを施します</li>
    <li>リストのテキストはインデントとリストスタイルを施します</li>
    <li>リストのテキストはインデントとリストスタイルを施します
      <ul>
        <li>リストのテキストはインデントとリストスタイルを施します</li>
        <li>リストのテキストはインデントとリストスタイルを施します</li>
        <li>リストのテキストはインデントとリストスタイルを施します</li>
        <li>リストのテキストはインデントとリストスタイルを施します</li>
      </ul>
    </li>
  </ul>
  <hr>
  <p>WYSIWYG内のブロック要素も、他の要素のレギュレーションと近い形で前後のオブジェクトの組み合わせに基づきmargin-topが付与され、ブロックの距離感を保つことができます。主に、<a>データベース</a>からの動的な出力を行う「<strong>WordPress</strong>」などのプログラムを想定しています。</p>
  <ol>
    <li>リストのテキストはインデントとリストスタイルを施します</li>
    <li>リストのテキストはインデントとリストスタイルを施します</li>
    <li>リストのテキストはインデントとリストスタイルを施します</li>
    <li>リストのテキストはインデントとリストスタイルを施します
      <ol>
        <li>リストのテキストはインデントとリストスタイルを施します</li>
        <li>リストのテキストはインデントとリストスタイルを施します</li>
        <li>リストのテキストはインデントとリストスタイルを施します</li>
        <li>リストのテキストはインデントとリストスタイルを施します</li>
      </ol>
    </li>
  </ol>
  <p>WYSIWYG内のブロック要素も、他の要素のレギュレーションと近い形で前後のオブジェクトの組み合わせに基づきmargin-topが付与され、ブロックの距離感を保つことができます。主に、<a>データベース</a>からの動的な出力を行う「<strong>WordPress</strong>」などのプログラムを想定しています。</p>
  <blockquote>引用の「blockquote」を使う場合。border-leftとbackground-colorを用いた装飾を施しています。</blockquote>
  <p>文章の途中にコードを書きたい場合は&nbsp;<code>code</code>&nbsp;タグで囲む。インラインでコードを表記することができるので、ちょっとしたコードへの説明が容易になります。逆に、コード自体をブロック化して全体を伝える場合は&nbsp;<code>pre</code>&nbsp;で囲み、以下のように表示させます。</p>
  <pre>
    <code>
      html {
        box-sizing: border-box;
        font-family: sans-serif;
        overflow-y: scroll;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
      }
    </code>
  </pre>
  <p>WYSIWYGのテキストには、<strong>強調表示</strong>・<em>イタリック表示</em>・
    <br>
    <s>打ち消し線</s>などのスタイルを用いることができます。その他、テーブルを組んだ場合は以下の通り。テーブル内のテキストを寄せる方向はインラインで書き込みます。
  </p>
  <table>
    <thead>
      <tr>
        <th align="left">Align left</th>
        <th align="center">Align Center</th>
        <th align="right">Align Right</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align="left">左寄せ</td>
        <td align="center">通常</td>
        <td align="right">右寄せ</td>
      </tr>
      <tr>
        <td align="left">左寄せ</td>
        <td align="center">2行目</td>
        <td align="right">右寄せ</td>
      </tr>
      <tr>
        <td align="left">左寄せ</td>
        <td align="center">3行目</td>
        <td align="right">右寄せ</td>
      </tr>
      <tr>
        <td align="left">左寄せ</td>
        <td align="center">4行目</td>
        <td align="right">右寄せ</td>
      </tr>
    </tbody>
  </table>
</div>

Size

サイズ変更を行うUtilityを、ほぼすべてのモジュールに対して使えます。

Add Class .is-xxs .is-xs .is-sm .is-md .is-lg .is-xl .is-xxl
Change Size 62.5% 75% 87.5% 100% 125% 150% 200%

Deco

色や装飾・位置を調整を行うUtilityを、ほぼすべてのモジュールに対して使えます。

Add Class .is-dark .is-dark-1 .is-dark-2 .is-dark-3 .is-dark-4 .is-dark-5 .is-dark-6 .is-dark-7 .is-dark-8 .is-dark-9
Text Alpha 1 0.87 0.7 0.6 0.5 0.4 0.26 0.15 0.12 0.05
Add Class .is-light .is-light-1 .is-light-2 .is-light-3 .is-light-4 .is-light-5 .is-light-6 .is-light-7 .is-light-8 .is-light-9
Text Alpha 1 0.87 0.7 0.6 0.5 0.4 0.26 0.15 0.12 0.05
Add Class .is-primary .is-info .is-success .is-warning .is-danger
Text Color シアン ブルー グリーン オレンジ レッド
Add Class .is-normal .is-strong
Text Weight 300 700
Add Class .is-weight-100 .is-weight-200 .is-weight-300 .is-weight-400 .is-weight-500 .is-weight-700 .is-weight-900
Text Weight 100 200 300 400 500 700 900
Add Class .is-italic .is-delete .is-capitalize .is-lowercase .is-uppercase
Text Style イタリック 打ち消し capitalize lowercase uppercase
Add Class .is-left .is-center .is-right .is-justify .is-baseline .is-top .is-middle .is-bottom
Text Align left center right justify baseline top middle bottom
Add Class .is-nowrap .is-break
Function 文字が端で折り返さない 文字が端で折り返す
Add Class .is-centering .is-scroll-x .is-ellipsis
Function ブロック要素を中央寄せ 直下のコンテンツを横スクロール 3点リーダーで省略

Display

Displayのプロパティを変更するUtilityを、ほぼすべてのモジュールに対して使えます。
display: none; に関しては、 .is-(xxxx)-none と書き、任意のブレイクポイントを設定してコンテンツを非表示にできます。

Add Class .is-block .is-inline .is-inline-block .is-none
Function display: block; display: inline; display: inline-block; display: none;
Add Class .is-mobile-none .is-fablet-none .is-tablet-none .is-desktop-none .is-wide-none
Function display: none; 576px ~
display: none;
768px ~
display: none;
992px ~
display: none;
1200px ~
display: none;
Add Class .is-mobile-only-none .is-fablet-only-none .is-tablet-only-none .is-desktop-only-none
Function ~ 575px
display: none;
576px ~ 767px
display: none;
768px ~ 991px
display: none;
992px ~ 1199px
display: none;
Add Class .is-mobile-fablet-none .is-mobile-tablet-none .is-mobile-desktop-none
Function ~ 767px
display: none;
~ 991px
display: none;
~ 1199px
display: none;
Add Class .is-landscape-none .is-portrait-none
Function landscape & ~ 991px
display: none;
portrait & ~ 991px
display: none;

Clearfix

After要素にFloatを解除するclearfixを作るUtility。

Add Class .is-clearfix
Function Floatの解除

Libraries

各種ライブラリとの併用が可能です。

Yaku Han JP

Yaku Han JPを読み込むと、メイリオなどの約物(カッコや句読点)の余白を詰めて表示できます(Yaku Han JPsはカッコのみ)。
MUSUBiiではクラス名 .is-yakuhanjp .is-yakuhanjps で、それぞれ適応できます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@2.0.0/dist/css/yakuhanjp.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@2.0.0/dist/css/yakuhanjp_s.min.css">

Font Awesome

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Material Icons

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Google Fonts

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=xxxxxx">

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>