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



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

![スクリーンショット 2018-08-08 17.36.05.png](https://qiita-image-store.s3.amazonaws.com/0/77159/57e6b5c5-7ca6-66cf-4297-907ad2763388.png "スクリーンショット 2018-08-08 17.36.05.png")

[Semantic UI](https://semantic-ui.com/)


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

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

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

<img src="https://qiita-image-store.s3.amazonaws.com/0/77159/a07acb90-c32d-a64a-a731-b18b62821ca0.png" alt="loading-button" width="100" /> 

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


# インストール
[公式](https://semantic-ui.com/introduction/getting-started.html)を参考に。

npm or cdn

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

## jQueryに依存したくない
[Semantic UI React](https://github.com/Semantic-Org/Semantic-UI-React])

[Semantic UI Vue](https://github.com/Semantic-UI-Vue/Semantic-UI-Vue])

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

# 大原則
```html
<div class="ui コンポーネント名">
</div>
```

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

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

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


```html: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>
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/77159/c97e3728-5498-9d5c-1ba8-f322c744431e.png" alt="icon-header" width="330"/>

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

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

# 基本

## ui container

![スクリーンショット 2018-08-08 16.44.35.png](https://qiita-image-store.s3.amazonaws.com/0/77159/0aece661-8625-6d70-eef9-823c980f4324.png "スクリーンショット 2018-08-08 16.44.35.png")


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


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

![スクリーンショット 2018-08-08 16.45.23.png](https://qiita-image-store.s3.amazonaws.com/0/77159/267c5022-b644-6627-42cb-ec8c95268fdb.png "スクリーンショット 2018-08-08 16.45.23.png")

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

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

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

![スクリーンショット 2018-08-08 16.46.37.png](https://qiita-image-store.s3.amazonaws.com/0/77159/a58e88a5-7183-d8f8-768a-f9b8d15eeef1.png "スクリーンショット 2018-08-08 16.46.37.png")


## ui grid

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

### よく使う2つの方法

#### 等幅

```html: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](https://qiita-image-store.s3.amazonaws.com/0/77159/1d53f653-796d-e4ce-ccf5-8488988bd0dd.png "スクリーンショット 2018-08-08 16.53.02.png")

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

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

#### カスタム幅

```html: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](https://qiita-image-store.s3.amazonaws.com/0/77159/dac6eeb2-e7cd-64f4-c75e-65a45d94883d.png "スクリーンショット 2018-08-08 16.54.33.png")

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

### レスポンシブ

<img src="https://qiita-image-store.s3.amazonaws.com/0/77159/6b448bf8-7ae2-2713-e8d4-f2201c9b1b3d.png" alt="three-columns-sp" height="230" />


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

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

<img src="https://qiita-image-store.s3.amazonaws.com/0/77159/0f483706-d38b-0083-30ad-5e09beef75ca.png" alt="stackable" height="230" />


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

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

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

<img src="https://qiita-image-store.s3.amazonaws.com/0/77159/e540bf00-d950-d638-2fe5-799cd301814e.png" alt="stackable" height="230" />



# エレメント

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

## ui segment

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

![スクリーンショット 2018-08-08 17.12.38.png](https://qiita-image-store.s3.amazonaws.com/0/77159/6a985b50-ebc6-9430-150a-3b86a118afbc.png "スクリーンショット 2018-08-08 17.12.38.png")



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

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

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

[デザインも結構あります](https://semantic-ui.com/elements/segment.html) 個人的には便箋っぽい`piled`が好み


## ui message

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

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

![スクリーンショット 2018-08-08 18.16.57.png](https://qiita-image-store.s3.amazonaws.com/0/77159/5e8bf2e6-228f-1421-9550-42aaade773a0.png "スクリーンショット 2018-08-08 18.16.57.png")

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

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

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

![スクリーンショット 2018-08-08 18.22.09.png](https://qiita-image-store.s3.amazonaws.com/0/77159/c528c742-d133-bb62-ce20-586288c29e23.png "スクリーンショット 2018-08-08 18.22.09.png")

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

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


## icon

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

<img src="https://qiita-image-store.s3.amazonaws.com/0/77159/2d918bc0-51e4-c020-69dc-b4066b229622.png" alt="user-icon" height="110" />


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

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

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

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

[こちらのカタログ](https://semantic-ui.com/elements/icon.html)で使えそうなものを覚えておくと捗ります。


### 黒白反転

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

<img src="https://qiita-image-store.s3.amazonaws.com/0/77159/6d7f013b-7a21-396b-4cbf-8b6a6bd68fb6.png" alt="user-icon-outline" height="110" />

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

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

### 回転

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

![スクリーンショット 2018-08-08 17.20.14.png](https://qiita-image-store.s3.amazonaws.com/0/77159/395cc2c2-5755-0585-0d5e-6f181b7276e9.png "スクリーンショット 2018-08-08 17.20.14.png")


`clockwise`or`counterclockwise`(時計回りor反時計回り)で`rotated`


### 合成アイコン

```html
<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>
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/77159/a69f1c98-fcc0-c3f5-8762-6d3cdf23bbb1.png" alt="icons" width="320"/>


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

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

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


## ui divider

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

![スクリーンショット 2018-08-08 17.23.05.png](https://qiita-image-store.s3.amazonaws.com/0/77159/3ddff9d0-62cc-d576-12c9-1b4633c84ff8.png "スクリーンショット 2018-08-08 17.23.05.png")


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

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

ちなみに`vertical`で縦罫線も用意されているのですが、[スタイル崩れるので](https://github.com/Semantic-Org/Semantic-UI/issues/4342)おすすめしません。

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

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

![スクリーンショット 2018-08-08 17.24.33.png](https://qiita-image-store.s3.amazonaws.com/0/77159/3062b1c0-a3a9-9c7c-07d3-803076862046.png "スクリーンショット 2018-08-08 17.24.33.png")


## ui header

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

<img src="https://qiita-image-store.s3.amazonaws.com/0/77159/579cddab-d0d1-3b46-208e-9431686245a1.png" alt="header" width="420" />


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

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

## ui form

```html
<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](https://qiita-image-store.s3.amazonaws.com/0/77159/1d8e90b0-118c-4edc-982b-bdd319f345a7.png "スクリーンショット 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で使うような感じで自己主張が強いです。

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

<img src="https://qiita-image-store.s3.amazonaws.com/0/77159/5fe61377-d856-95ad-c466-b2ceca24b40c.png" alt="icon-header" width="350"/>


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

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

<img src="https://qiita-image-store.s3.amazonaws.com/0/77159/6ef04baf-770d-08c5-c156-f25fbabba0e0.png" alt="inline-header-icon" width="450" />

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

## Card Item

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

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

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

```html
<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>
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/77159/9134c21d-3912-b8fc-f7ab-318b18314765.png" width="450" alt="card" />



# 他のコンポーネント

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

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


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

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

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

## 中央寄せ
`centered`

## 右寄せ
`right floated`

## テキスト縦方向中央寄せ
`middle aligned`

## 色の変更
`red`、`orange`、`yellow`、`olive`、`green`、`teal`、`blue`、`violet`、`purple`、`pink`、`brown`、`grey`、`black`

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

## 全幅
`fluid`でwidth:100%