Semantic UI Doc ( Views - Card, Comment, Feed, Item, Statistic) を読む
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 ) を読む
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 ) を読む
Semantic UI の Table を読んだ。テーブルにテーマは 4 個ある。
テーブルは基本的に項目とそれに紐づくデータの集合であり、情報を構造的に見せたいときに使う。Semantic UI のテーブルは、モバイルサイズになると自動的にコンテンツが縦に並ぶように設計されている。
テーブルはタイトルやテキスト文章、アイコンや画像など、様々なコンテンツを内包することができる。また、テーブルの最初の列を項目名として使うこともできる。それ以外にも、ひとつの行に複数の値をネストさせるなど、より構造的なテーブルにすることもできる。色々できる。
状態に関するスタイルはいくつかある。
- ポジティブ ... デフォルトでは背景・文字・アイコンが緑色になる
- ネガティブ ... 背景・文字・アイコンが赤くなる
- 警告 ... 背景・文字・アイコンが黄色くなる
- アクティブ ... 背景・アイコンがグレーになる
- 非アクティブ ... 文字が薄くなる
以下のように見た目のカスタマイズもできる。
- 列の幅を等幅に揃えた見た目
- 列と列の間に線を敷いた見た目
- マウスオーバーしたときにテーブルの行をハイライトする見た目
- 垂直・水平方向の書式方向を指定した見た目
- ストライプ模様のように行の背景色を交互に変えた見た目
- 枠線を取り払った見た目
- 列の幅を指定した見た目
- テーブル最上部に色付きボーダーをつけた見た目
- 反転色の見た目
- 背景色を指定した見た目
- テーブル全体のサイズを指定した見た目
また、項目名をクリックしたときにデータの並び順を変えるなど、ユーザー操作による挙動を追加することもできる。
細かいカスタマイズもできるし、Semantic UI のテーブルは扱いやすそうだと思った。
CSS 関連の記事を眺めて
ぼんやりしてる今日この頃。夏の生ぬるい風を感じながら「へー、うふふ」と思った CSS の記事をまとめる。
目黒で夜な夜な CSS 話がおこなわれているらしい。CSS in ERB in JS とかやってる人がいたっぽい。勉強会に興味があるけど、目黒か... 。
React Component のテンプレートパッケージ（というのか？）。使わないとわからないけど気になる。
グラデーションした要素だからその影もグラデーションする、というのは的を得てるんじゃないかと思う。
CSS 関連の記事を眺めて
ウェブ開発を爆速に！人気オススメCSSフレームワーク厳選38個まとめ【2018年最新版】
38 個もあったのか。Propeller はかわいい見た目してるし、サードパーティ製のものも含めたらコンポーネントの数も豊富。Material Design Lite は本家 Google が開発元で（GitHub のリポジトリ所有者が Google）、マテリアルデザインのガイドラインに沿ってつくられていると聞いて興味津々。Flexbox を使ったグリッドや従来のグリッドが多い中、Smart CSS Grid は display: grid を使ったグリッドのようなので、このフレームワークを使う人は今後増えるかも。
幅広く活用出来るWebサイトテンプレートまとめ25「25 Best Free Website Templates For Launching Your Website Today」
CSS というわけじゃないけれど、覚えておくことで役に立ちそう。また、こういうテンプレートのつくりを見ておくことで普段の制作に活かせる部分も多いと思う。
透過されない PNG 画像や CSS ハックは懐かしい。残念なことに条件付きコメントは消し忘れで残っているのを今でもたまに見かける。
テーブルのレスポンシブ対応。モバイルでは thead の項目を text-shadow を使って反復表示、calc() で配置箇所を決定している。切り替わるテーブルの見た目は良いと思ったけど、見た目が HTML の構造と紐付かなくなるからイマイチかなぁ。同じ見た目で display: table を display: grid にするのはどうだろう。
CSS で絵を描いたりだとか、ヤバイやつ。
Semantic UI Doc ( Collections - Message ) を読む
Semantic UI の Message を読んだ。メッセージにテーマは 3 個ある。
メッセージはタイトルと文章が枠で囲まれた見た目をしていて、近くのコンテンツを説明するのに使う。
いくつかコンテンツのタイプがあり、タイトルと文章の通常メッセージに以下を追加・置き換えすることができる。
- リスト
- アイコン
- 閉じるボタン
また、状態に関するスタイルは hidden と visible の 2 つがある。
以下のように見た目のカスタマイズもいくつかできる。
- 地面から浮いてるような見た目
- 枠をコンテンツ自身の幅に絞った見た目
- 他のコンポーネントにくっつけた見た目
- 警告メッセージの見た目
- お知らせメッセージの見た目
- 成功メッセージの見た目
- エラーメッセージの見た目
- 様々なカラーバリエーション
- 様々なサイズバリエーション
ページコンテンツを冒頭で説明したり、フォームの注意書きを載せたりするのに使えそうだと思った。
Semantic UI Doc ( Collections - Menu ) を読む
Semantic UI の Menu を読んだ。メニューにテーマは 4 個ある。
Flexbox を使ったナビゲーションの集合コンポーネント。
ナビゲーションの見た目はいくつか変更でき、タブのような見た目、グローバルナビゲーションような見た目 、サイドナビゲーションのように縦に並んだ見た目などがある。
コードはこんな感じで、.menu コンテナーとその子要素 .item がある。またナビゲーションのアイテムに吹き出しをつけた見た目にするなど、アクティブ状態を示すためのクラスも用意されている。
<div class="ui three item menu"> <a class="active item">Editorials</a> <a class="item">Reviews</a> <a class="item">Upcoming Events</a> </div>
ナビゲーションにはタイトルの他、説明文章やフォームの入力欄、ボタンやリンクを含むことができる。ナビゲーションのアイテムをマウスオーバー（またはクリック）したとき、ドロップダウンリストやポップアップを表示することも可能。同じ階層のナビゲーションを 2 つ並べることもできる。あとはサブナビゲーションも。
状態は 2 つ用意されており、マウスオーバー状態とアクティブ状態にそれぞれスタイルが当てられている。
ページの最上部にナビゲーションを固定させたり、アイテムを縦に並べたり、反転色にしたり色をつけたり、アイテムのコンテンツをアイコンにしたり、他のコンポーネントにナビゲーションをくっつけて表示したり、オプションもたくさんある。
設定を工夫すればページネーションなどにも使えるコンポーネントなので、使いどころは多そうだ。
