kitstrap

# 要素と部品

kitstrapは、様々なHTML要素に使用できる汎用的なパーツのためのスタイルを用意しています。

# kit-button Tag Class

kitstrapでは、class="kit-button"を付与または<kit-button></kit-button>タグを使用することで、簡単にボタン要素を作成できます。

class="kit-button-alt"または<kit-button-alt></kit-button-alt>タグを使用すると、スタイルの異なるボタンを作成できます。

プレビュー

ボタン1 ボタン2 ボタン3 ボタン4 

<a class="kit-button">ボタン1</a>
<kit-button>ボタン2</kit-button>
<a class="kit-button-alt">ボタン3</a>
<kit-button-alt>ボタン4</kit-button-alt>
<button class="kit-button kit-font-m">ボタン5</button>
<input type="button" class="kit-button kit-font-m" value="ボタン6">

TIP

デフォルトのカラーはdodgerblueです

# size子クラス

さらに、kit-buttonの子クラス.-xxlarge、.-xlarge、.-large、.-medium、.-smallと.-xsmallでボタンのサイズを変更することもできます。

プレビュー

-xsmall -small -medium -large -xlarge 
<kit-button class="-xsmall">-xsmall</kit-button>
<kit-button class="-small">-small</kit-button>
<kit-button class="-medium">-medium</kit-button>
<kit-button class="-large">-large</kit-button>
<kit-button class="-xlarge">-xlarge</kit-button>

プレビュー(kit-button-alt)

-xsmall -small -medium -large -xlarge 
<kit-button-alt class="-xsmall">-xsmall</kit-button-alt>
<kit-button-alt class="-small">-small</kit-button-alt>
<kit-button-alt class="-medium">-medium</kit-button-alt>
<kit-button-alt class="-large">-large</kit-button-alt>
<kit-button-alt class="-xlarge">-xlarge</kit-button-alt>

# flat子クラス

また、.-flatクラスを付与することで、それぞれシンプルなデザインのボタンに変更することもできます。

.-flatクラスを付与

-flat -green -flat -deeppink -flat 
<kit-button class="-flat">-flat</kit-button>
<kit-button class="-green -flat">-green -flat</kit-button>
<kit-button class="-deeppink -flat">-deeppink -flat</kit-button>

.-flatクラスを付与(-alt)

-flat -orange -flat -black -flat 
<kit-button-alt class="-flat">-flat</kit-button-alt>
<kit-button-alt class="-orange -flat">-orange -flat</kit-button-alt>
<kit-button-alt class="-black -flat">-black -flat</kit-button-alt>

# rounded子クラス

.-roundedクラスを用いると、ボタンは丸みを帯びたデザインに変更されます。

.-roundedクラスを付与

-crimson -large -rounded -limegreen -rounded 
<kit-button class="-crimson -large -rounded">-crimson -large -rounded</kit-button>
<kit-button-alt class="-limegreen -rounded">-limegreen -rounded</kit-button-alt>

.-roundedクラスを付与(-alt)

-flat -large -rounded -black -flat -rounded 
<kit-button class="-flat -large -rounded">-flat -large -rounded</kit-button>
<kit-button-alt class="-black -flat -rounded">-black -flat -rounded</kit-button-alt>

# disabled子クラス

.-disabledで、無効化されたボタンのスタイルを設定することができます。

無効なボタンのプレビュー

無効

無効 

<kit-button class="-disabled">無効</kit-button>
<button class="kit-button -crimson kit-font-m -disabled">無効</button>
<kit-button class="-large -disabled">無効</kit-button>
<button class="kit-button -large -orange kit-font-m -disabled">無効</button>
<button class="kit-button -large -rounded -disabled">無効</button>

# 色のための子クラス

kit-buttonとkit-button-altの子クラスとして、class="kit-button -deeppink"のように色を選択するクラスが用意されています。

プレビュー

ボタン ボタン .-orange

ボタン ボタン .-dodgerblue

ボタン ボタン .-deeppink

ボタン ボタン .-limegreen

