CSS
JavaScript
js
SemanticUI

Semantic UI入門 よく使うコンポーネント

趣味プロジェクトなど簡単なウェブサイト作る時、デザイナーいないから自前でCSS書くといっても面倒だし、Bootstrapもしょぼいな…と思ったとき、Semantic UIは頼れる味方です。

スクリーンショット 2018-08-08 17.36.05.png

Semantic UI

セマンティックという言葉は、意味論という意味です。おそらく、class名にwordをつなげて意味のあるコンポーネントを作っていくという感じだと思います。

例えば、ロード中のボタンの実装はこんな感じです。

<button class="ui disabled inverted orange loading button">
    Button
</button>

loading-button

class名にいろいろ書いてあります。日本語にすると「無効状態で、オレンジかつ反転色で、ロード中のボタン」という風になり、このボタンの特徴が文章のように実装できます。

インストール

公式を参考に。

npm or cdn

jQueryに依存しているので併せてインストールが必要です。

jQueryに依存したくない

Semantic UI React

Semantic UI Vue

本家Semantic UIとまったく同じ機能をカバーするものではないorコンポーネントが揃っていないことがあるので注意です。

大原則

<div class="ui コンポーネント名">
</div>

classの"ui"はSemantic UIを意味します。

uiとコンポーネント名の間に、コンポーネントがサポートしている形容詞(例: disabled, fluid, centered, red...)を複数組み合わせてカスタマイズします。

button red uiでも動きますが、英語的に気持ち悪いので、ui 形容詞 コンポーネント名で統一することをおすすめします。

icon-headerの例
<h2 class="ui icon header">
  <i class="settings icon"></i>
  <div class="content">
    Account Settings
    <div class="sub header">Manage your account settings and set e-mail preferences.</div>
  </div>
</h2>

icon-header

例のように、class名はケバブケース(hoge-fuga)のようにハイフンで区切らず、スペースで区切ります。

コンポーネントをつなげていくと、いい感じのマージンをやってくれます。便利。

基本

ui container

スクリーンショット 2018-08-08 16.44.35.png

例えば、上のようにbody直下にpタグを置くと左から右へギチギチに詰まって美しく見えません。
まず、ContainerでWrapして左右のマージンをとっていきましょう。これはレスポンシブ対応です。

<div class="ui container">
    <p>Lorem Ipsum(略)</p>
</div>

スクリーンショット 2018-08-08 16.45.23.png

もっとコンテナの幅を狭くしたい

text containerで狭くなります。コンテンツが少ない場合はこいつでサイトを引き締めましょう。

<div class="ui text container">
    <p>Lorem Ipsum(略)</p>
</div>

スクリーンショット 2018-08-08 16.46.37.png

ui grid

グリッドレイアウトです。

よく使う2つの方法

等幅

3カラムの例
<div class="ui three column grid">
    <div class="column"><p>Lorem Ipsum(略)</p></div>
    <div class="column"><p>Lorem Ipsum(略)</p></div>
    <div class="column"><p>Lorem Ipsum(略)</p></div>
</div>

スクリーンショット 2018-08-08 16.53.02.png

three gridで3カラムです。ぐうセマンティック。

13カラムならばthirteen gridです。でもthirteenタイポしそうじゃない?とかで好みが分かれると思います。

カスタム幅

3対1の2カラムの例
<div class="ui grid">
    <div class="twelve wide column"><p>Lorem Ipsum(略)</p></div>
    <div class="four wide column"><p>Lorem Ipsum(略)</p></div>
</div>

スクリーンショット 2018-08-08 16.54.33.png

full widthが16です。カラム幅を全部足して16にしましょう。この場合は12 + 4 = 16です。よって3:1の2カラムができます。一つ変えると他のカラムのwordも変更しないといけないので若干面倒。

レスポンシブ

three-columns-sp

初期のハマりどころですが、地味にこれスマホで見るとギチギチに詰まっています。stackableで1カラム表示にして見やすくしましょう。もちろんPCなどwidthが広いデバイスではstackされません。

<div class="ui stackable grid"></div>

stackable

個人的には、stackableがデフォルトでいい気がします。

また、最近はスマホの画面も大きいので、2カラムもできます。doublingを追加します。

<div class="ui doubling grid"></div>

stackable

エレメント

たくさんあるので、よく使うエレメントを紹介します。

ui segment

<div class="ui segment"></div>

スクリーンショット 2018-08-08 17.12.38.png

とりあえず囲んどけって時に使います。

他のコンポーネントと区分け、formのwrapにもどうぞ。

大きいヘッダを使ってもっと強調したい時、エラーメッセージを出したいときはui messageの方がおすすめ。

デザインも結構あります 個人的には便箋っぽいpiledが好み

ui message

ui segmentと似ていますが、ユーザへのメッセージを出すときはui messageを使います。

<div class="ui message"></div>

スクリーンショット 2018-08-08 18.16.57.png

ui headerなどと組み合わせると更にリッチです。

一番使われるのはerrorを足したui error messageかと思います。

<div class="ui error message"></div>

スクリーンショット 2018-08-08 18.22.09.png

サーバーから返ってきたバリデーションメッセージの表示などおすすめです。

更に、Semantic UIのクライアントサイドバリデーション(Form Validation)を使っている場合、ui form内でのui error messageに自動でエラーメッセージが挿入されます。

