utility-text

echo-text-(color)

文字色を変更する。
オブジェクト・コンポーネントを可能な限り上書きするが、 :hover, :focus 等のステートがあるオブジェクトには対応していない。
(color)は標準のカラーテーブルを参照。

echo-text-default:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-info:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-important:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-inverse:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

<p class="echo-text-default">echo-text-default:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
<p class="echo-text-info">echo-text-info:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
<p class="echo-text-important">echo-text-important:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
<p class="echo-bg-default echo-padding-sm"><span class="echo-text-inverse">echo-text-inverse:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</span></p>

echo-text-(direction)(-(breakpont)-(up or down))

ブロック要素内の文章を指定した方向へ寄せる。
(breakpoint)の指定がない場合は、常にその方向となる。
(breakpoint)の指定がある場合は、(breakpoint)以上、もしくは以下のときに、指定した方向へ寄せる。

echo-text-center:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

echo-text-right:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

echo-text-center:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-left:何でも薄暗いじめじめした所で

ニャーニャー泣いていた事だけは記憶している。

echo-text-center-lg-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

echo-text-right-sm-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

echo-text-center-lg-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-left-sm-down:何でも薄暗いじめじめした所で

ニャーニャー泣いていた事だけは記憶している。

echo-text-right:echo-text-center-lg-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。

<p class="echo-text-center">echo-text-center:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>何でも薄暗いじめじめした所で<br>ニャーニャー泣いていた事だけは記憶している。</p>
<p class="echo-text-right">echo-text-right:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>何でも薄暗いじめじめした所で<br>ニャーニャー泣いていた事だけは記憶している。</p>

<div class="echo-text-center" style="background-color: #dee;">
    <p>echo-text-center:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
    <p class="echo-text-left">echo-text-left:何でも薄暗いじめじめした所で</p>
    <p>ニャーニャー泣いていた事だけは記憶している。</p>
</div>

<p class="echo-text-center-lg-up">echo-text-center-lg-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>何でも薄暗いじめじめした所で<br>ニャーニャー泣いていた事だけは記憶している。</p>
<p class="echo-text-right-sm-up">echo-text-right-sm-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>何でも薄暗いじめじめした所で<br>ニャーニャー泣いていた事だけは記憶している。</p>

<div class="echo-text-center-lg-up" style="background-color: #dee;">
    <p>echo-text-center-lg-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
    <p class="echo-text-left-sm-down">echo-text-left-sm-down:何でも薄暗いじめじめした所で</p>
    <p>ニャーニャー泣いていた事だけは記憶している。</p>
</div>

<p class="echo-text-right echo-text-center-lg-up">echo-text-right:echo-text-center-lg-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。<br>何でも薄暗いじめじめした所で<br>ニャーニャー泣いていた事だけは記憶している。</p>

echo-text-(fontsize)(-(breakpont)-(up or down))

文字サイズが特に定義されていない( 1rem )場合に、 (fontsize) に変化すべき倍率に変更する。

現在の要素に継承されている文字サイズからの相対em )で変化する。このため、xs = 0.75rem に対して echo-text-lg を使用すると、18pxではなく13.5pxとなる。

(breakpoint)の指定がない場合は、常にそのサイズとなる。
(breakpoint)の指定がある場合は、(breakpoint)以上、もしくは以下のときに、指定したサイズとなる。

.echo-text-md1em となるため、大半は何も起きない。既存のフォントサイズを打ち消す場合に使用する。

echo-text-xxs:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-xs:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-sm:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-lg:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-xl:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-xxl:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

0.75rem:吾輩は猫である。名前はまだ無い。echo-text-xxl:どこで生れたかとんと見当がつかぬ。

2rem:吾輩は猫である。名前はまだ無い。echo-text-xxs:どこで生れたかとんと見当がつかぬ。

.echo-label の文字サイズは 0.7em です。しかし .echo-text-mdで本来の文字サイズを打ち消しました


echo-text-xxs-sm-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-xs-md-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-sm-lg-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-lg-sm-down:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-xl-md-down:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-xxl-lg-down:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

echo-text-sm-xs-down echo-text-lg-xl-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

.echo-label の文字サイズは 0.7em です。しかし .echo-text-md-xl-upで本来の文字サイズを打ち消しました

<p class="echo-text-xxs">echo-text-xxs:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
<p class="echo-text-xs">echo-text-xs:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
<p class="echo-text-sm">echo-text-sm:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>

