Simple CSSFramework for JP

MUSUBiiは日本語サイトのインブラウザデザインを想定したシンプルでレスポンシブな薄味のCSSフレームワークです。

v5.3.1 ・RepositoryReleases

MUSUBii

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

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

必要なものを表す画像

必要なものを食べておく

web制作は小技の積み重ねなので、毎回1から作っていたら辛いですよね。MUSUBiiにはリセットCSS・ボタン・グリッドなど利用頻度の高い汎用スタイルが詰まっています。まずはMUSUBiiをほおばってからweb制作を始めてみましょう。

簡単を表す画像

簡単で分かりやすい記述

命名規則は単純で、特定の要素に .is-(xxxx) のクラスを加えていくだけです。Bulmaと似ています。英小文字・数字・ハイフン1つで繋ぐルールなので覚えやすい。インブラウザデザイン中にスピーディな修正・追加を試すことができます。

最適化を表す画像

柔軟なレスポンシブNEW

バージョン5以降のMUSUBiiはレスポンシブwebデザインへの対応がより柔軟なりました。例えばモバイルだけボタンを幅100%にする場合は .is-mobile-only-full を加えるだけ。特定条件下でのサイズ変更や表示非表示を直感的に行えます。

最適化を表す画像

日本語サイト向けに最適化

MUSUBiiは開発者であるデザイナーのクラクが1年で30以上の日本語サイトに組み込み検証を続けた純日本製のフレームワークです。実務に最低限必要なCSSを厳選するとともにブラウザ間のバグフィックスにも努めています。

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@5.3.1/docs/css/musubii.min.css">

Detail

Markup

要素 .(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>

Layers

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

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

Responsive

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

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

Support

Browser

日本で多く使われているブラウザを基準にバグフィックスを行なっています。

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 {
  width: 540px, 720px, 960px, 1140px;
  padding: 0 16px;
}
<div class="section">
  <div class="inner">
    ...
  </div>
</div>

.inner-soft を使うと固定幅が無くなります。

.section
.inner-soft {
  padding: 0 1em;
}
<div class="section">
  <div class="inner-soft">
    ...
  </div>
</div>

.inner-view を使うとFablet以上のサイズで幅が割合算出されます。

.section
.inner-view {
  width: 90vw;
  padding: 0 1em;
}
<div class="section">
  <div class="inner-view">
    ...
  </div>
</div>

Space

.is-space を付与した要素の子要素は自動的に間隔が開きます。

見出し

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

見出し

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

<div class="group is-space">
  <p class="heading">見出し</p>
  <p class="texts">テキストテキストテキストテキストテキストテキスト</p>
  <p class="heading">見出し</p>
  <p class="texts">テキストテキストテキストテキストテキストテキスト</p>
</div>

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
.is-bottom
.is-bottom
.is-center
.is-center
.is-right
.is-right
.is-between
.is-between
.is-around
.is-around
<div class="group">
  <div class="grid is-middle">
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
</div>

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

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

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

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

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

Grid - Responsive

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

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>

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

範囲を12分割して
比率を指定

.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

100%に広がる

.is-mobile-full

.is-fablet-full

.is-tablet-full

.is-desktop-full

.is-wide-full

元のサイズを保持

.is-mobile-auto

.is-fablet-auto

.is-tablet-auto

.is-desktop-auto

.is-wide-auto

Mobile Only
~ 575px

Fablet Only
576px ~ 767px

Tablet Only
768px ~ 991px

Desktop Only
992px ~ 1199px

範囲を12分割して
比率を指定

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

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

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

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

余白を埋め等分

.is-mobile-only-0

.is-fablet-only-0

.is-tablet-only-0

.is-desktop-only-0

100%に広がる

.is-mobile-only-full

.is-fablet-only-full

.is-tablet-only-full

.is-desktop-only-full

元のサイズを保持

.is-mobile-only-auto

.is-fablet-only-auto

.is-tablet-only-auto

.is-desktop-only-auto

Mobile ~ Fablet
~ 767px

Mobile ~ Tablet
~ 991px

Mobile ~ Desktop
~ 1199px

範囲を12分割して
比率を指定

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

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

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

余白を埋め等分

.is-mobile-fablet-0

.is-mobile-tablet-0

.is-mobile-desktop-0

100%に広がる

.is-mobile-fablet-full

.is-mobile-tablet-full

.is-mobile-desktop-full

元のサイズを保持

.is-mobile-fablet-auto

.is-mobile-tablet-auto

.is-mobile-desktop-auto

Landscape
landscape & ~ 991px

Portrait
portrait & ~ 991px

範囲を12分割して
比率を指定

.is-landscape-1
|
.is-landscape-12

.is-portrait-1
|
.is-portrait-12

余白を埋め等分

.is-landscape-0

.is-portrait-0

100%に広がる

.is-landscape-full

.is-portrait-full

元のサイズを保持

.is-landscape-auto

.is-portrait-auto

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 - Reverse

グリッド内のカラムが横並びになったときに通常とは逆に並べたい場合は、 .grid に .is-reverse を付与します。

1st column
2nd column
<div class="group">
  <div class="grid is-reverse">
    <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="fas fa-thumbs-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>
<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)-(yy) 形式のクラスを加えることでレスポンシブにサイズを変化させられます。