ボタン ボタン .-crimson

ボタン ボタン .-green

ボタン ボタン .-silver

ボタン ボタン .-black

<a>要素やその他の要素に対して.kit-hyperlinkクラス(あるいは、エイリアス.kit-hl)を付与、または<kit-hl></kit-hl>タグを使用することで、ハイパーリンクのスタイルを設定できます。.kit-hl-altクラスまたは<kit-hl-alt></kit-hl-alt>は、親要素の前景色を継承するスタイルを持ちます。

プレビュー

リンクはこちらをクリック！

・シンプルなkit-hl-alt使用したリンク

リンクは<a href="#" class="kit-hyperlink">こちら</a>をクリック！<br>
・<kit-hl-alt>シンプルなkit-hl-alt使用したリンク</kit-hl-alt>

TIP

ポインターのカーソルになります。

# kit-badge Tag Class

要素に.kit-badgeクラスを付与または<kit-badge></kit-badge>タグを使用することで、バッジ要素を生成することができます。

プレビュー

NEW!kitstrapへようこそ

<span class="kit-badge">NEW!</span>kitstrapへようこそ

TIP

デフォルトのカラーは.-orangeです。

# 色のための子クラス

kit-badgeにも子クラスとして、class="kit-badge -limegreen"のように色を選択するクラスが用意されています。

プレビュー

-orange -dodgerblue -deeppink -limegreen -crimson -green -silver -black

<span class="kit-badge -orange">-orange</span>
<span class="kit-badge -dodgerblue">-dodgerblue</span>
<span class="kit-badge -deeppink">-deeppink</span>
<span class="kit-badge -limegreen">-limegreen</span>
<span class="kit-badge -crimson">-crimson</span>
<span class="kit-badge -green">-green</span>
<span class="kit-badge -silver">-silver</span>
<span class="kit-badge -black">-black</span>

# kit-notice Tag Class

要素に.kit-noticeクラスを付与または<kit-notice></kit-notice>タグを使用することで、ユーザーへの通知を送るペインを生成できます。

また、子クラスの.-green、.-yellow、.-red、.-blackで、色を変更することができます。

プレビュー

これは通知です。
これはメッセージです。(-green)
これは注意メッセージです。(-yellow)
これはエラーメッセージです。(-red)
これは黒色の通知です。(-black)
<div class="kit-notice">これは通知です。</div>
<div class="kit-notice -green">これはメッセージです。(-green)</div>
<div class="kit-notice -yellow">これは注意メッセージです。(-yellow)</div>
<div class="kit-notice -red">これはエラーメッセージです。(-red)</div>
<div class="kit-notice -black">これは黒色の通知です。(-black)</div>

# kit-table Class

<table>要素に対して.kit-tableクラスおよびその子クラスを付与することで、テーブルに様々なスタイルを付与することができます。

.kit-text-接頭辞を持つ「テキストの位置」クラスを任意のテーブル内の要素に付与して、テキスト位置を明示的に指定することもできます。

標準的なテーブル

名前URL操作
kit https://kit.osdn.jp/ 操作
kitstrap https://kitstrap.netlify.app/ 操作
kafjs https://kafjs.netlify.app/ 操作
kpt https://kpkg.herokuapp.com/ 操作
kish https://mtsgi.github.io/kish/ 操作
<table class="kit-table">
    <thead>
      <tr>
        <th>名前</th><th>URL</th><th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>kit</th> <td>https://kit.osdn.jp/</td> <td><a class="kit-hl">操作</a></td>
      </tr>
      <tr>
        <th>kitstrap</th> <td>https://kitstrap.netlify.app/</td> <td><a class="kit-hl">操作</a></td>
      </tr>
      <tr>
        <th>kafjs</th> <td>https://kafjs.netlify.app/</td> <td><a class="kit-hl">操作</a></td>
      </tr>
      <tr>
        <th>kpt</th> <td>https://kpkg.herokuapp.com/</td> <td><a class="kit-hl">操作</a></td>
      </tr>
      <tr>
        <th>kish</th> <td>https://mtsgi.github.io/kish/</td> <td><a class="kit-hl">操作</a></td>
      </tr>
    </tbody>
