- Name
$selector-text
- Default Value
.text
- Compiled Value
.text
- Name
$selector-blockquote
- Default Value
.blockquote
- Compiled Value
.blockquote
- Name
$selector-code
- Default Value
.code
- Compiled Value
.code
- Name
$selector-pre
- Default Value
.pre
- Compiled Value
.pre
- Name
$modifier-text-dark
- Default Value
.is-dark
- Compiled Value
.is-dark
- Name
$modifier-text-dark-1
- Default Value
.is-dark-1
- Compiled Value
.is-dark-1
- Name
$modifier-text-dark-2
- Default Value
.is-dark-2
- Compiled Value
.is-dark-2
- Name
$modifier-text-dark-3
- Default Value
.is-dark-3
- Compiled Value
.is-dark-3
- Name
$modifier-text-dark-4
- Default Value
.is-dark-4
- Compiled Value
.is-dark-4
- Name
$modifier-text-dark-5
- Default Value
.is-dark-5
- Compiled Value
.is-dark-5
- Name
$modifier-text-dark-6
- Default Value
.is-dark-6
- Compiled Value
.is-dark-6
- Name
$modifier-text-dark-7
- Default Value
.is-dark-7
- Compiled Value
.is-dark-7
- Name
$modifier-text-dark-8
- Default Value
.is-dark-8
- Compiled Value
.is-dark-8
- Name
$modifier-text-dark-9
- Default Value
.is-dark-9
- Compiled Value
.is-dark-9
- Name
$modifier-text-light
- Default Value
.is-light
- Compiled Value
.is-light
- Name
$modifier-text-light-1
- Default Value
.is-light-1
- Compiled Value
.is-light-1
- Name
$modifier-text-light-2
- Default Value
.is-light-2
- Compiled Value
.is-light-2
- Name
$modifier-text-light-3
- Default Value
.is-light-3
- Compiled Value
.is-light-3
- Name
$modifier-text-light-4
- Default Value
.is-light-4
- Compiled Value
.is-light-4
- Name
$modifier-text-light-5
- Default Value
.is-light-5
- Compiled Value
.is-light-5
- Name
$modifier-text-light-6
- Default Value
.is-light-6
- Compiled Value
.is-light-6
- Name
$modifier-text-light-7
- Default Value
.is-light-7
- Compiled Value
.is-light-7
- Name
$modifier-text-light-8
- Default Value
.is-light-8
- Compiled Value
.is-light-8
- Name
$modifier-text-light-9
- Default Value
.is-light-9
- Compiled Value
.is-light-9
- Name
$modifier-text-primary
- Default Value
.is-primary
- Compiled Value
.is-primary
- Name
$modifier-text-info
- Default Value
.is-info
- Compiled Value
.is-info
- Name
$modifier-text-success
- Default Value
.is-success
- Compiled Value
.is-success
- Name
$modifier-text-warning
- Default Value
.is-warning
- Compiled Value
.is-warning
- Name
$modifier-text-danger
- Default Value
.is-danger
- Compiled Value
.is-danger
- Name
$modifier-text-weight-normal
- Default Value
.is-normal
- Compiled Value
.is-normal
- Name
$modifier-text-weight-strong
- Default Value
.is-strong
- Compiled Value
.is-strong
- Name
$modifier-text-weight-100
- Default Value
.is-weight-100
- Compiled Value
.is-weight-100
- Name
$modifier-text-weight-200
- Default Value
.is-weight-200
- Compiled Value
.is-weight-200
- Name
$modifier-text-weight-300
- Default Value
.is-weight-300
- Compiled Value
.is-weight-300
- Name
$modifier-text-weight-400
- Default Value
.is-weight-400
- Compiled Value
.is-weight-400
- Name
$modifier-text-weight-500
- Default Value
.is-weight-500
- Compiled Value
.is-weight-500
- Name
$modifier-text-weight-600
- Default Value
.is-weight-600
- Compiled Value
.is-weight-600
- Name
$modifier-text-weight-700
- Default Value
.is-weight-700
- Compiled Value
.is-weight-700
- Name
$modifier-text-weight-800
- Default Value
.is-weight-800
- Compiled Value
.is-weight-800
- Name
$modifier-text-weight-900
- Default Value
.is-weight-900
- Compiled Value
.is-weight-900
- Name
$modifier-text-line-height-xxl
- Default Value
.is-line-height-xxl
- Compiled Value
.is-line-height-xxl
- Name
$modifier-text-line-height-xl
- Default Value
.is-line-height-xl
- Compiled Value
.is-line-height-xl
- Name
$modifier-text-line-height-lg
- Default Value
.is-line-height-lg
- Compiled Value
.is-line-height-lg
- Name
$modifier-text-line-height-md
- Default Value
.is-line-height-md
- Compiled Value
.is-line-height-md
- Name
$modifier-text-line-height-sm
- Default Value
.is-line-height-sm
- Compiled Value
.is-line-height-sm
- Name
$modifier-text-line-height-xs
- Default Value
.is-line-height-xs
- Compiled Value
.is-line-height-xs
- Name
$modifier-text-line-height-xxs
- Default Value
.is-line-height-xxs
- Compiled Value
.is-line-height-xxs
- Name
$modifier-text-italic
- Default Value
.is-italic
- Compiled Value
.is-italic
- Name
$modifier-text-delete
- Default Value
.is-delete
- Compiled Value
.is-delete
- Name
$modifier-text-capitalize
- Default Value
.is-capitalize
- Compiled Value
.is-capitalize
- Name
$modifier-text-lowercase
- Default Value
.is-lowercase
- Compiled Value
.is-lowercase
- Name
$modifier-text-uppercase
- Default Value
.is-uppercase
- Compiled Value
.is-uppercase
- Name
$modifier-text-right
- Default Value
.is-right
- Compiled Value
.is-right
- Name
$modifier-text-center
- Default Value
.is-center
- Compiled Value
.is-center
- Name
$modifier-text-left
- Default Value
.is-left
- Compiled Value
.is-left
- Name
$modifier-text-mobile-right
- Default Value
.is-mobile-right
- Compiled Value
.is-mobile-right
- Name
$modifier-text-mobile-center
- Default Value
.is-mobile-center
- Compiled Value
.is-mobile-center
- Name
$modifier-text-mobile-left
- Default Value
.is-mobile-left
- Compiled Value
.is-mobile-left
- Name
$modifier-text-fablet-right
- Default Value
.is-fablet-right
- Compiled Value
.is-fablet-right
- Name
$modifier-text-fablet-center
- Default Value
.is-fablet-center
- Compiled Value
.is-fablet-center
- Name
$modifier-text-fablet-left
- Default Value
.is-fablet-left
- Compiled Value
.is-fablet-left
- Name
$modifier-text-tablet-right
- Default Value
.is-tablet-right
- Compiled Value
.is-tablet-right
- Name
$modifier-text-tablet-center
- Default Value
.is-tablet-center
- Compiled Value
.is-tablet-center
- Name
$modifier-text-tablet-left
- Default Value
.is-tablet-left
- Compiled Value
.is-tablet-left
- Name
$modifier-text-desktop-right
- Default Value
.is-desktop-right
- Compiled Value
.is-desktop-right
- Name
$modifier-text-desktop-center
- Default Value
.is-desktop-center
- Compiled Value
.is-desktop-center
- Name
$modifier-text-desktop-left
- Default Value
.is-desktop-left
- Compiled Value
.is-desktop-left
- Name
$modifier-text-wide-right
- Default Value
.is-wide-right
- Compiled Value
.is-wide-right
- Name
$modifier-text-wide-center
- Default Value
.is-wide-center
- Compiled Value
.is-wide-center
- Name
$modifier-text-wide-left
- Default Value
.is-wide-left
- Compiled Value
.is-wide-left
- Name
$modifier-text-justify
- Default Value
.is-justify
- Compiled Value
.is-justify
- Name
$modifier-text-baseline
- Default Value
.is-baseline
- Compiled Value
.is-baseline
- Name
$modifier-text-top
- Default Value
.is-top
- Compiled Value
.is-top
- Name
$modifier-text-middle
- Default Value
.is-middle
- Compiled Value
.is-middle
- Name
$modifier-text-bottom
- Default Value
.is-bottom
- Compiled Value
.is-bottom
- Name
$modifier-text-nowrap
- Default Value
.is-nowrap
- Compiled Value
.is-nowrap
- Name
$modifier-text-break
- Default Value
.is-break
- Compiled Value
.is-break
- Name
$modifier-text-link
- Default Value
.is-link
- Compiled Value
.is-link
- Name
$modifier-text-link-reverse
- Default Value
.is-link-reverse
- Compiled Value
.is-link-reverse
- Name
$modifier-text-disabled
- Default Value
.is-disabled
- Compiled Value
.is-disabled
- Name
$text-dark
- Default Value
$convert-dark
- Compiled Value
black
- Name
$text-dark-1
- Default Value
$convert-dark-1
- Compiled Value
rgba(0, 0, 0, 0.87)
- Name
$text-dark-2
- Default Value
$convert-dark-2
- Compiled Value
rgba(0, 0, 0, 0.7)
- Name
$text-dark-3
- Default Value
$convert-dark-3
- Compiled Value
rgba(0, 0, 0, 0.6)
- Name
$text-dark-4
- Default Value
$convert-dark-4
- Compiled Value
rgba(0, 0, 0, 0.5)
- Name
$text-dark-5
- Default Value
$convert-dark-5
- Compiled Value
rgba(0, 0, 0, 0.4)
- Name
$text-dark-6
- Default Value
$convert-dark-6
- Compiled Value
rgba(0, 0, 0, 0.26)
- Name
$text-dark-7
- Default Value
$convert-dark-7
- Compiled Value
rgba(0, 0, 0, 0.15)
- Name
$text-dark-8
- Default Value
$convert-dark-8
- Compiled Value
rgba(0, 0, 0, 0.12)
- Name
$text-dark-9
- Default Value
$convert-dark-9
- Compiled Value
rgba(0, 0, 0, 0.05)
- Name
$text-light
- Default Value
$convert-light
- Compiled Value
white
- Name
$text-light-1
- Default Value
$convert-light-1
- Compiled Value
rgba(255, 255, 255, 0.87)
- Name
$text-light-2
- Default Value
$convert-light-2
- Compiled Value
rgba(255, 255, 255, 0.7)
- Name
$text-light-3
- Default Value
$convert-light-3
- Compiled Value
rgba(255, 255, 255, 0.6)
- Name
$text-light-4
- Default Value
$convert-light-4
- Compiled Value
rgba(255, 255, 255, 0.5)
- Name
$text-light-5
- Default Value
$convert-light-5
- Compiled Value
rgba(255, 255, 255, 0.4)
- Name
$text-light-6
- Default Value
$convert-light-6
- Compiled Value
rgba(255, 255, 255, 0.26)
- Name
$text-light-7
- Default Value
$convert-light-7
- Compiled Value
rgba(255, 255, 255, 0.15)
- Name
$text-light-8
- Default Value
$convert-light-8
- Compiled Value
rgba(255, 255, 255, 0.12)
- Name
$text-light-9
- Default Value
$convert-light-9
- Compiled Value
rgba(255, 255, 255, 0.05)
- Name
$text-primary
- Default Value
$convert-primary-strong
- Compiled Value
#37b0be
- Name
$text-info
- Default Value
$convert-info-strong
- Compiled Value
#4b9bd8
- Name
$text-success
- Default Value
$convert-success-strong
- Compiled Value
#2ca52c
- Name
$text-warning
- Default Value
$convert-warning-strong
- Compiled Value
#ec8313
- Name
$text-danger
- Default Value
$convert-danger-strong
- Compiled Value
#db5757
- Name
$text-weight-normal
- Default Value
$font-weight-normal
- Compiled Value
400
- Name
$text-weight-strong
- Default Value
$font-weight-strong
- Compiled Value
700
- Name
$text-weight-100
- Default Value
$font-weight-100
- Compiled Value
100
- Name
$text-weight-200
- Default Value
$font-weight-200
- Compiled Value
200
- Name
$text-weight-300
- Default Value
$font-weight-300
- Compiled Value
300
- Name
$text-weight-400
- Default Value
$font-weight-400
- Compiled Value
400
- Name
$text-weight-500
- Default Value
$font-weight-500
- Compiled Value
500
- Name
$text-weight-600
- Default Value
$font-weight-600
- Compiled Value
600
- Name
$text-weight-700
- Default Value
$font-weight-700
- Compiled Value
700
- Name
$text-weight-800
- Default Value
$font-weight-800
- Compiled Value
800
- Name
$text-weight-900
- Default Value
$font-weight-900
- Compiled Value
900
- Name
$text-line-height-xxl
- Default Value
$line-height-xxl
- Compiled Value
2
- Name
$text-line-height-xl
- Default Value
$line-height-xl
- Compiled Value
1.9
- Name
$text-line-height-lg
- Default Value
$line-height-lg
- Compiled Value
1.75
- Name
$text-line-height-md
- Default Value
$line-height-md
- Compiled Value
1.5
- Name
$text-line-height-sm
- Default Value
$line-height-sm
- Compiled Value
1.375
- Name
$text-line-height-xs
- Default Value
$line-height-xs
- Compiled Value
1.25
- Name
$text-line-height-xxs
- Default Value
$line-height-xxs
- Compiled Value
1
- Name
$text-link-border-bottom-width
- Default Value
$global-border-width
- Compiled Value
1px
- Name
$text-link-border-bottom-style
- Default Value
solid
- Compiled Value
solid
- Name
$text-disabled-color
- Default Value
$convert-disabled-color
- Compiled Value
rgba(0, 0, 0, 0.26)
- Name
$blockquote-background-color
- Default Value
$convert-background-2
- Compiled Value
whitesmoke
- Name
$blockquote-border-left-width
- Default Value
0.5em
- Compiled Value
0.5em
- Name
$blockquote-border-left-color
- Default Value
$convert-background-alpha
- Compiled Value
rgba(0, 0, 0, 0.05)
- Name
$blockquote-border-radius
- Default Value
$radius-xs
- Compiled Value
2px
- Name
$blockquote-padding
- Default Value
1.5em
- Compiled Value
1.5em
- Name
$code-padding
- Default Value
0.2em 0.5em
- Compiled Value
0.2em 0.5em
- Name
$code-background-color
- Default Value
$convert-background-alpha
- Compiled Value
rgba(0, 0, 0, 0.05)
- Name
$code-border-radius
- Default Value
$radius-xs
- Compiled Value
2px
- Name
$code-color
- Default Value
$convert-code-color
- Compiled Value
#5d69a8
- Name
$code-font-size
- Default Value
$font-size-sm
- Compiled Value
87.5%
- Name
$code-font-family
- Default Value
$font-mono
- Compiled Value
Menlo, Monaco, Consolas, Liberation Mono, Courier New, Meiryo, monospace, serif
- Name
$pre-background-color
- Default Value
$convert-background-2
- Compiled Value
whitesmoke
- Name
$pre-border-radius
- Default Value
$radius-xs
- Compiled Value
2px
- Name
$pre-color
- Default Value
$convert-code-color
- Compiled Value
#5d69a8
- Name
$pre-font-family
- Default Value
$font-mono
- Compiled Value
Menlo, Monaco, Consolas, Liberation Mono, Courier New, Meiryo, monospace, serif
- Name
$pre-white-space
- Default Value
pre
- Compiled Value
pre
- Name
$pre-code-padding
- Default Value
1.25em 1.5em
- Compiled Value
1.25em 1.5em
Text
Table of Contents
- Detail
- Basic
- Dark
- Light
- Role
- Weight
- Line Height
- Transform
- Align
- Vertical Align
- Wrap
- Link
- Blockquote
- Code
- Variables
- Mixins
- Sources
Detail
テキストを装飾するエレメント CSS。
Basic
Selector | Description |
---|---|
.text | テキスト装飾の起点として使うセレクター。 |
Dark
.is-dark-(value)
形式のモディファイアを .text
に付与すると黒文字を表現。(value)
を省略すると最も濃く、1 > 9 の順に薄くなります。
(value)
は Color の値を引き継いでいます。
<span class="text is-dark">ダーク</span>
<span class="text is-dark-1">ダーク</span>
<span class="text is-dark-2">ダーク</span>
<span class="text is-dark-3">ダーク</span>
<span class="text is-dark-4">ダーク</span>
<span class="text is-dark-5">ダーク</span>
<span class="text is-dark-6">ダーク</span>
<span class="text is-dark-7">ダーク</span>
<span class="text is-dark-8">ダーク</span>
<span class="text is-dark-9">ダーク</span>
Darkest | Dark 1 | Dark 2 | Dark 3 | Dark 4 | Dark 5 | Dark 6 | Dark 7 | Dark 8 | Dark 9 |
---|---|---|---|---|---|---|---|---|---|
.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 |
Light
.is-light-(value)
形式のモディファイアを .text
に付与すると白文字を表現。(value)
を省略すると最も濃く、1 > 9 の順に薄くなります。
(value)
は Color の値を引き継いでいます。
<span class="text is-light">ライト</span>
<span class="text is-light-1">ライト</span>
<span class="text is-light-2">ライト</span>
<span class="text is-light-3">ライト</span>
<span class="text is-light-4">ライト</span>
<span class="text is-light-5">ライト</span>
<span class="text is-light-6">ライト</span>
<span class="text is-light-7">ライト</span>
<span class="text is-light-8">ライト</span>
<span class="text is-light-9">ライト</span>
Brightest | Light 1 | Light 2 | Light 3 | Light 4 | Light 5 | Light 6 | Light 7 | Light 8 | Light 9 |
---|---|---|---|---|---|---|---|---|---|
.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 |
Role
.is-(role)
形式のモディファイアを .text
に付与すると、各役割毎のカラーリングに変化します。
<span class="text">基本です</span>
<span class="text is-primary">重要かも</span>
<span class="text is-info">情報あり</span>
<span class="text is-success">成功した</span>
<span class="text is-warning">注意する</span>
<span class="text is-danger">禁止する</span>
Primary | Info | Success | Warning | Danger |
---|---|---|---|---|
.is-primary | .is-info | .is-success | .is-warning | .is-danger |
Weight
.is-weight-(value)
形式のモディファイアを .text
に付与すると文字の太さが変化。
(value)
は Font の値を引き継いでいます。
<span class="text">基本です</span>
<span class="text is-primary">重要かも</span>
<span class="text is-info">情報あり</span>
<span class="text is-success">成功した</span>
<span class="text is-warning">注意する</span>
<span class="text is-danger">禁止する</span>
Normal | Strong | W100 | W200 | W300 | W400 | W500 | W600 | W700 | W800 | W900 |
---|---|---|---|---|---|---|---|---|---|---|
.is-normal | .is-strong | .is-weight-100 | .is-weight-200 | .is-weight-300 | .is-weight-400 | .is-weight-500 | .is-weight-600 | .is-weight-700 | .is-weight-800 | .is-weight-900 |
Line Height
.is-line-height-(value)
形式のモディファイアを .text
に付与すると行間が変化。
(value)
は Font の値を引き継いでいます。
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
<p class="text">山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</p>
XXS | XS | Small | Medium | Large | XL | XXL |
---|---|---|---|---|---|---|
.is-line-height-xxs | .is-line-height-xs | .is-line-height-sm | .is-line-height-md | .is-line-height-lg | .is-line-height-xl | .is-line-height-xxl |
Transform
.text
に付与することで文字の表示方法を変化させるモディファイア。
セマンティックなマークアップを考えた場合、Italic 部分は <em></em>
、Delete 部分は <del></del>
または <s></s>
にマークアップ自体を変更することが望ましいです。
<span class="text">Test text</span>
Italic | Delete | Capitalize | Lowercase | Uppercase |
---|---|---|---|---|
.is-italic | .is-delete | .is-capitalize | .is-lowercase | .is-uppercase |
Align
.text
に付与することで text-align
の調整ができるモディファイア。
right
center
left
のみ Media Query に応じた変更も若干行えます。
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
<p class="text">山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</p>
Right | Center | Left |
---|---|---|
.is-right, .is-mobile-right | .is-center, .is-mobile-center | .is-left, .is-mobile-left |
.is-fablet-right | .is-fablet-center | .is-fablet-left |
.is-tablet-right | .is-tablet-center | .is-tablet-left |
.is-desktop-right | .is-desktop-center | .is-desktop-left |
.is-wide-right | .is-wide-center | .is-wide-left |
Justify
.is-justify
は両端揃えを指示します。効果が大きいテキストは欧文です。
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
While climbing the mountain path, I thought like this. If you work on Ji, the corner will stand. It will be washed away if you let your heart stick. It's cramped if you can do it. Anyway, the world of people is hard to live. If you have difficulty living, you will want to move to a cheap place. When you realize that it is difficult to live wherever you go, poetry is born and you can paint.
<p class="text is-justify is-sm">山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</p>
<p class="text is-justify is-sm">While climbing the mountain path, I thought like this. If you work on Ji, the corner will stand. It will be washed away if you let your heart stick. It's cramped if you can do it. Anyway, the world of people is hard to live. If you have difficulty living, you will want to move to a cheap place. When you realize that it is difficult to live wherever you go, poetry is born and you can paint.</p>
Modifier | Description |
---|---|
.is-justify | 文章が両端揃えになります。 |
Vertical Align
.text
に付与することで vertical-align
の調整ができるモディファイア。
<span class="text">小さいテキスト</span>
<span class="text is-xl">大きいテキスト</span>
Baseline | Top | Middle | Bottom |
---|---|---|---|
.is-baseline | .is-top | .is-middle | .is-bottom |
Wrap
.text
に付与することで文章の折り返し設定ができるモディファイア。
While climbing the mountain path, I thought like this. If you work on Ji, the corner will stand. It will be washed away if you let your heart stick. It's cramped if you can do it. Anyway, the world of people is hard to live. If you have difficulty living, you will want to move to a cheap place. When you realize that it is difficult to live wherever you go, poetry is born and you can paint.
<p class="text is-lg">While climbing the mountain path, I thought like this. If you work on Ji, the corner will stand. It will be washed away if you let your heart stick. It's cramped if you can do it. Anyway, the world of people is hard to live. If you have difficulty living, you will want to move to a cheap place. When you realize that it is difficult to live wherever you go, poetry is born and you can paint.</p>
Modifier | Description |
---|---|
.is-nowrap | 文章が折り返さなくなります。 |
.is-break | 文章が英単語の途中でも折り返します。 |
Link
.text
に付与することで下線リンクの装飾を施すモディファイア。
デフォルトは border-bottom
プロパティが使われていますが、Option の $option-add-style-text-link-border
を false
にすると、下線が text-decoration: underline;
に切り替わります。
<a class="text is-link" href="#">基本です</a>
<a class="text is-primary is-link" href="#">重要かも</a>
<a class="text is-info is-link" href="#">情報あり</a>
<a class="text is-success is-link" href="#">成功した</a>
<a class="text is-warning is-link" href="#">注意する</a>
<a class="text is-danger is-link" href="#">禁止する</a>
Modifier | Description |
---|---|
.is-link | .text に付与すると下線リンク装飾。ホバーで下線は消えます。 |
.is-link-reverse | .text に付与するとホバーで下線が表示されるリンク装飾になります。 |
Blockquote
引用の「blockquote」を使う場合。border-left と background-color を用いた装飾。
<blockquote class="blockquote">引用の「blockquote」を使う場合。border-left と background-color を用いた装飾。</blockquote>
Selector | Description |
---|---|
.blockquote | 引用ブロックに使うセレクター。 |
Code
テキストの途中にcode
を表示させる。
<p class="text">テキストの途中に<code class="code">code</code>を表示させる。</p>
.my-css { color: red; }
<pre class="pre"><code class="code">.my-css { color: red; }</code></pre>
Selector | Description |
---|---|
.code | コード表示に使うセレクター。 |
.pre | .code をラップしてコードブロックを作るセレクター。 |
Variables
Mixins
musubii-style-text-dark()
musubii-style-text-dark-1()
musubii-style-text-dark-2()
musubii-style-text-dark-3()
musubii-style-text-dark-4()
musubii-style-text-dark-5()
musubii-style-text-dark-6()
musubii-style-text-dark-7()
musubii-style-text-dark-8()
musubii-style-text-dark-9()
musubii-style-text-light()
musubii-style-text-light-1()
musubii-style-text-light-2()
musubii-style-text-light-3()
musubii-style-text-light-4()
musubii-style-text-light-5()
musubii-style-text-light-6()
musubii-style-text-light-7()
musubii-style-text-light-8()
musubii-style-text-light-9()
musubii-style-text-primary()
musubii-style-text-info()
musubii-style-text-success()
musubii-style-text-warning()
musubii-style-text-danger()
musubii-style-text-weight-normal()
musubii-style-text-weight-strong()
musubii-style-text-weight-100()
musubii-style-text-weight-200()
musubii-style-text-weight-300()
musubii-style-text-weight-400()
musubii-style-text-weight-500()
musubii-style-text-weight-600()
musubii-style-text-weight-700()
musubii-style-text-weight-800()
musubii-style-text-weight-900()
musubii-style-text-line-height-xxl()
musubii-style-text-line-height-xl()
musubii-style-text-line-height-lg()
musubii-style-text-line-height-md()
musubii-style-text-line-height-sm()
musubii-style-text-line-height-xs()
musubii-style-text-line-height-xxs()
musubii-style-text-italic()
musubii-style-text-delete()
musubii-style-text-capitalize()
musubii-style-text-lowercase()
musubii-style-text-uppercase()
musubii-style-text-right()
musubii-style-text-center()
musubii-style-text-left()
musubii-style-text-justify()
musubii-style-text-baseline()
musubii-style-text-top()
musubii-style-text-middle()
musubii-style-text-bottom()
musubii-style-text-nowrap()
musubii-style-text-break()
musubii-style-text-link()
musubii-style-text-link-reverse()
musubii-style-text-disabled()
musubii-style-text-disabled-color()
musubii-style-text-link-disabled()
musubii-style-text-link-reverse-disabled()
musubii-style-text-blockquote()
musubii-style-text-code()
musubii-style-text-pre()