<a class="btn is-plain is-(xxxx)-(y)">...</a>

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

範囲を12分割して
比率を指定

.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

100%に広がる

.is-mobile-full

.is-fablet-full

.is-tablet-full

.is-desktop-full

.is-wide-full

元のサイズを保持

.is-mobile-auto

.is-fablet-auto

.is-tablet-auto

.is-desktop-auto

.is-wide-auto

Mobile Only
~ 575px

Fablet Only
576px ~ 767px

Tablet Only
768px ~ 991px

Desktop Only
992px ~ 1199px

範囲を12分割して
比率を指定

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

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

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

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

余白を埋め等分

.is-mobile-only-0

.is-fablet-only-0

.is-tablet-only-0

.is-desktop-only-0

100%に広がる

.is-mobile-only-full

.is-fablet-only-full

.is-tablet-only-full

.is-desktop-only-full

元のサイズを保持

.is-mobile-only-auto

.is-fablet-only-auto

.is-tablet-only-auto

.is-desktop-only-auto

Mobile ~ Fablet
~ 767px

Mobile ~ Tablet
~ 991px

Mobile ~ Desktop
~ 1199px

範囲を12分割して
比率を指定

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

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

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

余白を埋め等分

.is-mobile-fablet-0

.is-mobile-tablet-0

.is-mobile-desktop-0

100%に広がる

.is-mobile-fablet-full

.is-mobile-tablet-full

.is-mobile-desktop-full

元のサイズを保持

.is-mobile-fablet-auto

.is-mobile-tablet-auto

.is-mobile-desktop-auto

Landscape
landscape & ~ 991px

Portrait
portrait & ~ 991px

範囲を12分割して
比率を指定

.is-landscape-1
|
.is-landscape-12

.is-portrait-1
|
.is-portrait-12

余白を埋め等分

.is-landscape-0

.is-portrait-0

100%に広がる

.is-landscape-full

.is-portrait-full

元のサイズを保持

.is-landscape-auto

.is-portrait-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)-(yy) 形式のクラスを加えることでレスポンシブにサイズを変化させられます。

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>

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

範囲を12分割して
比率を指定

.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

100%に広がる

.is-mobile-full

.is-fablet-full

.is-tablet-full

.is-desktop-full

.is-wide-full

元のサイズを保持

.is-mobile-auto

.is-fablet-auto

.is-tablet-auto

.is-desktop-auto

.is-wide-auto

Mobile Only
~ 575px

Fablet Only
576px ~ 767px

Tablet Only
768px ~ 991px

Desktop Only
992px ~ 1199px

範囲を12分割して
比率を指定

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

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

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

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

余白を埋め等分

.is-mobile-only-0

.is-fablet-only-0

.is-tablet-only-0

.is-desktop-only-0

100%に広がる

.is-mobile-only-full

.is-fablet-only-full

.is-tablet-only-full

.is-desktop-only-full

元のサイズを保持

.is-mobile-only-auto

.is-fablet-only-auto

.is-tablet-only-auto

.is-desktop-only-auto

Mobile ~ Fablet
~ 767px

Mobile ~ Tablet
~ 991px

Mobile ~ Desktop
~ 1199px

範囲を12分割して
比率を指定

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

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

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

余白を埋め等分

.is-mobile-fablet-0

.is-mobile-tablet-0

.is-mobile-desktop-0

100%に広がる

.is-mobile-fablet-full

.is-mobile-tablet-full

.is-mobile-desktop-full

元のサイズを保持

.is-mobile-fablet-auto

.is-mobile-tablet-auto

.is-mobile-desktop-auto

Landscape
landscape & ~ 991px

Portrait
portrait & ~ 991px

範囲を12分割して
比率を指定

.is-landscape-1
|
.is-landscape-12

.is-portrait-1
|
.is-portrait-12

余白を埋め等分

.is-landscape-0

.is-portrait-0

100%に広がる

.is-landscape-full

.is-portrait-full

元のサイズを保持

.is-landscape-auto

