SE学院

/

CSS

/

Semantic UI

Semantic UI CSSフレームワークの使い方をご紹介します。このページ自体もSemantic UIを使っているため、そのままサンプルとなっています。

概要

Semantic UI
公式サイト	https://semantic-ui.com/
ライセンス	MIT
グリッド	16列
GitHub stars	49k
Twitter	@semanticui

Semantic UI v2.4.2
モジュール	サイズ
semantic.min.css	613KB
semantic.min.js	269KB

jQuery v3.5.1
モジュール	サイズ
jquery-3.5.1.min.css	87.3KB

使い方

テンプレート

Semantic UI のライブラリをインポートする HTML の基本テンプレートを次に示す。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/css/semantic.min.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
    </script>
    <script src="/js/semantic.min.js">
    </script>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

Semantic UI は jQuery を利用するので、jQuery ライブラリもインポートする。

CDN

CDN (Contents Delivery Network) を通じて Semantic UI のライブラリをインポートする HTML の基本テンプレートを次に示す。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

Semantic UI の breadcrumb クラスを使って、パンくずリストを作成できる。パンくずリストとは、現在のページ位置を階層構造で表したものである。

<div class="ui breadcrumb">
  <a class="section" href="/">SE学院</a>
  <div class="divider"> / </div>
  <a class="section" href="/css/">CSS</a>
  <div class="divider"> / </div>
  <div class="active section">Semantic UI</a>
</div>

.button

Semantic UI の button クラスを使って、ボタンを装飾できる。

<button class="ui button">
  Button
</button>

.basic

<button class="ui basic button">
  Button
</button>

.primary

<button class="ui primary button">
  Button
</button>
<button class="ui primary basic button">
  Basic
</button>

.secondary

<button class="ui secondary button">
  Button
</button>
<button class="ui secondary basic button">
  Basic
</button>

.positive

<button class="ui positive button">
  Button
</button>
<button class="ui positive basic button">
  Basic
</button>

.negative

<button class="ui negative button">
  Button
</button>
<button class="ui negative basic button">
  Basic
</button>

.red

Semantic UI の red クラスを使って、ボタンを赤く装飾できる。

<button class="ui red button">
  Button
</button>
<button class="ui red basic button">
  Basic
</button>

.orange

Semantic UI の orange クラスを使って、ボタンをオレンジ色に装飾できる。

<button class="ui orange button">
  Button
</button>
<button class="ui orange basic button">
  Basic
</button>

.yellow

Semantic UI の yellow クラスを使って、ボタンを黄色く装飾できる。

<button class="ui yellow button">
  Button
</button>
<button class="ui yellow basic button">
  Basic
</button>

.olive

Semantic UI の olive クラスを使って、ボタンをオリーブ色に装飾できる。

<button class="ui olive button">
  Button
</button>
<button class="ui olive basic button">
  Basic
</button>

.green

Semantic UI の green クラスを使って、ボタンを緑色に装飾できる。

<button class="ui green button">
  Button
</button>
<button class="ui green basic button">
  Basic
</button>

.teal

Semantic UI の teal クラスを使って、ボタンを鴨の羽色に装飾できる。

<button class="ui teal button">
  Button
</button>
<button class="ui teal basic button">
  Basic
</button>

.blue

Semantic UI の blue クラスを使って、ボタンを青く装飾できる。

<button class="ui blue button">
  Button
</button>
<button class="ui blue basic button">
  Basic
</button>

.violet

Semantic UI の violet クラスを使って、ボタンを菫色に装飾できる。

<button class="ui violet button">
  Button
</button>
<button class="ui violet basic button">
  Basic
</button>

.purple

Semantic UI の purple クラスを使って、ボタンを紫色に装飾できる。

<button class="ui purple button">
  Button
</button>
<button class="ui purple basic button">
  Basic
</button>

.pink

Semantic UI の pink クラスを使って、ボタンをピンク色に装飾できる。

