MUSUBii

Heading

見出しを作るには、要素の class を .heading にします。Utility によってアレンジが可能です。太字にする場合は is-strong を付与。サイズのデフォルトは .is-md （1em）で、設定してあるメディアクエリごとに指定可能です。

1番目に大きな見出し

2番目に大きな見出し

3番目に大きな見出し

4番目に大きな見出し

5番目に大きな見出し

6番目に大きな見出し

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>

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

Last Updated: 11/6/2018, 1:24:05 AM

← Text →