.is-portrait-auto

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 .fas .far .fal .fab .material-icons .im .icon のうち、いずれも同じように使用できます。
HTMLソース上で各種アイコンと .text が隣り合うと、自動的にmargin-leftが付与され距離が保たれます。

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

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

Icon - Fit

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



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

<p class="texts">
  <i aria-hidden="true" class="fa fa-archive 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="fas fa-thumbs-up is-fit"></i>
  <span class="text">アプリの通知設定へようこそ!</span>
</div>

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

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

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

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

<div class="alert is-danger">
  <i aria-hidden="true" class="fas 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%

Size - Responsive

.is-(xxxx)-(yy) 形式のクラスを加えることでレスポンシブにサイズを変化させられます。

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

62.5%

.is-mobile-xxs

.is-fablet-xxs

.is-tablet-xxs

.is-desktop-xxs

.is-wide-xxs

75%

.is-mobile-xs

.is-fablet-xs

.is-tablet-xs

.is-desktop-xs

.is-wide-xs

87.5%

.is-mobile-sm

.is-fablet-sm

.is-tablet-sm

.is-desktop-sm

.is-wide-sm

100%

.is-mobile-md

.is-fablet-md

.is-tablet-md

.is-desktop-md

.is-wide-md

125%

.is-mobile-lg

.is-fablet-lg

.is-tablet-lg

.is-desktop-lg

.is-wide-lg

150%

.is-mobile-xl

.is-fablet-xl

.is-tablet-xl

.is-desktop-xl

.is-wide-xl

200%

.is-mobile-xxl

.is-fablet-xxl

.is-tablet-xxl

.is-desktop-xxl

.is-wide-xxl

Mobile Only
~ 575px

Fablet Only
576px ~ 767px

Tablet Only
768px ~ 991px

Desktop Only
992px ~ 1199px

62.5%

.is-mobile-only-xxs

.is-fablet-only-xxs

.is-tablet-only-xxs

.is-desktop-only-xxs

75%

.is-mobile-only-xs

.is-fablet-only-xs

.is-tablet-only-xs

.is-desktop-only-xs

87.5%

.is-mobile-only-sm

.is-fablet-only-sm

.is-tablet-only-sm

.is-desktop-only-sm

100%

.is-mobile-only-md

.is-fablet-only-md

.is-tablet-only-md

.is-desktop-only-md

125%

.is-mobile-only-lg

.is-fablet-only-lg

.is-tablet-only-lg

.is-desktop-only-lg

150%

.is-mobile-only-xl

.is-fablet-only-xl

.is-tablet-only-xl

.is-desktop-only-xl

200%

.is-mobile-only-xxl

.is-fablet-only-xxl

.is-tablet-only-xxl

.is-desktop-only-xxl

Mobile ~ Fablet
~ 767px

Mobile ~ Tablet
~ 991px

Mobile ~ Desktop
~ 1199px

62.5%

.is-mobile-fablet-xxs

.is-mobile-tablet-xxs

.is-mobile-desktop-xxs

75%

.is-mobile-fablet-xs

.is-mobile-tablet-xs

.is-mobile-desktop-xs

87.5%

.is-mobile-fablet-sm

.is-mobile-tablet-sm

.is-mobile-desktop-sm

100%

.is-mobile-fablet-md

.is-mobile-tablet-md

.is-mobile-desktop-md

125%

.is-mobile-fablet-lg

.is-mobile-tablet-lg

.is-mobile-desktop-lg

150%

.is-mobile-fablet-xl

.is-mobile-tablet-xl

.is-mobile-desktop-xl

200%

.is-mobile-fablet-xxl

.is-mobile-tablet-xxl

.is-mobile-desktop-xxl

Landscape
landscape & ~ 991px

Portrait
portrait & ~ 991px

62.5%

.is-landscape-xxs

.is-portrait-xxs

75%

.is-landscape-xs

.is-portrait-xs

87.5%

.is-landscape-sm

.is-portrait-sm

100%

.is-landscape-md

.is-portrait-md

125%

.is-landscape-lg

.is-portrait-lg

150%

.is-landscape-xl

.is-portrait-xl

200%

.is-landscape-xxl

.is-portrait-xxl

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点リーダーで省略

Deco - Responsive

.is-(xxxx)-(yy) 形式のクラスを加えることでレスポンシブにプロパティを変化させられます。

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

left

.is-mobile-left

.is-fablet-left

.is-tablet-left

.is-desktop-left

.is-wide-left

center

.is-mobile-center

.is-fablet-center

.is-tablet-center

.is-desktop-center

.is-wide-center

right

.is-mobile-right

.is-fablet-right

.is-tablet-right

.is-desktop-right

.is-wide-right

Mobile Only
~ 575px

Fablet Only
576px ~ 767px

