nlog

とめどなく流れるよだれ

Sketch でシンボルをつくるときの命名やレイヤーの扱い

Sketch でシンボルつくるときに迷うことが多いので、今のつくり方を少しづつ残していく活動。 シンボルの命名 ライブラリー名/コンポーネント名(ページ名)/コンポーネントの構成要素名 にしてる。 ライブラリー名はライブラリーが複数ある場合に使う 例)m…

Semaitic UI でサイトヘッダーをつくる

Semantic UI の Container、Menu 、Image 、Search 、Icon 、Button などを使ってサイトヘッダーをつくった。 本当はフィードみたいなものまでつくり切りたかったけど全然進まなかった。思いの外大変だ。 HTML はつぎのようになっている。Container と Menu …

CSS 関連の記事を眺めて

css

マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法 すべてのコンポーネントの周囲に padding を持たせて設計することを提案している。均等な余白が向いているのはアプリケーションかな。コンポーネントの周囲…

Semantic UI Doc ( Modules - Sidebar, Sticky, Tab, Transition ) を読む

css

Semantic UI の Sidebar、Sticky、Tab、Transition を読んだ。 JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。 Sidebar テーマはない。Sidebar はページのナビゲーションを見えないところに隠してお…

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

css

Semantic UI の Progress、Rating、Search、Shape を読んだ。 JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。 Progress テーマは 4 つ。タスクの進行状況を伝えたいときに使う。 .ui.progress で指…

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

css

Semantic UI の Embed、Modal、Nag、Popup を読んだ。 JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。 Embed テーマはない。Embed は YouTube や Google Maps のような外部コンテンツをサイトんい貼…

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

css

Semantic UI の Accordion、Checkbox、Dimmer、Dropdown を読んだ。 JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。 Accordion テーマは 2 つ。Accordion は開閉コンテンツを表示するのに使う。 .ui…

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 でグループ化する。Flexb…

Semantic UI Doc ( Views - Advertisement ) を読む

css

Semantic UI の Advertisement を読んだ。広告(Advertisement)にテーマはない。 この Semantic UI の View は広告を表示するときに使う。たとえば AdSense 広告などに対応しているようだ。 CSS のスタイルはというとこんなふうになっており、ほとんど枠の…

Semantic UI Doc ( Collections - Table ) を読む

css

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

CSS 関連の記事を眺めて

css

ぼんやりしてる今日この頃。夏の生ぬるい風を感じながら「へー、うふふ」と思った CSS の記事をまとめる。 【増枠】Meguro.css #1 @ oRo 目黒で夜な夜な CSS 話がおこなわれているらしい。CSS in ERB in JS とかやってる人がいたっぽい。勉強会に興味がある…

CSS 関連の記事を眺めて

css

ウェブ開発を爆速に!人気オススメCSSフレームワーク厳選38個まとめ【2018年最新版】 38 個もあったのか。Propeller はかわいい見た目してるし、サードパーティ製のものも含めたらコンポーネントの数も豊富。Material Design Lite は本家 Google が開発元で…

Semantic UI Doc ( Collections - Message ) を読む

css

Semantic UI の Message を読んだ。メッセージにテーマは 3 個ある。 メッセージはタイトルと文章が枠で囲まれた見た目をしていて、近くのコンテンツを説明するのに使う。 いくつかコンテンツのタイプがあり、タイトルと文章の通常メッセージに以下を追加・…

Semantic UI Doc ( Collections - Menu ) を読む

css

Semantic UI の Menu を読んだ。メニューにテーマは 4 個ある。 Flexbox を使ったナビゲーションの集合コンポーネント。 ナビゲーションの見た目はいくつか変更でき、タブのような見た目、グローバルナビゲーションような見た目 、サイドナビゲーションのよ…

デザイン原則をつくって「私たちが考える良いデザイン」を揃える

「デザインシステムを学ぶ 31 日」の 3 日目。今回はデザインシステムの前準備、デザイン原則について。 なぜデザイン原則は必要? チームでデザインの善し悪しを判断するためにデザイン原則は必要だ。同じチーム内でもいろんな考え方を持つ人がいる中、原則…

Semantic UI Doc ( Collections - Grid ) を読む

css

Semantic UI の Grid を読んだ。グリッドにテーマはない。 グリッドはサイトのレイアウトを格子状に整理して並べるのに利用する。CSS の技術としては Flexbox を使っており、グリッドのセル同士の余白は padding を利用して空けている。また、セルの持つ余白…

デザインシステムとは

昨日に続いて 「デザインシステムを学ぶ 31 日」の 2 日目。 デザインシステムとは ブランドやプロダクトの一貫性を保つため、デザインをシステム化したもの。UI ライブラリー、フレームワーク、スタイルガイド、文章ガイドライン、ワークフローなどはこのシ…

CSS 関連の記事を眺めて

