nlog

とめどなく流れるよだれ

Semantic UI Doc ( Modules - Progress, Rating, Search, Shape ) を読む

css

Semantic UI の Progress、Rating、Search、Shape を読んだ。

JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。

Progress

テーマは 4 つ。タスクの進行状況を伝えたいときに使う。

.ui.progress で指定した要素は横に伸びるバーの見た目になり、その中で進行状況を表すバーが表示される。進行状況部分のバーは、アニメーションをつけて状況が進んでいることを表現することもできる。

進行状況を表すバーの構造はいくつかに分かれている。

  • バー
  • 進行状況を表す値
  • バーの内容を表すラベル

アクティブ状態、成功・警告・エラー状態、無効状態など、状態に関するスタイルもいくつか。

見た目のバリエーションもある。

  • Inverted ... 反転色
  • Attached ... 要素にくっつけてバーを表示
  • Size ... 全体のサイズ指定
  • Color ... バーの色の変更
  • Inverted Color ... バーの色を反転色にする

Rating

テーマはない。Rating はコンテンツの評価を星やハートの段階で表したいときに使う。

星で評価を表すには .ui.star.rating でクラスを指定する。ハートで評価を表すには .ui.heart.rating でクラスを指定する。

HTML は以下のように書く。data-max-rating で評価の最大値を、data-rating でコンテンツの評価を示す。

<div class="ui heart rating" data-rating="1" data-max-rating="3"></div>

見た目のバリエーションはサイズだけある。

Search

テーマはない。Search はデータベースからキーワード検索するときに使う。見た目はフォームの入力欄。

通常の Search は .ui.search で指定し、このときは入力途中に候補がリストで表示される。カテゴリー型の Search は .ui.category.search で指定し、入力候補がカテゴライズされたリストで表示される。あとはデータベースからキーワードを検索するのではなく、サイトのローカルソースから検索する手段も用意されている。

この Module の状態は 1 つ。読み込み中の状態だけがある。

見た目のバリエーションは複数ある。

  • Fluid ... 検索結果をコンテナー幅一杯に表示
  • Aligned ... 検索結果をコンテナーの左右どちらかに寄せて表示

Shape

テーマはない。挙動に 3D オブジェクトのエフェクトを加えたいときに使う。

.ui.shape で指定した要素は、表示が切り替わるときに 3D 上で回転するように見た目が変わる。

Semantic UI Doc ( Modules - Embed, Modal, Nag, Popup ) を読む

css

Semantic UI の Embed、Modal、Nag、Popup を読んだ。

JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。

Embed

テーマはない。Embed は YouTube や Google Maps のような外部コンテンツをサイトんい貼り付けるときに使う。

Embed のスタイルを適用したい場所には .ui.embed を指定する。表示する場所の比率を指定したい場合は .ui[class*="4:3"].embed のようにアスペクト比を合わせて指定する。

Modal

テーマは 2 つ。Modal は他の操作を中断して 1 つの操作に集中させたいときに使う。

.ui.modal で指定した Modal はページの 1 レイヤー上に黒の透過レイヤーを敷き、さらにその上にレイヤーを重ねてコンテンツを表示する枠を取る。.ui.basic.modal で指定した Modal はもう少しシンプルで、1 レイヤー上に黒の透過レイヤーを敷いてその中にコンテンツも表示する。

構造はいくつかに分けることができる。

  • ヘッダー
  • コンテンツ（テキストなど）
  • 画像
  • アクション要素（ボタンなど）

見た目のバリエーションもある。

  • Full Screen ... コンテナーの幅一杯にモーダルを表示
  • Size ... 全体的なサイズの指定
  • Scrolling Content ... モーダルの最大の高さを決めて、最大を超えるとコンテンツがスクロールして見れるようにする

また、モーダルは .active という状態クラスを持っている。

Nag

テーマはない。ユーザーによって取り消されるまで表示したい重要なメッセージを出すのに使う。キャンセルボタン付きのお知らせバー。

使い所としては、サイトが Cookie 情報を取得していることや、セキュリティの重要な変更の通知などに使うことを想定しているらしい。

シンプルな Module でこれ以上説明することもない。

Popup

