Text

テキストはブロック要素の class を .texts、インライン要素の class を .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>

Dark

.is-dark または .is-dark-(x) を付与し、黒文字の濃度を調整。RGB ではなくアルファ値を用いているので下地の色と馴染みやすいです。デフォルトのテキストは .is-dark-2 と同じ。

ダーク ダーク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>

Light

.is-light または .is-light-(x) を付与し、白文字を指定。RGB ではなくアルファ値を用いているので下地の色と馴染みやすいです。

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

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

Color

テキストの色は役割に応じ class 付与で調整できます。

NormalPrimaryInfoSuccessWarningDanger

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

アンダーバーのリンクスタイルは .is-link、ホバーでアンダーバーを表示させるリンクスタイルは .is-link-reverse で使用できます。色変更のスタイルと組み合わせるのがベター。

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

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

Size

サイズを表す class を付与することでテキストの大きさを変化させられます。デフォルトは .is-md の 1em。サイズは設定してあるメディアクエリごとに指定可能です。

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

<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>
Add Class.is-xxs.is-xs.is-sm.is-md.is-lg.is-xl.is-xxl
Change Size62.5%75%87.5%100%125%150%200%

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

Align

.texts に class .is-left .is-center .is-right を付与することでテキストの寄せる方向を変化させられます。寄せる方向は設定してあるメディアクエリごとに指定可能です。

左寄せのテキスト

中央寄せのテキスト

右寄せのテキスト

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

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

Transform

英語テキストの大文字表示・小文字表示を CSS で指定できます。

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>

Ellipsis

テキストを端で折り返さずに三点リーダーで省略する場合は、ブロック要素に .is-ellipsis を付与します。三点リーダーを出すには親要素の横幅を確定させる必要があるので、可変要素内で利用する場合は flex ではなく calc などで親要素の横幅を明確にします。

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

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

Blockquote

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

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

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">
    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>
Last Updated: 2018-11-6 01:24:05