icon

<i class="user icon"></i>

user-icon

アイコンを使うとお手軽にページがリッチになります。

積極的に使ってきましょう。ただし、無理に当てはめるとBadUIになるので注意です。

Font Awesomeのスタンダードセットが使えます。
他のエレメントと違うのは、iタグを使い、class名にuiがないこと。

ui headerなど他のコンポーネントと一緒に使う事が多いです。

こちらのカタログで使えそうなものを覚えておくと捗ります。

黒白反転

<i class="user outline icon"></i>

user-icon-outline

一部のアイコンはoutlineを追加することで、黒白反転できます。

背景が黒とかの場合に使う。gridとかのinvertedと親和性がよさげ。

回転

<i class="clockwise rotated user icon"></i>

スクリーンショット 2018-08-08 17.20.14.png

clockwiseorcounterclockwise(時計回りor反時計回り)でrotated

合成アイコン

<i class="huge icons">
  <i class="big red dont icon"></i>
  <i class="black user icon"></i>
</i>

<i class="huge icons">
  <i class="twitter icon"></i>
  <i class="bottom right corner add icon"></i>
</i>

icons

複数のアイコンを組み合わせて、アイコンを作ります。

組み合わせるコツは、 対象物+動作 のアイコンを組み合わせることです。

user + dont -> ユーザの何らかの禁止
twitter + add -> ツイッターに追加

ui divider

<div class="ui divider"></div>

スクリーンショット 2018-08-08 17.23.05.png

とりあえず、線引いとけってときに使います。hrタグよりきれい(なきがする)

使いたくなるときはセクションの句切れとかかので、ui headerと併せて使う機会が多いと思います。

ちなみにverticalで縦罫線も用意されているのですが、スタイル崩れるのでおすすめしません。

horizontal追加で、文字を挟んだりアイコンを挿入するとちょっといい感じになります。

よく使う「”または”ディバイダー」
<div class="ui horizontal divider">
    または
</div>

スクリーンショット 2018-08-08 17.24.33.png

ui header

<h2 class="ui header">
    タイトル
    <div class="sub header">
        ここらへんにサブ情報をつらつらと
    </div>
</h2>

header

よく使います。ui headerだけではなく、Wrapしたsub headerにdetailを記入するとリッチになります。

このコンポーネント単体で使うことはもちろんできますが、他のコンポーネントと併せて使う事が多いです。

ui form

<form class="ui form">
  <div class="field">
    <label>Name</label>
    <div class="two fields">
      <div class="field">
        <input type="text" name="first-name" placeholder="First Name">
      </div>
      <div class="field">
        <input type="text" name="last-name" placeholder="Last Name">
      </div>
    </div>
  </div>
 </form>

スクリーンショット 2018-08-08 17.33.48.png

非常によく使います。ui formで囲み、直下にfield、その直下にlabelタグとinputタグを配置するのが基本です。

また、ui gridのようにtwo fieldsとして、fieldを2つ置けば等幅になります。

formはJSでハンドリングできます(バリデーション・エラーメッセージ・データ管理など)が、今回は省略します。
 

よく使う組み合わせ技

Inline Header

icon headerはLPで使うような感じで自己主張が強いです。

LPっぽいicon-header
    <h2 class="ui icon header">
        <i class="building icon"></i>
        <div class="content">
            会社情報
            <div class="sub header">わたしたちの会社はとてもすばらしい</div>
        </div>
    </h2>

icon-header

header + sub header + icon + dividerを組み合わせて、inlineでのicon-headerをつくります。

<div class="ui header">
    <i class="building icon"></i>
    <div class="content">
        会社情報
        <div class="sub header">
            わたしたちの会社はとてもすばらしい
        </div>
    </div>
</div>
<div class="ui divider"></div>

inline-header-icon

控えめな感じになり、ヘッダーらしさがでました。

Card Item

Semantic UIはカードレイアウトもできます。

CardをClickableにすると、ui buttonとは異なるテイストのitem風ボタンにできます。

上のinline-header-iconをcardでwrapし、aタグにします。

<a class="ui fluid card" href="#">
    <div class="content">
        <h4 class="ui header">
            <i class="inverted red announcement icon"></i>
            <div class="content">
                <div class="header">おしらせ</div>
                <div class="sub header">運営からの重要なおしらせ</div>
            </div>
        </h4>
    </div>
</a>

card

他のコンポーネント

他にもStep, List, Menu, Tableなど基本的なコンポーネントも多くありますのでぜひチェックしてみてください。

Modal、Sidebar、Accordion、ProgressなどのJSで管理するモジュール群も用意されています。

(おまけ)コンポーネント全体でよく使われるクラス

Semantic UIは多くのクラス名を組み合わせてリッチなページにできるのですが、全部覚えられないよー!と嘆くことが多々あります。

そこで、当てずっぽうでクラス名を入れてみると予想道理の挙動になったりします。他のコンポーネントに影響するかもしれないので、厳密にやる場合はしっかり公式を確認してください。

中央寄せ

centered

右寄せ

right floated

テキスト縦方向中央寄せ

middle aligned

色の変更

redorangeyellowolivegreentealbluevioletpurplepinkbrowngreyblack

更にinvertedを追加すると反転後の色になる。

全幅

fluidでwidth:100%