　kit-textやkit-fontから始まるクラスを使用して、簡単にテキストの配置を適用することができます。

class フォント関連

　.kit-font-xxlarge(または、別名.kit-font-xxl)は、40pxフォントを使用します。
　.kit-font-xlarge(または、別名.kit-font-xl)は、特大フォントを使用します。
　.kit-font-large(または、別名.kit-font-l)は、大きなフォントを使用します。
　.kit-font-medium(または、別名.kit-font-m)は、普通サイズのフォントを使用します。
　.kit-font-small(または、別名.kit-font-s)は、小さなフォントを使用します。
　.kit-font-xsmall(または、別名.kit-font-xs)は、極小フォントを使用します。
　.kit-font-0は、フォントサイズを0に指定します。
　.kit-font-boldは、太字フォントを使用します。
　.kit-font-normalは、普通の太さのフォントを使用します。
　.kit-font-thinは、細字フォントを使用します。

プレビュー

XX-Large X-Large Large Medium Small X-Small

Bold Normal Thin

マークアップ

<span class="kit-font-xxlarge m">XX-Large</span>
<span class="kit-font-xlarge m">X-Large</span>
<span class="kit-font-large m">Large</span>
<span class="kit-font-medium m">Medium</span>
<span class="kit-font-small m">Small</span>
<span class="kit-font-xsmall m">X-Small</span>
<hr>
<span class="kit-font-bold m">Bold</span>
<span class="kit-font-normal m">Normal</span>
<span class="kit-font-thin m">Thin</span>

class テキストの位置と整形

　.kit-text-lは、テキストを左寄せにします。
　.kit-text-cは、テキストを中央寄せにします。
　.kit-text-rは、テキストを右寄せにします。
　.kit-text-upperは、テキストを大文字にします。
　.kit-text-lowerは、テキストを小文字にします。
　.kit-text-capitalizeは、テキストを先頭大文字にします。
　.kit-text-zenkakuは、テキストを全角文字にします(環境により反映されない場合があります)。

プレビュー

kit-text-l

kit-text-c

kit-text-r

Hello, world!(Default)

Hello, world!(Upper)

Hello, world!(Lower)

Hello, world!(Capitalize)

Hello, world!(Zenkaku)

マークアップ

<kit-button-alt class="kit-block kit-text-l m">kit-text-l</kit-button-alt>
<kit-button-alt class="kit-block kit-text-c m">kit-text-c</kit-button-alt>
<kit-button-alt class="kit-block kit-text-r m">kit-text-r</kit-button-alt>
<kit-pane>Hello, world!(Default)</kit-pane>
<kit-pane class="kit-text-upper">Hello, world!(Upper)</kit-pane>
<kit-pane class="kit-text-lower">Hello, world!(Lower)</kit-pane>
<kit-pane class="kit-text-capitalize">Hello, world!(Capitalize)</kit-pane>
<kit-pane class="kit-text-zenkaku">Hello, world!(Zenkaku)</kit-pane>

class 装飾

.kit-text-underlineは、テキストに下線を引きます。
.kit-text-overlineは、テキストに上線を引きます。

　次に示すスタイルで、下線または上線のスタイルを変更することができます。

.kit-text-wavyは、テキストに波線を引きます。
.kit-text-doubleは、テキストに二重線を引きます。
.kit-text-nodecorationは、テキストの装飾を解除します。

tag 見出し

　kitstrapは、h1〜h5までの見出しにスタイルを付与します。

プレビュー

This is heading. (h1)

This is heading. (h2)

This is heading. (h3)

This is heading. (h4)

This is heading. (h5)

tag 引用と整形済みテキスト

　kitstrapは、引用(blockquoteタグ)および整形済みテキスト(preタグ)に専用のスタイルを付与します。

プレビュー

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.
—Aldous Huxley, Brave New World

const kitstrap = new Kitstrap();

class 行間

　.kit-line-xlは、行間を倍率2.75にします。
　.kit-line-lは、行間を倍率2にします。
　.kit-line-mは、行間を倍率1.5にします。
　.kit-line-sは、行間を倍率1にします。

プレビュー

行間：XL

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

行間：L

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

行間：M

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

行間：S

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

マークアップ

<kit-badge class="black">行間：XL</kit-badge>
<blockquote class="kit-line-xl">...</blockquote>
<kit-badge class="black">行間：L</kit-badge>
<blockquote class="kit-line-l">...</blockquote>
<kit-badge class="black">行間：M</kit-badge>
<blockquote class="kit-line-m">...</blockquote>
<kit-badge class="black">行間：S</kit-badge>
<blockquote class="kit-line-s">...</blockquote>

class テキストの色

　.kit-clr-接頭辞(または、別名.kit-c-接頭辞)付きのカラークラスを使用すると、テキストの色を簡単に指定することができます。同様の色名で、kit-bgclr-接頭辞を使用することで、背景色を変更することができます。

　利用可能な色の名前とカラーコードについては、Wikiを参照してください。

プレビュー

kit-clr-orange
kit-clr-dodgerblue
kit-clr-deeppink
kit-clr-limegreen
kit-clr-crimson
kit-clr-green
kit-clr-black
kit-clr-white

トップへ戻る