Utility

.u-hidden

横幅に応じて非表示が指定できます。

<div class="u-hidden-pc">PCで非表示</div>
<div class="u-hidden-tab">タブレットで非表示</div>
<div class="u-hidden-sp">スマホで非表示</div>

.u-text

text-alignでテキストの配置を指定できます。

.u-text-left

左揃え。

<p class="u-text-left">吾輩は猫である。名前はまだ無い。</p>

.u-text-center

中央揃え。

<p class="u-text-center">吾輩は猫である。名前はまだ無い。</p>

.u-text-right

右揃え。

<p class="u-text-right">吾輩は猫である。名前はまだ無い。</p>

.u-text-justify

均等割当。

<p class="u-text-justify">吾輩は猫である。名前はまだ無い。</p>

.u-writing

書き方に関する指定ができます。

.u-japanease

縦書き。

<p class="u-japanease">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>

.u-word-break

強制改行。

<p class="u-word-break">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>

.u-white-space

改行禁止。

<p class="u-white-space">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>

.u-hover

マウスホバー時の動きを制御します。

.u-hover-scale

マウスホバー時に拡大します。

<div class="c-btn u-hover-scale">拡大</div>

.u-hover-opacity

マウスホバー時に透過します。

<div class="c-btn u-hover-opacity">透過</div>

.u-hover-up

マウスホバー時に上に移動します。

<div class="c-btn u-hover-up">上に移動</div>

.u-hover-down

マウスホバー時に下に移動します。

<div class="c-btn u-hover-down">下に移動</div>

.u-hover-rotate-x

マウスホバー時にX軸を中心に回転します。

<div class="c-btn u-hover-rotate-x">X軸を中心に回転</div>

.u-rotate-y

マウスホバー時にY軸を中心に回転します。

<div class="c-btn u-hover-rotate-y">Y軸を中心に回転</div>

.u-rotate-z

マウスホバー時にZ軸を中心に回転します。

<div class="c-btn u-hover-rotate-z">Z軸を中心に回転</div>

.u-parallax

画面に登場した時の動きを制御できます。

.u-fadein

フェードインで表示されます。

<div class="c-btn js-anim u-fadein">fadein</div>

.u-fadein-up

上に移動しながらのフェードインで表示されます。

<div class="c-btn js-anim u-fadein-up">fadein-up</div>