テーマはない。マウスオーバーした要素と近接する四方どこかに補足情報を表示したいときに使う。

Popup で文章を表示したい場合は data-content="" 属性、タイトルを表示したい場合は data-title="" 属性を、HTML を表示したい場合は data-html="" を使う。また、data 属性を使わなくとも、.ui.popup で囲った要素として外出しして指定することもできる。

いくつかバリエーションがあり、見た目は少し変えられる。

  • Basic ... 通常 Popup は吹き出し付きで表示されるが、この吹き出しアイコン（三角アイコン）を表示しない指定
  • Width ... data-variation="wide" などを合わせて指定することで Popup の幅を広げる
  • Fluid ... コンテナー一杯で表示
  • Size ... 全体的なサイズの指定
  • Flowing ... Popup に最大幅を持たせない指定
  • Inverted ... 反転色（黒背景に白文字）

Semantic UI Doc ( Modules - Accordion, Checkbox, Dimmer, Dropdown ) を読む

css

Semantic UI の Accordion、Checkbox、Dimmer、Dropdown を読んだ。

JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。

Accordion

テーマは 2 つ。Accordion は開閉コンテンツを表示するのに使う。

.ui.accordion が全体を包むコンテナーになり、その下に各 Accordion のタイトルと説明文が続く。

<div class="ui accordion"> <!-- コンテナー -->
  <div class="active title"> ... </div> <!-- 1 つ目のタイトル --->
  <div class="active content"> ... </div> <!-- 1 つ目の説明文 --->
  <div class="title"> ... </div> <!-- 2 つ目のタイトル --->
  <div class="content"> ... </div> <!-- 2 つ目の説明文 --->
</div>

通常の Accordion は枠線などを持たないが、Modifier クラスを追加して .ui.styled.accordion とすれば枠線ありに見た目を変えることができる。

また、その他の見た目のバリエーションもある。

  • Fluid ... Accordion をサイトのコンテナー一杯に表示
  • Inverted ... 反転色

Checkbox

テーマは 2 つ。選択型のフォームを入力するのに使うもので、一般にはチェックボックスやラジオボタンと呼ばれるもののこと。

Checkbox はボタンとラベルがセットになっており、このセットを .ui.checkbox で包んで指定する。HTML は以下のようになる。

<!-- input は非表示にして、label の疑似要素でボタンを表示する -->
<div class="ui checkbox">
  <input type="checkbox" name="example" tabindex="0" class="hidden">
  <label>Make my profile visible</label>
</div>

見た目を少し変えることもできて、スライダーのように見せたり、iOS のトグルボタンのように見せたりすることができる。

また、状態クラスをいくつか持っている。

  • Read-only ... 読み取り専用
  • Checked ... チェック済み
  • Indeterminate ... 不確定（未入力）
  • Disabled ... 無効

通常の Checkbox は枠線などを持たないが、Modifier クラスを追加して .ui.fitted.checkbox とすれば枠線や影がついてページから浮き上がった見た目になる。

Dimmer

テーマはない。Dimmer は一部のコンテンツに集中させたいときに使うもので、具体的にはコンテンツの 1 レイヤー上に黒の透過レイヤーを上乗せして表示する。

.ui.dimmer で囲われた要素が Dimmer のコンテンツとして表示される。Dimmer は一部のコンテンツに適用することもできるし、ページ全体に適用することもできる。

アクティブと無効、2 つの状態を持っている。

見た目のバリエーションはいくつかあり、

見た目のバリエーションもいくつかある。

  • Blurring ... Dimmer の背景をぼかす
  • Vertical Alignment ... Dimmer 内に表示するコンテンツの縦方向の配置を指定
  • Simple Dimmer ... JavaScript なしに動作する
  • Inverted Dimmer ... 反転色（白の透過レイヤー）

Dropdown

テーマは 3 つ。ドロップダウンリストを表示するのに使う。Semantic UI のドロップダウンリストはデフォルトで開閉する際にアニメーションがついている。