<button class="ui pink button">
  Button
</button>
<button class="ui pink basic button">
  Basic
</button>

.brown

Semantic UI の brown クラスを使って、ボタンを茶色く装飾できる。

<button class="ui brown button">
  Button
</button>
<button class="ui brown basic button">
  Basic
</button>

.grey

Semantic UI の grey クラスを使って、ボタンを灰色に装飾できる。

<button class="ui grey button">
  Button
</button>
<button class="ui grey basic button">
  Basic
</button>

.black

Semantic UI の black クラスを使って、ボタンを黒く装飾できる。

<button class="ui black button">
  Button
</button>
<button class="ui black basic button">
  Basic
</button>

初春の令月にして、気淑よく風和やわらぎ、梅は鏡前の粉を披き、蘭は珮後の香を薫す。

Device	Device width	Container width
Mobile	< 768px	100%
Tablet	768px - 991px	723px
Small monitor	992px - 1200px	933px
Large monitor	> 1200px	1127px

Semantic UI のクラスを使って、ドロップダウン・メニューを作成できる。

<div class="ui dropdown">
  <div class="text">File</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">New</div>
    <div class="item">Save</div>
  </div>
</div>
<script>
  $('.ui.dropdown').dropdown();
</script>

.grid

Semantic UIでは水平方向を16列に分割したグリッドレイアウトを採用している。

<div class="ui grid">
  <div class="eight wide column">
    first
  </div>
  <div class="eight wide column">
    second
  </div>
</div>

first

second

.row

ひとつの行に内包するすべての列幅が均等であれば、一括してサイズを指定できる。

<div class="ui grid">
  <div class="four column row">
    <div class="column">first</div>
    <div class="column">second</div>
    <div class="column">third</div>
    <div class="column">fourth</div>
  </div>
</div>

first

second

third

fourth

.column

ひとつのグリッドに内包するすべての列幅が均等であれば、一括してサイズを指定できる。

<div class="ui three column grid">
  <div class="row">
    <div class="column">#1</div>
    <div class="column">#2</div>
    <div class="column">#3</div>
  </div>
</div>

#1

#2

#3

.icon

Semantic UIでは Font Awesome のアイコンを利用できる。

<i class="question circle icon"></i>

<div class="ui menu">
  <a class="item" href="/css/bootstrap/">
    Bootstrap
  </a>
  <a class="active item">
    Semantic UI
  </a>
</div>

.two .item

<div class="ui two item menu">
  <a class="item" href="/css/bulma/">
    Bulma
  </a>
  <a class="active item">
    Semantic UI
  </a>
</div>

.pointing

<div class="ui pointing menu">
  <a class="item" href="/css/materialize/">
    Materialize
  </a>
  <a class="active item">
    Semantic UI
  </a>
</div>

.secondary .pointing

<div class="ui secondary pointing menu">
  <a class="item" href="/css/milligram/">
    Milligram
  </a>
  <a class="active item">
    Semantic UI
  </a>
</div>

<div class="ui text menu">
  <a class="item" href="/css/primer/">
    Primer CSS
  </a>
  <a class="item" href="/css/pure/">
    Pure.css
  </a>
  <a class="active item">
    Semantic UI
  </a>
</div>

.vertical

<div class="ui vertical menu">
  <a class="active item">Semantic UI</a>
  <a class="item" href="/css/skeleton/">
    Skeleton
  </a>
  <a class="item" href="/css/spectre/">
    Spectre.css
  </a>
</div>

.secondary .vertical

<div class="ui secondary vertical menu">
  <a class="active item">
    Semantic UI
  </a>
  <a class="item" href="/css/tachyons/">
    Tachyonss
  </a>
  <a class="item" href="/css/tailwind/">
    Tailwind CSS
  </a>
</div>

.vertical .text

<div class="ui vertical text menu">
  <a class="active item">
    Semantic UI
  </a>
  <a class="item" href="/css/uikit/">
    UIkit
  </a>
  <a class="item" href="/css/foundation/">
    Zurb Foundation
  </a>