<p class="echo-text-lg">echo-text-lg:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
<p class="echo-text-xl">echo-text-xl:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
<p class="echo-text-xxl">echo-text-xxl:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>

<p style="font-size: 0.75rem;">0.75rem:吾輩は猫である。<span class="echo-text-xxl">名前はまだ無い。echo-text-xxl:どこで生れたか</span>とんと見当がつかぬ。</p>
<p style="font-size: 2rem;">2rem:吾輩は猫である。<span class="echo-text-xxs">名前はまだ無い。echo-text-xxs:どこで生れたか</span>とんと見当がつかぬ。</p>

<p>.echo-label の文字サイズは 0.7em です。<span class="echo-label echo-text-md">しかし .echo-text-mdで本来の文字サイズを打ち消しました</span></p>

<hr class="echo-margin-y-lg">

<p class="echo-text-xxs-sm-up">echo-text-xxs-sm-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
<p class="echo-text-xs-md-up">echo-text-xs-md-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
<p class="echo-text-sm-lg-up">echo-text-sm-lg-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>

<p class="echo-text-lg-sm-down">echo-text-lg-sm-down:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
<p class="echo-text-xl-md-down">echo-text-xl-md-down:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
<p class="echo-text-xxl-lg-down">echo-text-xxl-lg-down:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>

<p class="echo-text-sm-xs-down echo-text-lg-xl-up">echo-text-sm-xs-down echo-text-lg-xl-up:吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>

<p>.echo-label の文字サイズは 0.7em です。<span class="echo-label echo-text-md-xl-up">しかし .echo-text-md-xl-upで本来の文字サイズを打ち消しました</span></p>

echo-text-(fontsize1)to(fontsize2)

文字サイズを厳密に変更する。
具体的な使用例は .echo-hero 、および .echo-flip のサンプルを参照。

変化率は、文字サイズが (fontsize1) の場合に、(fontsize) が (fontsize2) に変化すべき倍率となる。

現在の要素に継承されている文字サイズからの相対em )で変化する。このため、xs = 0.75rem に対して echo-text-smtolg を使用すると、18pxではなく15.428571429pxとなる。

.echo-text-mdto*** は、 .echo-text-(fontsize)と同じであるため、定義されていない。

吾輩は猫である。名前はまだ無い。echo-text-xxstoxs:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xxstosm:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xxstomd:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xxstolg:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xxstoxl:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xxstoxxl:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xstoxxs:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xstosm:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xstomd:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xstolg:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xstoxl:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xstoxxl:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-smtoxxs:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-smtoxs:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-smtomd:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-smtolg:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-smtoxl:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-smtoxxl:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-lgtoxxs:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-lgtoxs:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-lgtosm:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-lgtomd:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-lgtoxl:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-lgtoxxl:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xltoxxs:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xltoxs:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xltosm:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xltomd:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xltolg:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xltoxxl:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xxltoxxs:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xxltoxs:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xxltosm:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xxltomd:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xxltolg:どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。echo-text-xxltoxl:どこで生れたかとんと見当がつかぬ。

<p class="echo-text-xxs">吾輩は猫である。名前はまだ無い。<span class="echo-text-xxstoxs">echo-text-xxstoxs:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xxs">吾輩は猫である。名前はまだ無い。<span class="echo-text-xxstosm">echo-text-xxstosm:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xxs">吾輩は猫である。名前はまだ無い。<span class="echo-text-xxstomd">echo-text-xxstomd:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xxs">吾輩は猫である。名前はまだ無い。<span class="echo-text-xxstolg">echo-text-xxstolg:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xxs">吾輩は猫である。名前はまだ無い。<span class="echo-text-xxstoxl">echo-text-xxstoxl:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xxs">吾輩は猫である。名前はまだ無い。<span class="echo-text-xxstoxxl">echo-text-xxstoxxl:どこで生れたかとんと</span>見当がつかぬ。</p>