.ui.dropdown のコンテナーがまずあり、その中にボタン（開閉スイッチ）とリストが含まれている形。Dropdown はフォーム部品にも適用可能で、実装されているコードを見ると input を非表示にして他の要素にスタイルを当てたりしている。また、検索ボックス付きのドロップダウンリストをつくることもできるようなので、拡張されたコンポーネントは最初から用意されている様子。Dropdown で選択したアイテムをボタンのそばに反映する、ということも簡単にできそうだ。

Dropdown のリストの構造はいくつかに分けることができる。

  • ヘッダー
  • 境界線
  • アイコン
  • 説明文（短い文）
  • ラベル
  • メッセージ（説明文よりは長いが短い文）
  • コンテンツを左右に配置（構造？）
  • 入力欄
  • 画像

状態は 4 つで、読み込み中、エラー、アクティブ、無効とある。

見た目のバリエーションもいくつか。

  • Scrolling ... リストの高さを決めてスクロールするようにする
  • Compact ... 最小の幅でリストを表示
  • fluid ... ボタンと同じ幅でリストを表示
  • Menu Direction ... ドロップダウンリストの中にドロップダウンリストを表示

Semantic UI Doc ( Views - Card, Comment, Feed, Item, Statistic) を読む

css

Semantic UI の Card、Comment、Feed、Item、Statistic を読んだ。

Card

テーマは 4 つ。Card は画像やテキストをひとまとまりの構造として見せたいときに使う。

Card 単体は .card で指定し、複数の Card を並べるときは .ui.cards でグループ化する。Flexbox により、グループ化された Card の高さは自動的に同じになる。

Card の構造はいくつかに分けることができ、以下のようになる。

  • コンテンツブロック
  • 画像
  • ヘッダー
  • メタデータ
  • リンク
  • ボタン
  • お気に入りなどのアクション要素
  • 説明文

また、Card には見た目のバリエーションがある。

  • Fluid Card ... コンテナーの幅一杯に広がる
  • Centered Card ... コンテナーの中央に配置される
  • Raised Card ... ページから浮いているように見える
  • Link Card ... リンクが付いている
  • Floated Content ... 左右にコンテンツを配置
  • Text Alignment ... 書式方向の指定
  • Colored ... Card の最下部に色付きの線を付ける
  • Column Count ... 1 行の中に表示する Card の数を指定
  • Stackable ... モバイルでは複数の Card を 1 列に縦積みする
  • Doubling ... モバイルでは複数の Card を 2 列に縦積みする

Comment

テーマは 2 つ。Comment はユーザーのフィードバックをサイトに表示させたいときに使う。

Comment は .comments で囲んだコンテナーの下に、コメントとコメント入力欄を備えている。

Comment の構造はいくつかに分けることができ、以下のようになる。

Comment は表示を折りたたむことができ、開いている状態・閉じてる状態を持つ。

また、見た目のバリエーションがいくつかある。

  • Threaded ... 返信などのコメントの関係が見えるように、スレッドのように見せる
  • Minimal ... コメントをコンパクトにする
  • Size ... 全体のサイズを調整する

Feed

テーマは 2 つ。Feed はユーザーの活動を時系列に沿って表示するときに使う。

.ui.feed で囲んだコンテナーの下にいくつかの要素を備えている。

構造はいくつかに分けることができ、以下のようになる。

  • ラベル
  • 日付
  • 追加情報（画像やテキスト）

全体的なサイズを変えるためのバリエーションも用意されている。

Item

テーマはない。Item は画像やテキストをひとまとまりの構造として見せたいときに使うという点で Card とよく似た View だ。

通常 Item は画像とテキスト情報を横並びにして表示するが、モバイルで表示したときは縦積みして表示する。

Item 自体は .item で指定し、グループ化した Item は .items で包んで指定する。

構造はいくつか分けることができる。

  • 画像
  • コンテンツ（テキストなど）
  • ヘッダー
  • メタ情報
  • リンク
  • 説明文
  • Like や Fav などの評価アクション

見た目のバリエーションも複数用意されている。

  • Stacking ... モバイルで縦積み表示しない（デスクトップと同じ横並びのままコンテンツを縮小する）
  • Divided ... Item と Item の間に境界線をつける
  • Relaxed ... Item 同士の余白を広げる
  • Link Item ... Item をリンク化
  • Vertical Alignment ... 画像と並ぶテキストの縦の配置を指定する
  • Floated Content ... 左右にコンテンツを配置