css

ワンランク上のコーダーは万が一の配慮も欠かさない、リンク切れの画像要素をスタイルするテクニック - コリス つい最近考えることがあった。パスの入力ミスや影響範囲の確認漏れはないほうが良いけど、絶対ないとは言い切れない。そういったときにリンク切…

デザインシステムを学ぶ宣言と、今感じるデザインシステムのメリット・デメリット

「デザインシステムを学ぶ 31 日」の 1 日目。 1人design system advent calender を見てやる気が湧いたから、「デザインシステムを学ぶ 31 日」という連載をやる。記事は毎日 17:00 毎日 17:00 以降に投稿予定。 個人・チームともにデザインシステムの必要…

Semantic UI Doc ( Collections - Form ) を読む

css

Semantic UI の Form を読んだ。フォーム にテーマは 4 個ある。 フォームは項目と入力フィールドのセットを構造化して見せるのに役立つ コンテンツには項目と入力フィールドをセットで表示する Field と、Field のグループを表示する Fields 、そして各入力…

Semantic UI Doc ( Collections - Breadcrumb, Form ) を読む

css

Breadcrumb Semantic UI の Breadcrumb を読んだ。パンくずリストにテーマはない。 .ui.breadcrumb でパンくずリストを表示できる。リストアイテムの区切り記号はスラッシュだが、アイコンフォントなどで別の記号に変更することもできる。 リストアイテムは…

「The ustwo™ Pixel Perfect Precision Handbook 2 日本語版 」を読んだ

https://www.concentinc.jp/design_research/2014/01/pixel-perfect-precision-handbook-2-japanese/ ドキュメントが PDF というのが気に食わなかったけど、簡潔にまとめられた文章と説明のためにつけられたグラフィックは読みやすかった。 自分がなるほどな…

一人酒

めでたいことがあって一人店に入ってお酒を楽しんでる。飲み放題でガブガブと。 お酒の失敗がこの頃多かったから控えてたけど、やっぱり人生にお酒は必要だ。 複数人いるノリで最初に料理をいっぱい頼んじゃったけど順番に頼めばよかった。冷めちゃうんだね…

Semantic UI Doc ( Elements - Step ) を読む

css

Semantic UI の Step を読んだ。ステップにテーマは 3 個ある。 ステップは一連の行動の中で、自分が今どのポイントにいるかを示す。基本的にグループで使うことを想定してつくられている。 <div class="ui steps"> <div class="step"> ... </div> <div class="active step"> ... </div> <div class="disabled step"> ... </div> </div> .ui.ordered.steps で順序付きリストにする…

Semantic UI Doc ( Elements - Segment ) を読む

css

Semantic UI の Segment を読んだ。セグメントにテーマは 2 個ある。 セグメントは関連コンテンツのグループをつくるのに使う。いくつかタイプがあり、「Raised」はページの上に浮遊しているような表示に、「Stacked」は複数のページが重なったような表示に…

Semantic UI Doc ( Elements - Rail, Reveal ) を読む

css

Rail Semantic UI の Rail を読んだ。レールにテーマはない。 レールはサイトのメインコンテンツに付随するオプションコンテンツを表示するのに使う。たとえば、ブログ記事がメインコンテンツで、前後の記事に移動するリンクがオプションコンテンツだ。 レー…

Semantic UI Doc ( Elements - Loader ) を読む

css

Semantic UI の Loader を読んだ。ローダーにテーマは 3 個ある。 ローダーはコンテンツが読み込み中であることを示すために使う。クルクル回るいつものアレを画像( CSS で描画されるが面倒なので画像と呼ぶ)だけで表示するか、テキストラベル付きで表示す…

Semantic UI Doc ( Elements - List ) を読む

css

Semantic UI の List を読んだ。リストにテーマはない。 リストは親要素に .ui.list をつけて表示する。div 要素でリストを表現する場合は、追加で子要素に .item を指定して表示する。リストは入れ子にすることができ、階層をつくりだせる。 div 要素で指定…

Semantic UI Doc ( Elements - Input, Label ) を読む

css

Input Semantic UI の Input を読んだ。入力欄にテーマは 2 個ある。 入力欄は以下のように、.ui.input コンテナーで input 要素を包んで表示する。 <div class="ui input"> <input type="text" placeholder="Search"> </div> フォーカス、読み込み中、入力無効、エラーなどいくつか状態をあらわすクラスがある。 また、見た目を変…

Semantic UI Doc ( Elements - Icon, Image ) を読む

css

Icon Semantic UI の Icon を読んだ。アイコンにテーマはない。 Semantic UI はアイコンを Font Awesome 5.0.8 のものを使い、アイコンフォントで表示する。 <i class="icon users"></i> アイコンには状態があり、無効な状態は i.disabled.icon、読み込み中の状態は i.icon.loading で…