component-body

echo-body

長文を前提とした体裁で表示する。

文字サイズ、行間( 1.75 )以外のスタイルは定義していない。

文字サイズの変化 group: body
(breakpoint)(fontsize)
.echo-***
md以下sm
lg以上md

この表の解説

このサンプルでは、範囲がわかるようインラインスタイルで背景色を付与している。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

この書生というのは時々我々を捕えて煮て食うという話である。 しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。


これは文字サイズを変更した例です。 .echo-text-sm クラスを付与すると、文字サイズが 87.5%(0.875em) となります。
(breakpoint) がmd以下で 12.25px (0.875rem * 0.875) 、lg以上で14px (1rem * 0.875) となります。 .echo-body に直接付与すると文字サイズが固定値になってしまうことと、一般的なブラウザの文字サイズの下限は 10px であることに注意してください。

<div class="echo-body" style="background-color: #fff9dd">
    <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>
    吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
    <p>この書生というのは時々我々を捕えて煮て食うという話である。
    しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
</div><!-- /.echo-body -->

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

<div class="echo-body" style="background-color: #fff9dd">
    <div class="echo-text-sm">
        <p>これは文字サイズを変更した例です。 .echo-text-sm クラスを付与すると、文字サイズが 87.5%(0.875em) となります。<br>
        (breakpoint) がmd以下で 12.25px (0.875rem * 0.875) 、lg以上で14px (1rem * 0.875) となります。 .echo-body に直接付与すると文字サイズが固定値になってしまうことと、一般的なブラウザの文字サイズの下限は 10px であることに注意してください。</p>
    </div>
</div><!-- /.echo-body -->

sub class echo-body-fixed

文字が (breakpoint) に関わらず常に同じサイズとなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。

.echo-body-fixed を付与すると、画面サイズに関わらず、基準となる文字サイズと余白を維持します。1rem = 16pxであれば14pxとなります。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

<div class="echo-body echo-body-fixed" style="background-color: #fff9dd">
    <p>.echo-body-fixed を付与すると、画面サイズに関わらず、基準となる文字サイズと余白を維持します。1rem = 16pxであれば14pxとなります。</p>
    <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>
    吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
</div><!-- /.echo-body -->