Text

テキストを装飾するエレメント CSS。

Basic
Dark
Light
Color
Weight
Line Height
Transform
Align
Vertical Align
Word Break
Link
Disabled
Blockquote
Code
Compatible
Variables
Import

Basic

.text がベースとなります
.text 単体に付与されているスタイルはありません

テキスト

<p class="text">テキスト</p>

Dark

.is-dark または .is-dark-{num} で黒文字を表現します
.is-dark は最も濃くなります
{num} は 1 から 9 までで増えるほど薄くなります

ダークダークダークダークダークダークダークダークダークダーク

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

Light

.is-light または .is-light-{num} で白文字を表現します
.is-light は最も濃くなります
{num} は 1 から 9 までで増えるほど薄くなります

ライトライトライトライトライトライトライトライトライトライト

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

Color

.is-{color} でテキストに色を付けます
{color} は primary secondary info success warning danger の 6 種類

重要です重要かも情報あり成功した注意する禁止する

<span class="text is-primary">重要です</span>
<span class="text is-secondary">重要かも</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>

Weight

.is-normal で文字の太さを通常にします
.is-strong で文字を太文字にします
.is-weight-{num} で文字の太さを調整します
{num} は最小 100 からステップ 100 毎に 900 まで

普通太い調整調整調整調整調整調整調整調整調整

<span class="text is-normal">普通</span>
<span class="text is-strong">太い</span>
<span class="text is-weight-100">調整</span>
<span class="text is-weight-200">調整</span>
<span class="text is-weight-300">調整</span>
<span class="text is-weight-400">調整</span>
<span class="text is-weight-500">調整</span>
<span class="text is-weight-600">調整</span>
<span class="text is-weight-700">調整</span>
<span class="text is-weight-800">調整</span>
<span class="text is-weight-900">調整</span>

Line Height

.is-line-height-{size} で行間を変化させられます
{size} は最大 xxl から最小 xxs まで

サイズ	クラス名
2	`.is-line-height-xxl`
1.9	`.is-line-height-xl`
1.75	`.is-line-height-lg`
1.5	`.is-line-height-md`
1.375	`.is-line-height-sm`
1.25	`.is-line-height-xs`
1	`.is-line-height-xxs`

Line Heightの調整

<p class="text is-line-height-xxl">Line Heightの調整</p>
<p class="text is-line-height-xl">Line Heightの調整</p>
<p class="text is-line-height-lg">Line Heightの調整</p>
<p class="text is-line-height-md">Line Heightの調整</p>
<p class="text is-line-height-sm">Line Heightの調整</p>
<p class="text is-line-height-xs">Line Heightの調整</p>
<p class="text is-line-height-xxs">Line Heightの調整</p>

Transform

.is-italic で文字を斜めにします
.is-delete で文字に打ち消し線を引きます
.is-capitalize で文字の先頭を大文字にします
.is-lowercase で文字を小文字にします
.is-uppercase で文字を大文字にします

italic delete capitalize lowercase uppercase

<span class="text is-italic">italic</span>
<span class="text is-delete">delete</span>
<span class="text is-capitalize">capitalize</span>
<span class="text is-lowercase">lowercase</span>
<span class="text is-uppercase">uppercase</span>

Align

.is-{align} でテキストの揃え方を変更します
.is-right でテキストを右揃いにします
.is-center でテキストを左右中央揃いにします
.is-left でテキストを左揃いにします（デフォルトに戻す）
.is-justify でテキストを両端揃いにします
.is-right .is-center .is-left は画面サイズに応じて適応できます

効果	すべて	576px 以上	768px 以上	992px 以上	1200px 以上
右揃い	`.is-right`	`.fablet:is-right`	`.tablet:is-right`	`.desktop:is-right`	`.wide:is-right`
左右中央揃い	`.is-center`	`.fablet:is-center`	`.tablet:is-center`	`.desktop:is-center`	`.wide:is-center`
左揃い	`.is-left`	`.fablet:is-left`	`.tablet:is-left`	`.desktop:is-left`	`.wide:is-left`

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

<p class="text is-right">山路を登りながら...</p>
<p class="text is-center">山路を登りながら...</p>
<p class="text is-left">山路を登りながら...</p>
<p class="text is-justify">山路を登りながら...</p>

Vertical Align

.is-baseline で文字をベースラインに揃えます
.is-top で文字を上部に揃えます
.is-middle で文字を上下中央に揃えます
.is-bottom で文字を下部に揃えます

ベースライントップミドルボトム大きい文字

