Semantic UI

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

概要

Semantic UI
項目内容
URL https://semantic-ui.com/
LicenseMIT
Grid16列
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>
  <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>

CDN

CDN (Contents Delivery Network) を使ったSemantic UIのテンプレートは次のとおり。

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

<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

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

.orange

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

.yellow

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

.olive

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

.green

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

.teal

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

.blue

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

.violet

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

.purple

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

.pink

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

.brown

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

.grey

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

.black

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

.container

Device Device width Container width
Mobile < 768px 100%
Tablet 768px - 991px 723px
Small monitor 992px - 1200px 933px
Large monitor > 1200px 1127px
<div class="ui container">
  初春の令月にして、気淑よく風和やわらぎ、
  梅は鏡前の粉を披き、蘭は珮後の香を薫す。
</div>
初春の令月にして、気淑よく風和やわらぎ、梅は鏡前の粉を披き、蘭は珮後の香を薫す。

.text

<div class="ui text container">
  初春の令月にして、気淑よく風和やわらぎ、
  梅は鏡前の粉を披き、蘭は珮後の香を薫す。
</div>
初春の令月にして、気淑よく風和やわらぎ、梅は鏡前の粉を披き、蘭は珮後の香を薫す。
<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">Item</a>
  <a class="active item">Active item</a>
</div>

.two .item

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

.pointing

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

.secondary .pointing

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

.text

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

.vertical

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

.secondary .vertical

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

.vertical .text

<div class="ui vertical text menu">
  <a class="item">Item</a>
  <a class="active item">Active item</a>
</div>

.table

<table class="ui table">
Table classes
ClassDescription
celledセルに境界線を引く
striped1行おきに行の色を変える
single line行に境界線を引く
selectable行にマウスカーソルを乗せると色が変わる

.celled

<table class="ui celled table">
Table classes
ClassDescription
celledセルに境界線を引く
striped1行おきに行の色を変える
single line行に境界線を引く
selectable行にマウスカーソルを乗せると色が変わる

.striped

<table class="ui striped table">
Table classes
ClassDescription
celledセルに境界線を引く
striped1行おきに行の色を変える
single line行に境界線を引く
selectable行にマウスカーソルを乗せると色が変わる

.single .line

<table class="ui single line table">
Table classes
ClassDescription
celledセルに境界線を引く
striped1行おきに行の色を変える
single line行に境界線を引く
selectable行にマウスカーソルを乗せると色が変わる

.selectable

<table class="ui selectable table">
Table classes
ClassDescription
celledセルに境界線を引く
striped1行おきに行の色を変える
single line行に境界線を引く
selectable行にマウスカーソルを乗せると色が変わる