</table>

# kit-navbar Tag Class

.kit-navbarクラスまたは<kit-navbar></kit-navbar>の中に、.kit-navitemクラスまたは<kit-navitem></kit-navitem>を並べることで、ナビゲーションバーとその項目を設置することができます。

kit-navbar

項目1 項目2 項目3 項目4 
<kit-navbar>
  <kit-navitem>項目1</kit-navitem>
  <kit-navitem>項目2</kit-navitem>
  <kit-navitem>項目3</kit-navitem>
  <kit-navitem>項目4</kit-navitem>
</kit-navbar>

.kit-navbar-altクラスまたは<kit-navbar-alt></kit-navbar-alt>で項目を囲うことで、異なるスタイルが適用されます。

kit-navbar-alt

項目1 項目2 項目3 項目4 
<kit-navbar-alt>
  <a class="kit-navitem">項目1</a>
  <a class="kit-navitem">項目2</a>
  <a class="kit-navitem">項目3</a>
  <a class="kit-navitem">項目4</a>
</kit-navbar-alt>

# kit-pane Tag Class

.kit-paneクラスを付与または、<kit-pane></kit-pane>タグを使用して、操作や表示のための領域を作成します。子クラスの.darkを使用して、暗いテーマを使用可能です。子クラス.hoverで、ホバー時の効果を付与できます。

プレビュー

kit-pane kit-pane.dark kit-pane.hover kit-pane.dark.hover 
<kit-pane>kit-pane</kit-pane>
<kit-pane class="dark">kit-pane.dark</kit-pane>
<kit-pane class="hover">kit-pane.hover</kit-pane>
<kit-pane class="dark hover">kit-pane.dark.hover</kit-pane>

# ツールチップ Tag Class

.kit-tippedクラスを持つ要素または<kit-tipped></kit-tipped>要素の中に、.kit-tipまたは<kit-tip></kit-tip>要素を内包することで、親要素のツールチップを表示させることができます。この時、親要素(.kit-tipped)にはposition: relativeが指定され、インラインブロック要素として振る舞います。

ツールチップのサンプル

バナー画像 バナー画像

↑ホバーしてください

<kit-tipped class="kit-width-50 kit-line-0">
  <img src="./banner.png" class="kit-fit">
  <kit-tip>バナー画像</kit-tip>
</kit-tipped>
<kit-tipped class="kit-width-25 kit-line-0">
  <img src="./banner.png" class="kit-fit">
  <kit-tip class="-bottom">バナー画像</kit-tip>
</kit-tipped>

ツールチップは、デフォルトではホバー時に要素の上側に表示されます。子要素(.kit-tip)に子クラス「.-bottom」を付与することで、下側に表示することもできます。また、子クラス「.-disabled」を付与すると、ツールチップの表示を無効化することもできます。

ツールチップのサンプル 2

メールアドレスを入力してください 送信する 無効です 
<kit-tipped class="kit-fit">
  <input type="text" class="kit-textbox kit-fit" placeholder="example@example.com">
  <kit-tip>メールアドレスを入力してください</kit-tip>
</kit-tipped>
<kit-tipped>
  <kit-button class="-disabled">送信する</kit-button>
  <kit-tip class="-disabled">無効です</kit-tip>
</kit-tipped>

# パンくずリスト Class

.kit-breadcrumbクラスを付与した<li></li>要素を用いて、簡単にパンくずリストを作成することができます。

パンくずのリンクとなるアイテムをアンカーとして.kit-breadcrumbのリストアイテムにを内包します。リンクでないアイテムは、単にテキストとして内包します。

プレビュー

<ul class="kit-breadcrumb">
  <li><a href="#">トップページ</a></li>
  <li><a href="#">要素と部品</a></li>
  <li>パンくずリスト</li>
</ul>

← フォーム部品 →