<span class="text is-baseline">ベースライン</span>
<span class="text is-top">トップ</span>
<span class="text is-middle">ミドル</span>
<span class="text is-bottom">ボトム</span>

Word Break

.is-nowrap で文字の折り返しを防ぎます
.is-break で文字を単語の途中でも折り返させます

nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap

WordBreakWordBreakWordBreakWordBreakWordBreakWordBreakWordBreakWordBreakWordBreak

<p class="text is-nowrap">nowrap...</p>
<p class="text is-break">WordBreak...</p>

Link

.is-link で文字に下線とホバー効果を付与します
.is-link-reverse で文字にホバーで下線を表示させます

リンクリンク

<a href="" class="text is-link">リンク</a>
<a href="" class="text is-link-reverse">リンク</a>

Disabled

[disabled] または [aria-disabled="true"] または .is-disabled で非活性化します
非活性化すると pointer-events: none; が付与されホバー効果などが打ち消されます
非活性化した .text は薄くなります

リンク

<a href="" class="text is-link" aria-disabled="true">リンク</a>

Blockquote

.blockquote で引用の装飾を作れます

引用の「blockquote」を表現

<blockquote class="blockquote">引用の「blockquote」を使う場合</blockquote>

Code

.code でインラインコードの装飾を作れます
.pre と .code でコードブロックの装飾を作れます

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

.my-css { color: red; }

<p class="text">テキストの途中に<code class="code">code</code>を表示させる。</p>
<pre class="pre"><code class="code">.my-css { color: red; }</code></pre>

Compatible

推奨のクラス名と同様の効果を互換のあるクラス名で得ることもできます。

推奨のクラス名	互換のあるクラス名
`.is-right`	`.is-mobile-right`
`.is-center`	`.is-mobile-center`
`.is-left`	`.is-mobile-left`
`.fablet:is-right`	`.is-fablet-right`
`.fablet:is-center`	`.is-fablet-center`
`.fablet:is-left`	`.is-fablet-left`
`.tablet:is-right`	`.is-tablet-right`
`.tablet:is-center`	`.is-tablet-center`
`.tablet:is-left`	`.is-tablet-left`
`.desktop:is-right`	`.is-desktop-right`
`.desktop:is-center`	`.is-desktop-center`
`.desktop:is-left`	`.is-desktop-left`
`.wide:is-right`	`.is-wide-right`
`.wide:is-center`	`.is-wide-center`
`.wide:is-left`	`.is-wide-left`

Variables

上書きできる変数は以下の通りです。

.text {
  --text-dark-color: var(--theme-dark);
  --text-light-color: var(--theme-light);
  --text-primary-color: var(--theme-primary);
  --text-secondary-color: var(--theme-secondary);
  --text-info-color: var(--theme-info);
  --text-success-color: var(--theme-success);
  --text-warning-color: var(--theme-warning);
  --text-danger-color: var(--theme-danger);
  --text-normal-font-weight: 400;
  --text-strong-font-weight: 700;
  --text-disabled-color: var(--theme-dark);
  --text-disabled-color-alpha: 36%;
}
 
.blockquote {
  --blockquote-padding: 1.5em;
  --blockquote-bg: var(--theme-bg-2);
  --blockquote-border-width: 0.5em;
  --blockquote-border-color: var(--theme-bd-1);
  --blockquote-radius: 4px;
}
 
.code {
  --code-padding: 0.2em 0.5em;
  --code-bg: var(--theme-bg-2);
  --code-border-radius: 4px;
  --code-color: var(--theme-code);
  --code-font-size: 87.5%;
  --code-font-family: var(--font-mono);
}
 
.pre {
  --pre-bg: var(--theme-bg-2);
  --pre-border-radius: 4px;
  --pre-code-padding: 1.25em 1.5em;
  --pre-code-color: var(--theme-code);
  --pre-code-font-size: 87.5%;
  --pre-code-font-family: var(--font-mono);
}

Import

PostCSS で読み込む場合の各パスは以下となります。

@import "musubii/src/elements/text/main.css";
@import "musubii/src/elements/text/fablet.css";
@import "musubii/src/elements/text/tablet.css";
@import "musubii/src/elements/text/desktop.css";
@import "musubii/src/elements/text/wide.css";
@import "musubii/src/elements/text/blockquote.css";
@import "musubii/src/elements/text/code.css";

v7 を再現する場合は legacy.css を追加で読み込んでください。

@import "musubii/src/layouts/text/legacy.css";

Main

Guides

Bases

Layouts

Elements

Utilities