Semantic UI Doc ( Elements - Segment ) を読む
Semantic UI の Segment を読んだ。セグメントにテーマは 2 個ある。
セグメントは関連コンテンツのグループをつくるのに使う。いくつかタイプがあり、「Raised」はページの上に浮遊しているような表示に、「Stacked」は複数のページが重なったような表示に、「Piled」は複数のページが散らばりながら重なった表示に、「Vertical Segment」はセグメントを水平線で分断する表示。
グループ化もできる。セグメントの入れ子もできるし、水平にセグメントを並べることもできる。グループ化した際の仕切り線に色をつけたりもできる。また、グループの中でセグメントの注目度を落としたければ .ui.secondary.segment を使い、背景色をグレーにする。
セグメントには通常の状態に加えて、無効状態、読み込み中状態がある。
バリエーションもいくつかあり、反転色にしたり、Attached Header や Attached Message をくっつけたり、セグメント内部の余白を広げたり、コンパクトな見た目にしたり、セグメントの上部ボーダーに色を付けたり、背景色に色を付けたり、前述したような注目度を落とすために見た目を変えたり、円形にしたり、float でセグメントを左右に並べたり、書式方向を変更したり、枠線や背景を取っ払ったシンプルな見た目にしたりできる。
Semantic UI Doc ( Elements - Rail, Reveal ) を読む
Rail
Semantic UI の Rail を読んだ。レールにテーマはない。
レールはサイトのメインコンテンツに付随するオプションコンテンツを表示するのに使う。たとえば、ブログ記事がメインコンテンツで、前後の記事に移動するリンクがオプションコンテンツだ。
レールはメインコンテンツの左右に固定位置で表示される。幅は 300px、これは広告やサブナビゲーションを表示するのに最適なサイズだ。レールをモバイルなど幅が狭い環境でも表示するにはブレークポイントの指定が必要になる。
タイプが 3 つある。1 つ目はメインコンテンツの外側左右にレールを表示する。2 つ目はメインコンテンツの内側左右にレールを表示する。3 つ目はメインコンテンツとレールの間に境界線を敷いて、左右にレールを表示する。
見た目のバリエーションもいくつかある。コンテンツとレールを接着させて表示したり、コンテンツとレールを通常より近づけて表示したり、レールの中身の文字サイズを変更したりできる。
Reveal
Semantic UI の Reveal を読んだ。Reveal にテーマはない。
Reveal は何ていうか説明が難しいけど、マウスオーバーなどでコンテンツをアクティブ状態にしたときに、任意のアニメーションを加えながら表示を切り替えるためのもの。
3 つのアニメーションタイプがあり、「Fade」は非アクティブ状態の表示がその場で消えてアクティブ状態に切り替わる。「Move」は非アクティブ状態の表示が上下左右どこかに移動しながら消えてアクティブ状態に切り替わる。「Rotate」は非アクティブ状態の表示が左右どちらかに回転しながら消えてアクティブ状態に切り替わる。
マウスオーバーする前のコンテンツの状態を非アクティブ状態にすることもできるし、逆にアクティブ状態にすることもできる。
「Instant」バリエーションを指定すると、マウスオーバーした瞬間にアニメーションが開始されるようにできる（ transition-delay: 0s ）。
Semantic UI Doc ( Elements - Loader ) を読む
Semantic UI の Loader を読んだ。ローダーにテーマは 3 個ある。
ローダーはコンテンツが読み込み中であることを示すために使う。クルクル回るいつものアレを画像（ CSS で描画されるが面倒なので画像と呼ぶ）だけで表示するか、テキストラベル付きで表示するか選べる。
通常のローダーは親要素に .ui.active.dimmer を持ち、子要素に .ui.loader を持つ。これは黒背景を想定したローダーだが、もし白背景でも見えるようにしたければ .ui.active.inverted.dimmer で反転色のローダーにする。
ローダーは 3 つの状態を持ち、読み込みの所要時間が不明確なときに黒背景をローダーとコンテンツの間に敷く「Indeterminate」、コンテンツが見えた状態でローダーを表示する「Active」、ローダーを非表示にする「Disabled」がある。
見た目のバリエーションもいくつかあり、配置に関してはインラインまたはインラインで中央に表示することができ、サイズにはバリエーションがあり、背景に合わせてローダーの色を反転することもできる。
Semantic UI Doc ( Elements - List ) を読む
Semantic UI の List を読んだ。リストにテーマはない。
リストは親要素に .ui.list をつけて表示する。div 要素でリストを表現する場合は、追加で子要素に .item を指定して表示する。リストは入れ子にすることができ、階層をつくりだせる。
div 要素で指定したリストにバレット（黒ポチ）はない。バレットをつけるには .ui.bulleted.list を指定するか、指定する要素を ul 要素に変更する。.ui.horizontal.bulleted.list でインラインリストを表示することもできる。この指定ではアイテムの境界がバレットになる。
順序付きリストは .ui.ordered.list で表示できる。順序付きリストの場合、リストを階層化すると親は 1 、2 、3 ... と番号が付き、子は 1.1 、1.2 、1.3 ... と番号が振られていく。順序付きリストでは、li 要素の value 属性を指定すれば好きな文字列で番号部分を変更できる。
ナビゲーションリンクのリストを表示するには .ui.link.list を指定する。このリストにはリンクをアクティブ状態に見せるクラスが用意されている。
リストに含むことができるコンテンツは、文字列、アイコン、画像、リンク、ヘッダー、説明文（ .description ）がある。
リストには見た目のバリエーションもあり、水平にアイテムを並べたリスト、番号付きで水平にアイテムを並べたリスト、黒背景などを想定した反転色のリスト、アイテムを選択できるリスト（マウスオーバーなどの状態で表示が変わる）、アニメーション付きでアイテムを選択できるリスト（マウスオーバーなどの状態で表示が変わる）、余白を調整したリスト、アイテムに境界線をつけたリスト、サイズのバリエーションなどなど。
リストのコンテンツの中身についても見た目を指定することができ、たとえば水平に画像と文章を並べた場合の縦方向の配置を指定したりできる。
Semantic UI Doc ( Elements - Input, Label ) を読む
Input
Semantic UI の Input を読んだ。入力欄にテーマは 2 個ある。
入力欄は以下のように、.ui.input コンテナーで input 要素を包んで表示する。
<div class="ui input"> <input type="text" placeholder="Search"> </div>
フォーカス、読み込み中、入力無効、エラーなどいくつか状態をあらわすクラスがある。
また、見た目を変更するためにバリエーションも用意されており、入力欄にアイコンをつけたり、入力欄の前後に prefix / suffix のようなラベルをつけたり、アクションボタン（またはドロップダウンメニューなど）をつけたり、入力欄の枠線を取り除いたシンプルな見た目にしたり、色を反転させたり、幅いっぱいに入力欄を表示したり、入力欄のサイズを変更したりできる。
Label
Semantic UI の Label を読んだ。ラベルにテーマは 2 個ある。
ラベルは .ui.label で表示でき、角丸つきのベタ背景に小さなテキストの見た目をしている。（※フォームのラベルではない）
ラベルは背景色を変えることもできるし、アイコンや画像と一緒に表示することもできる。また、三角の突起をラベルから伸ばすことで、吹き出しのような見た目にすることもできる。
ラベルを画像やブロックの四隅につけることもできるが、この場合は親要素に position: relative が必要。角丸の画像やブロックにラベルをつけるときは、親要素に overflow: hidden も必要。
タグ（というか値札）のように穴あきの見た目にしたり、リボンのように折り返しをつけた見た目にしたり、上下または四隅どこかにくっついた見た目にしたり、水平方向にコンテンツを並べることを想定したラベルの見た目にしたりできる。
ラベルの形状を円形にしたり、ベタ背景から枠線にしたり、色を変えたり、サイズを変えたりできるバリエーションクラスがある。
複数のラベルをグループ化して表示することもできる。
Semantic UI Doc ( Elements - Icon, Image ) を読む
Icon
Semantic UI の Icon を読んだ。アイコンにテーマはない。
Semantic UI はアイコンを Font Awesome 5.0.8 のものを使い、アイコンフォントで表示する。
<!-- i 要素に対して、基本クラス .icon と指定したいアイコン名（以下では .users ）を指定 --> <i class="icon users"></i>
アイコンには状態があり、無効な状態は i.disabled.icon、読み込み中の状態は i.icon.loading であらわすことができる。
また、バリエーションもいくつかある。周囲のコンテンツにフィットするようサイズを変更するクラス、サイズのバリエーションクラス、リンクとして表示するクラス、上下や左右を逆さまにするクラス、円にアイコンを表示するクラス、正方形にアイコンを表示するクラス、色や反転色をつけるクラスなど。
アイコンを重ねて、組み合わせて使うこともできる。まったく同じ開始位置とサイズで 2 つのアイコンを表示したり、基準となるアイコンに対して四隅どこかに 2 つ目のアイコンを表示したり。文章で説明してもピンとこないかもしれないが、使用例を Icon - Definition のページで見ると「あぁ、なるほど」と思うかも。
Image
Semantic UI の Image を読んだ。イメージにテーマはない。
イメージクラスは img または svg 要素に直接指定するか、イメージのコンテナーにクラスを指定する。.ui.image のベースクラスと、サイズ指定クラス（.small など）を組み合わせて使う。
<!-- img 要素に指定 --> <img class="ui small image" src="..."> <!-- img 要素のコンテナーに指定 --> <div class="ui small image"> <img src="..."> </div>
イメージは状態クラスがあり、非表示（ display: none ）、無効状態がある。
また、見た目のバリエーションも多く、アバター画像用のクラス、枠線をつけるクラス、幅いっぱいの画像にするクラス、画像に角丸をつけるクラス、画像を円形にするクラス、画像と水平に並べるテキストの縦方向の位置を決めるクラス、画像の水平方向の位置を指定するクラス、文章の中に画像をインラインで表示するとき周囲に余白を持たせるクラス、サイズのバリエーションクラスなどがある。
.ui.images で複数の画像を包むと、画像はグループとして表示することも可能。
Semantic UI Doc ( Elements - Header ) を読む
Semantic UI の Header を読んだ。ヘッダーにテーマは 5 個ある。
ヘッダーはコンテンツの短い要約を示すのに使われる。ヘッダーにはいくつかタイプがあり、ひとつはページヘッダーである。これはページにおけるセクションの階層をあらわすために使われ、h1.ui.header 〜 h6.ui.header といった具合に HTML 要素と合わせて指定する。フォントサイズと余白は rem を使った値でスタイルされている。
つぎはコンテンツヘッダーで、これはセクション内でコンテンツの重要性をあらわすために使われ、.ui.huge.header や .ui.small.header のように指定する。フォントサイズと余白は em を使った値でスタイルされている。
3 つ目はアイコンヘッダーで、これはアイコンを主役としたヘッダーで、.ui.icon.header をコンテナーに、アイコンとテキストを包んで指定する。
<!-- アイコンヘッダー --> <h2 class="ui icon header"> <i class="settings icon"></i> <div class="content"> ... </div> </div> </h2>
4 つ目はサブヘッダーで、ヘッダーほど強調したくない要素に対して指定する。.ui.sub.header でサブヘッダーを表示できる。
ここからはヘッダーの中身について。ヘッダーは画像やアイコンを含めることができる。また、サブヘッダーをふくめることも可能。
<h2 class="ui header"> ... <div class="ui subheader"> ... </div> </h2>
見た目的に無効な状態のヘッダーを表示することもでき、これには .ui.disabled.header を指定する。
ヘッダーにはいくつかバリエーションがあり、背景あり、下線あり、水平方向の配置、色つき、反転色など、見た目を変更できる。