<p class="echo-text-xs">吾輩は猫である。名前はまだ無い。<span class="echo-text-xstoxxs">echo-text-xstoxxs:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xs">吾輩は猫である。名前はまだ無い。<span class="echo-text-xstosm">echo-text-xstosm:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xs">吾輩は猫である。名前はまだ無い。<span class="echo-text-xstomd">echo-text-xstomd:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xs">吾輩は猫である。名前はまだ無い。<span class="echo-text-xstolg">echo-text-xstolg:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xs">吾輩は猫である。名前はまだ無い。<span class="echo-text-xstoxl">echo-text-xstoxl:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xs">吾輩は猫である。名前はまだ無い。<span class="echo-text-xstoxxl">echo-text-xstoxxl:どこで生れたかとんと</span>見当がつかぬ。</p>

<p class="echo-text-sm">吾輩は猫である。名前はまだ無い。<span class="echo-text-smtoxxs">echo-text-smtoxxs:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-sm">吾輩は猫である。名前はまだ無い。<span class="echo-text-smtoxs">echo-text-smtoxs:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-sm">吾輩は猫である。名前はまだ無い。<span class="echo-text-smtomd">echo-text-smtomd:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-sm">吾輩は猫である。名前はまだ無い。<span class="echo-text-smtolg">echo-text-smtolg:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-sm">吾輩は猫である。名前はまだ無い。<span class="echo-text-smtoxl">echo-text-smtoxl:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-sm">吾輩は猫である。名前はまだ無い。<span class="echo-text-smtoxxl">echo-text-smtoxxl:どこで生れたかとんと</span>見当がつかぬ。</p>

<p class="echo-text-lg">吾輩は猫である。名前はまだ無い。<span class="echo-text-lgtoxxs">echo-text-lgtoxxs:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-lg">吾輩は猫である。名前はまだ無い。<span class="echo-text-lgtoxs">echo-text-lgtoxs:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-lg">吾輩は猫である。名前はまだ無い。<span class="echo-text-lgtosm">echo-text-lgtosm:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-lg">吾輩は猫である。名前はまだ無い。<span class="echo-text-lgtomd">echo-text-lgtomd:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-lg">吾輩は猫である。名前はまだ無い。<span class="echo-text-lgtoxl">echo-text-lgtoxl:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-lg">吾輩は猫である。名前はまだ無い。<span class="echo-text-lgtoxxl">echo-text-lgtoxxl:どこで生れたかとんと</span>見当がつかぬ。</p>

<p class="echo-text-xl">吾輩は猫である。名前はまだ無い。<span class="echo-text-xltoxxs">echo-text-xltoxxs:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xl">吾輩は猫である。名前はまだ無い。<span class="echo-text-xltoxs">echo-text-xltoxs:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xl">吾輩は猫である。名前はまだ無い。<span class="echo-text-xltosm">echo-text-xltosm:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xl">吾輩は猫である。名前はまだ無い。<span class="echo-text-xltomd">echo-text-xltomd:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xl">吾輩は猫である。名前はまだ無い。<span class="echo-text-xltolg">echo-text-xltolg:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xl">吾輩は猫である。名前はまだ無い。<span class="echo-text-xltoxxl">echo-text-xltoxxl:どこで生れたかとんと</span>見当がつかぬ。</p>

<p class="echo-text-xxl">吾輩は猫である。名前はまだ無い。<span class="echo-text-xxltoxxs">echo-text-xxltoxxs:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xxl">吾輩は猫である。名前はまだ無い。<span class="echo-text-xxltoxs">echo-text-xxltoxs:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xxl">吾輩は猫である。名前はまだ無い。<span class="echo-text-xxltosm">echo-text-xxltosm:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xxl">吾輩は猫である。名前はまだ無い。<span class="echo-text-xxltomd">echo-text-xxltomd:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xxl">吾輩は猫である。名前はまだ無い。<span class="echo-text-xxltolg">echo-text-xxltolg:どこで生れたかとんと</span>見当がつかぬ。</p>
<p class="echo-text-xxl">吾輩は猫である。名前はまだ無い。<span class="echo-text-xxltoxl">echo-text-xxltoxl:どこで生れたかとんと</span>見当がつかぬ。</p>

echo-text-1rem

文字サイズを強制的に 1rem に変更する。

echo-text-xxs:吾輩は猫である。名前はまだ無い。echo-text-1rem:どこで生れたかecho-text-xxl:とんと見当がつかぬ。

<p class="echo-text-xxs">echo-text-xxs:吾輩は猫である。名前はまだ無い。<span class="echo-text-1rem">echo-text-1rem:どこで生れたか<span class="echo-text-xxl">echo-text-xxl:とんと</span></span>見当がつかぬ。</p>