Tablet Only
768px ~ 991px

Desktop Only
992px ~ 1199px

left

.is-mobile-only-left

.is-fablet-only-left

.is-tablet-only-left

.is-desktop-only-left

center

.is-mobile-only-center

.is-fablet-only-center

.is-tablet-only-center

.is-desktop-only-center

right

.is-mobile-only-right

.is-fablet-only-right

.is-tablet-only-right

.is-desktop-only-right

Mobile ~ Fablet
~ 767px

Mobile ~ Tablet
~ 991px

Mobile ~ Desktop
~ 1199px

left

.is-mobile-fablet-left

.is-mobile-tablet-left

.is-mobile-desktop-left

center

.is-mobile-fablet-center

.is-mobile-tablet-center

.is-mobile-desktop-center

right

.is-mobile-fablet-right

.is-mobile-tablet-right

.is-mobile-desktop-right

Landscape
landscape & ~ 991px

Portrait
portrait & ~ 991px

left

.is-landscape-left

.is-portrait-left

center

.is-landscape-center

.is-portrait-center

right

.is-landscape-right

.is-portrait-right

Display

Displayのプロパティを変更するUtilityを、ほぼすべてのモジュールに対して使えます。

Add Class .is-block .is-inline .is-inline-block .is-none
Function display: block; display: inline; display: inline-block; display: none;

Display - Responsive

.is-(xxxx)-(yy) 形式のクラスを加えることでレスポンシブにDisplayプロパティを変化させられます。

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

block

.is-mobile-block

.is-fablet-block

.is-tablet-block

.is-desktop-block

.is-wide-block

inline

.is-mobile-inline

.is-fablet-inline

.is-tablet-inline

.is-desktop-inline

.is-wide-inline

inline-block

.is-mobile-inline-block

.is-fablet-inline-block

.is-tablet-inline-block

.is-desktop-inline-block

.is-wide-inline-block

none

.is-mobile-none

.is-fablet-none

.is-tablet-none

.is-desktop-none

.is-wide-none

Mobile Only
~ 575px

Fablet Only
576px ~ 767px

Tablet Only
768px ~ 991px

Desktop Only
992px ~ 1199px

block

.is-mobile-only-xxs

.is-fablet-only-xxs

.is-tablet-only-xxs

.is-desktop-only-xxs

inline

.is-mobile-only-inline

.is-fablet-only-inline

.is-tablet-only-inline

.is-desktop-only-inline

inline-block

.is-mobile-only-inline-block

.is-fablet-only-inline-block

.is-tablet-only-inline-block

.is-desktop-only-inline-block

none

.is-mobile-only-none

.is-fablet-only-none

.is-tablet-only-none

.is-desktop-only-none

Mobile ~ Fablet
~ 767px

Mobile ~ Tablet
~ 991px

Mobile ~ Desktop
~ 1199px

block

.is-mobile-fablet-xxs

.is-mobile-tablet-xxs

.is-mobile-desktop-xxs

inline

.is-mobile-fablet-inline

.is-mobile-tablet-inline

.is-mobile-desktop-inline

inline-block

.is-mobile-fablet-inline-block

.is-mobile-tablet-inline-block

.is-mobile-desktop-inline-block

none

.is-mobile-fablet-none

.is-mobile-tablet-none

.is-mobile-desktop-none

Landscape
landscape & ~ 991px

Portrait
portrait & ~ 991px

block

.is-landscape-xxs

.is-portrait-xxs

inline

.is-landscape-inline

.is-portrait-inline

inline-block

.is-landscape-inline-block

.is-portrait-inline-block

none

.is-landscape-none

.is-portrait-none

Clearfix

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

Add Class .is-clearfix
Function Floatの解除

Libraries

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

Yaku Han JP

Yaku Han JPを読み込みCSSにfont-familyを追加するとカッコや句読点を詰めて表示できます。カッコのみを詰める少量タイプや明朝体・丸ゴシックも利用可能。

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

Google Fonts

GoogleのCDN経由でWeb Fontが使えます。例えばこのデモサイトに適応されている丸ゴシックを使う場合は以下2種類のフォントを読み込みます。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css">

Font Awesome

CDN経由でSVGもしくはWeb Fontを使ったアイコン表示が可能です。バージョン5からはグリフやclass名が多少変更になっており、JSを使ったインラインSVGアイコン表示にも対応しています。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.1/css/all.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Material Icons

GoogleのCDN経由でMaterial Iconsが使えます。

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

jQuery

各バージョンのjQueryをCDN経由で使えます。本家よりもGoogleサーバーからの配信が比較的安定しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>

Vue.js

データバインディングなどが得意でUI構築に特化したJSフレームワークを使えます。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>