</div>

.table

<table class="ui table">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr>
      <td>0010</td>
      <td>りそな銀行</td>
    </tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>

金融機関コード
コード	金融機関
0001	みずほ銀行
0009	三井住友銀行
0010	りそな銀行
9900	ゆうちょ銀行

.celled

<table class="ui celled table">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr>
      <td>0010</td>
      <td>りそな銀行</td>
    </tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>

金融機関コード
コード	金融機関
0001	みずほ銀行
0009	三井住友銀行
0010	りそな銀行
9900	ゆうちょ銀行

.striped

Semantic UI で表の行を縞模様にするには、striped クラスを指定する。

<table class="ui striped table">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr>
      <td>0010</td>
      <td>りそな銀行</td>
    </tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>

金融機関コード
コード	金融機関
0001	みずほ銀行
0009	三井住友銀行
0010	りそな銀行
9900	ゆうちょ銀行

.single .line

<table class="ui single line table">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr>
      <td>0010</td>
      <td>りそな銀行</td>
    </tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>

金融機関コード
コード	金融機関
0001	みずほ銀行
0009	三井住友銀行
0010	りそな銀行
9900	ゆうちょ銀行

.selectable

Semantic UI でマウスカーソルを表の行の上に乗せたときに色を変えるには、selectable クラスを指定する。

<table class="ui selectable table">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr>
      <td>0010</td>
      <td>りそな銀行</td>
    </tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>

金融機関コード
コード	金融機関
0001	みずほ銀行
0009	三井住友銀行
0010	りそな銀行
9900	ゆうちょ銀行

<form class="ui form">
  <div class="field">
    <label>First name</label>
    <input type="text" name="first_name" placeholder="John">
  </div>
</form>

<form class="ui mini form">
  <div class="field">
    <label>First name</label>
    <input type="text" name="first_name" placeholder="John">
  </div>
</form>

<form class="ui tiny form">
  <div class="field">
    <label>First name</label>
    <input type="text" name="first_name" placeholder="John">
  </div>
</form>

<form class="ui small form">
  <div class="field">
    <label>First name</label>
    <input type="text" name="first_name" placeholder="John">
  </div>
</form>

<form class="ui large form">
  <div class="field">
    <label>First name</label>
    <input type="text" name="first_name" placeholder="John">
  </div>
</form>

<form class="ui big form">
  <div class="field">
    <label>First name</label>
    <input type="text" name="first_name" placeholder="John">
  </div>
</form>

<form class="ui huge form">
  <div class="field">
    <label>First name</label>
    <input type="text" name="first_name" placeholder="John">
  </div>
</form>

<form class="ui massive form">
  <div class="field">
    <label>First name</label>
    <input type="text" name="first_name" placeholder="John">
  </div>
</form>

<form class="ui form">
  <div class="field">
    <div class="ui checkbox">
      <input type="checkbox">
      <label>Checkbox</label>
    </div>
  </div>
</form>

<form class="ui form">
  <div class="field">
    <div class="ui slider checkbox">
      <input type="checkbox">
      <label>Checkbox</label>
    </div>
  </div>
</form>

<form class="ui form">
  <div class="field">
    <div class="ui toggle checkbox">
      <input type="checkbox">
      <label>Checkbox</label>
    </div>
  </div>
</form>

<form class="ui form">
  <div class="grouped fields">
    <label for="account">預金口座種別:</label>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="account" checked="">
        <label>普通預金</label>
      </div/>
    </div/>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="account">
        <label>当座預金</label>
      </div>
    </div>
  </div>
</form>

預金口座種別:

普通預金

当座預金

<form class="ui form">
  <div class="field">
    <select>
      <option value="1">1st option</option>
      <option value="2">2nd option</option>
      <option value="3">3rd option</option>
    </select>
  </div>
</form>