Statistic

テーマはない。料金表の値段など、一部の値と単位を強調するのに使う。Statistic はグループ化して使うこともできる。

構成要素はシンプルで、値と単位（ラベル）だけ。

見た目のバリエーションはいくつかある。

  • Horizontal Statistic ... 値と単位を横に並べる
  • Colored ... 値に色を付ける
  • Inverted ... 反転色
  • Evenly Divided ... グループ化したとき、Statistic の幅を均等に割り振る
  • Floated ... 左右どちらかで Statistic の配置を指定
  • Size ... 値のサイズを指定する

最近ずっと同じようなこと書いてたけど、やりたいことがこれじゃない感。さっさと切り上げるため、Views の残りをまとめて書いた。

Semantic UI Doc ( Views - Advertisement ) を読む

css

Semantic UI の Advertisement を読んだ。広告（Advertisement）にテーマはない。

この Semantic UI の View は広告を表示するときに使う。たとえば AdSense 広告などに対応しているようだ。

CSS のスタイルはというとこんなふうになっており、ほとんど枠の指定と周囲の余白指定だけがされている。枠のサイズに関しては、モバイルの場合 Viewport のサイズに基づいて自動的に縮小される。

.ui[class*="medium rectangle"].ad {
    width: 300px;
    height: 250px;
}

.ui.ad {
    display: block;
    overflow: hidden;
    margin: 1em 0;
}

ページの中央に表示するなど、サイト内での広告の配置を指定するためのクラスも用意されている。

広告を広告らしく見せるためにスタイルを用意することはあるので、このようにあらかじめ広告用のクラスが設定されているのはありがたいと思った。

Semantic UI Doc ( Collections - Table ) を読む

css

Semantic UI の Table を読んだ。テーブルにテーマは 4 個ある。

テーブルは基本的に項目とそれに紐づくデータの集合であり、情報を構造的に見せたいときに使う。Semantic UI のテーブルは、モバイルサイズになると自動的にコンテンツが縦に並ぶように設計されている。

テーブルはタイトルやテキスト文章、アイコンや画像など、様々なコンテンツを内包することができる。また、テーブルの最初の列を項目名として使うこともできる。それ以外にも、ひとつの行に複数の値をネストさせるなど、より構造的なテーブルにすることもできる。色々できる。

状態に関するスタイルはいくつかある。

  • ポジティブ ... デフォルトでは背景・文字・アイコンが緑色になる
  • ネガティブ ... 背景・文字・アイコンが赤くなる
  • 警告 ... 背景・文字・アイコンが黄色くなる
  • アクティブ ... 背景・アイコンがグレーになる
  • 非アクティブ ... 文字が薄くなる

以下のように見た目のカスタマイズもできる。

  • 列の幅を等幅に揃えた見た目
  • 列と列の間に線を敷いた見た目
  • マウスオーバーしたときにテーブルの行をハイライトする見た目
  • 垂直・水平方向の書式方向を指定した見た目
  • ストライプ模様のように行の背景色を交互に変えた見た目
  • 枠線を取り払った見た目
  • 列の幅を指定した見た目
  • テーブル最上部に色付きボーダーをつけた見た目
  • 反転色の見た目
  • 背景色を指定した見た目
  • テーブル全体のサイズを指定した見た目

また、項目名をクリックしたときにデータの並び順を変えるなど、ユーザー操作による挙動を追加することもできる。

細かいカスタマイズもできるし、Semantic UI のテーブルは扱いやすそうだと思った。

CSS 関連の記事を眺めて

css

ぼんやりしてる今日この頃。夏の生ぬるい風を感じながら「へー、うふふ」と思った CSS の記事をまとめる。

【増枠】Meguro.css #1 @ oRo

目黒で夜な夜な CSS 話がおこなわれているらしい。CSS in ERB in JS とかやってる人がいたっぽい。勉強会に興味があるけど、目黒か... 。

Material-UI v1 is out

React Component のテンプレートパッケージ（というのか？）。使わないとわからないけど気になる。

シャドウもグラデーションする

グラデーションした要素だからその影もグラデーションする、というのは的を得てるんじゃないかと思う。