Job is Tech

エンジニア・デザイナー向けの、お役立ちWEBマガジン

Semantic UI 2.0を使えばエンジニアでもUIを綺麗に製作できる

デザイン情報を募集している運営の未沙貴です。
2015.6.30に2系へとアップデートしたSemanticUIについて紹介します。

目次
SemanticUIの導入
ボタン
ラベル
ステップ
チェックボックス
プログレスバー
チェックボックス

SemanticUIの導入

SemanticのソースコードはGitにて配布されています。
https://github.com/Semantic-Org/Semantic-UI

ダウンロードしたら利用するフォルダにコピーして完了
サイトからダウンロードページへリンクするのが少しわかりにくいかと思います。


<link rel="stylesheet" type="text/css" href="/semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>


ボタンのサンプルコード

アニメーション

Next
Sign-up for a Pro account

<div class="ui animated button" tabindex="0">
  <div class="visible content">Next</div>
  <div class="hidden content">
    <i class="right arrow icon"></i>
  </div>
</div>
<div class="ui vertical animated button" tabindex="0">
  <div class="hidden content">Shop</div>
  <div class="visible content">
    <i class="shop icon"></i>
  </div>
</div>
<div class="ui animated fade button" tabindex="0">
  <div class="visible content">Sign-up for a Pro account</div>
  <div class="hidden content">
    $12.99 a month
  </div>
</div>


ロードボタン

<button class="ui loading button">Loading</button>

ラベル

Please enter a value

Please enter a value

That name is taken!

Your password must be 6 characters or more



<form class="ui fluid form">
  <div class="field">
    <input type="text" placeholder="First name">
    <div class="ui pointing label">
      Please enter a value
    </div>
  </div>
  <div class="ui divider"></div>
  <div class="field" placeholder="Last Name">
    <div class="ui pointing below label">
      Please enter a value
    </div>
    <input type="text">
  </div>
  <div class="ui divider"></div>
  <div class="inline field">
    <input type="text" placeholder="Username">
    <div class="ui pointing left label">
      That name is taken!
    </div>
  </div>
  <div class="ui divider"></div>
  <div class="inline field">
    <div class="ui pointing right label">
      Your password must be 6 characters or more
    </div>
    <input type="password">
  </div>
</form>

ステップ

Shipping
Choose your shipping options

Billing
Enter billing information

Confirm Order
Verify order details


<div class="ui ordered steps">
  <div class="completed step">
    <div class="content">
      <div class="title">Shipping</div>
      <div class="description">Choose your shipping options</div>
    </div>
  </div>
  <div class="completed step">
    <div class="content">
      <div class="title">Billing</div>
      <div class="description">Enter billing information</div>
    </div>
  </div>
  <div class="active step">
    <div class="content">
      <div class="title">Confirm Order</div>
      <div class="description">Verify order details</div>
    </div>
  </div>
</div>

Shipping

Billing



<div class="ui large steps">
  <div class="step">
    <i class="truck icon"></i>
    <div class="content">
      <div class="title">Shipping</div>
    </div>
  </div>
  <div class="active step">
    <i class="payment icon"></i>
    <div class="content">
      <div class="title">Billing</div>
    </div>
  </div>
</div>

チェックボックス







<div class="ui form">
  <div class="grouped fields">
    <label>Outbound Throughput</label>
    <div class="field">
      <div class="ui slider checkbox">
        <input type="radio" name="throughput" checked="checked">
        <label>20 mbps max</label>
      </div>
    </div>
    <div class="field">
      <div class="ui slider checkbox">
        <input type="radio" name="throughput">
        <label>10mbps max</label>
      </div>
    </div>
    <div class="field">
      <div class="ui slider checkbox">
        <input type="radio" name="throughput">
        <label>5mbps max</label>
      </div>
    </div>
    <div class="field">
      <div class="ui slider checkbox checked">
        <input type="radio" name="throughput">
        <label>Unmetered</label>
      </div>
    </div>
  </div>
</div>

プログレスバー

80% Funded
<div class="ui indicating progress active" data-percent="80">
  <div class="bar" style="transition-duration: 300ms; -webkit-transition-duration: 300ms; width: 80%;"></div>
  <div class="label">80% Funded</div>
</div>


テキストボックス


<div class="ui icon input loading">
  <input type="text" placeholder="Search...">
  <i class="search icon"></i>
</div>

などなど他にも多くのUIが用意されていますのでBootstrapから乗り換えを考えている方など一度試してみてはいかがでしょうか。
※このページでのサンプルコードはサイトの更新により崩れる場合があります。