<form class="ui form">
  <div class="field">
    <label>Textarea</label>
    <textarea placeholder="Textarea"></textarea>
  </div>
</form>

<h2 class="ui right aligned header">Right</h2>

<h2 class="ui center aligned header">Center</h2>

<h2 class="ui red header">Red</h2>

<img class="ui mini image" src="avator.jpg">

<img class="ui tiny image" src="avator.jpg">

<img class="ui small image" src="avator.jpg">

<img class="ui medium image" src="avator.jpg">

<img class="ui disabled small image" src="avator.jpg">

<img class="ui small bordered image" src="avator.jpg">

<img class="ui small rounded image" src="avator.jpg">

<img class="ui small circular image" src="avator.jpg">

<img class="ui centered small image" src="avator.jpg">

<div class="ui label">Label</div>

Label

<div class="ui teal label">Label</div">

Label

<div class="ui circular label">1</div">

1

<div class="ui large label">Large</div">

Large

<ul class="ui bulleted list">
  <li>Item</li>
  <li>Item
    <ul>
      <li>Item</li>
    </ul>
  </li>
</ul>

Item
Item
- Item

<ol class="ui ordered list">
  <li>Item</li>
  <li>Item
    <ol>
      <li>Item</li>
    </ol>
  </li>
</ol>

Item
Item
1. Item

<div class="ui secondary menu">
  <a class="item">Item</a>
  <a class="active item">Active Item</a>
</div>
<div class="ui two item secondary menu">
  <a class="item">Item</a>
  <a class="active item">Active Item</a>
</div>

<div class="ui modal">
  <div class="header">Modal</div>
  <div class="content">
    <!-- content -->
  </div>
  <div class="actions">
    <div class="ui approve button">Approve</div>
    <div class="ui button">Neutral</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

Approve

Neutral

Cancel

<div class="ui basic modal">
  <div class="header">Basic modal</div>
  <div class="content">
    <!-- content -->
  </div>
  <div class="actions">
    <div class="ui approve button">Approve</div>
    <div class="ui button">Neutral</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

Approve

Neutral

Cancel

<div class="ui mini modal">
  <div class="header">Mini modal</div>
  <div class="content">
    <!-- content -->
  </div>
  <div class="actions">
    <div class="ui approve button">Approve</div>
    <div class="ui button">Neutral</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

Approve

Neutral

Cancel

<div class="ui tiny modal">
  <div class="header">Tiny modal</div>
  <div class="content">
    <!-- content -->
  </div>
  <div class="actions">
    <div class="ui approve button">Approve</div>
    <div class="ui button">Neutral</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

Approve

Neutral

Cancel

<div class="ui small modal">
  <div class="header">Small modal</div>
  <div class="content">
    <!-- content -->
  </div>
  <div class="actions">
    <div class="ui approve button">Approve</div>
    <div class="ui button">Neutral</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

Approve

Neutral

Cancel

<div class="ui large modal">
  <div class="header">Large modal</div>
  <div class="content">
    <!-- content -->
  </div>
  <div class="actions">
    <div class="ui approve button">Approve</div>
    <div class="ui button">Neutral</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

Approve

Neutral

Cancel

<div class="ui fullscreen modal">
  <div class="header">Fullscreen modal</div>
  <div class="content">
    <!-- content -->
  </div>
  <div class="actions">
    <div class="ui approve button">Approve</div>
    <div class="ui button">Neutral</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

Approve

Neutral

Cancel

Semantic UI

概要

使い方

テンプレート

CDN

.breadcrumb

.button

.basic

.primary

.secondary

.positive

.negative

.red

.orange

.yellow

.olive

.green

.teal

.blue

.violet

.purple

.pink

.brown

.grey

.black

.container

.text

.dropdown

.grid

.row

.column

.icon

.menu

.two .item

.pointing

.secondary .pointing

.text

.vertical

.secondary .vertical

.vertical .text

.table

.celled

.striped

.single .line

.selectable

Right

Center

Red