nlog

とめどなく流れるよだれ

CSS 関連の記事を眺めて

css

ワンランク上のコーダーは万が一の配慮も欠かさない、リンク切れの画像要素をスタイルするテクニック - コリス

つい最近考えることがあった。パスの入力ミスや影響範囲の確認漏れはないほうが良いけど、絶対ないとは言い切れない。そういったときにリンク切れ画像にスタイルを定義しておけば余計に慌てずに済む。

CSS のポイントとしてはブラウザが標準で出してくるリンク切れ画像を擬似要素で置換してる点かな。これだけで見栄えがどっと変わる。リンク切れ画像は置換要素で外部からリソースが読み込まれるため、疑似要素が通常使えないみたいなので、スタイルを当てるときは注意が必要。

 

CSS Grid — Responsive layouts and components - Medium

縦横比の違う画像を上から順に敷き詰めたグリッドのつくり方解説。各ステップにイメージが差し込まれていてわかりやすいから、時間のあるときに試してみる。

 

コーディングをするときに鼻血がでるほど便利なwebツールリスト(随時更新予定) - Qiita 

書いたコードをさっと確認したいとき、コードレビュー中にコンパイル結果が知りたいときがあるから、SassMeister はきっと役に立つ。

 

5000人に聞いた、2018年最先端のフロントエンドツールはこれだ - Qiita

いくつか新しく知ったデータがあった。

  • Stylus、PostCSS の使用経験がある開発者はそれなりにいるが、現在利用している CSS ププロセッサーは Sass が断トツ多い。これは一回他のプリプロセッサーに心変わりしたけどやっぱり Sass に戻ってきたのか、これから試そうとして他のプリプロセッサーを見ているのかどっちだろう。多分前者だと思っている
  • フレームワークは Bootstrap が一番人気。ついでカスタム（自社フレームワーク？）。他には Foundation、Materialize、Bulma、Semantic UI、Pure CSS が使われている

CSS Gridベースのを作成できるジェネレーター・「CSS Grid Layout Interface Builder」 - kachibito

CSS グリッドのジェネレーター。あの難解なコードを書くのはつらいから、セルのサイズなどを決めて配置したい複雑なレイアウトをつくるのに重宝しそう。

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

design

「デザインシステムを学ぶ 31 日」の 1 日目。

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

個人・チームともにデザインシステムの必要性を感じていた。ガイドラインなどのドキュメントだけでは一貫したデザインを保ちづらいため、デザインとコードをより近づけるための仕組みがほしい。

まわりには同じ意見を持つ人もいて、そのためデザインシステムは一部進みつつある。しかし、自分でデザインシステムの全体像を把握できていないので、システムを完成させるまでの道のりで自分（または自分たち）が今どの地点にいるかわかっていない。今回の連載を通して、残りの作業を明確にし、今後のデザインのシステム化をスムーズに進めたい。

連載のゴール

個人のデザインのシステムはメリットが薄いと思うけど、練習を兼ねてつくる。

  • 学びながら個人（ @namikuguri ）のデザインのシステムをつくる
  • デザインのシステムについて学んだことをひとつにまとめる

連載前に感じるデザインシステムのメリット・デメリット

今感じているデザインシステムのメリット・デメリットをまとめる。一通り学んだあと、考えが変わった点はないか振り返る。もしかしたら学び終えたあと、デザインシステムは運用が大変だからいらない、となってるかもしれない。

  • メリット
    • 一貫性のあるデザインをユーザーに提供できる
    • 一貫性のあるデザインはデザインをつくりやすい
    • デザインをまとめることでエンジニアとのコミュニケーションコストを下げる
  • デメリット
    • 最初の仕組みづくりに時間がかかる
    • 本当に使えるシステムをつくるには触れる範囲が広く、デザイナーだけではおそらくつくれないので人手が必要
    • つくったシステムの保守・運用にコストがかかる

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 でパンくずリストを表示できる。リストアイテムの区切り記号はスラッシュだが、アイコンフォントなどで別の記号に変更することもできる。

リストアイテムは通常テキストかリンクテキストを含めることができ、またアイテムのアクティブ状態を示すためのクラスもある。

パンくずリストはサイズ変更もできる。

Form

Semantic UI の Form を読んだ。フォームにテーマは 4 個ある。

フォームは入力欄とラベルを構造的に見せるのに使う。

<form class="ui form">
  <div class="field">
    <label> ... </label>
    <input type="text" name="..." placeholder="...">
  </div>
  <div class="field">
    <div class="ui checkbox">
      <input type="checkbox" tabindex="0" class="hidden">
      <label> ... </label>
    </div>
  </div>
  <button class="ui button" type="submit"> ... </button>
</form>

上記には以下のフォーム部品が含まれている。

  • .ui.form
  • .field
  • .ui.checkbox

これら以外にもセレクトボックスや、トグル型のチェックボックスなどがある。

フォームフィールドにはラベルと入力欄を含むことができる。複数行のテキストは textarea 要素で表示することができ、高さは rows 属性で変更できる。チェックボックスやラジオボタン、ドロップダウンリストは JavaScript を使ってユーザーエージェントの見た目を変更することもできる。

状態もいくつかあり、読み込み中、フォーム入力の成功・エラー・警告、フォームの無効状態、読み取り専用の見た目のフォームなど。

フォームには見た目のバリエーションがあり、サイズを変更したり、入力欄の幅を調整したり、反転色の見た目にしたりできる。また、フォーム全体ではなく、フィールド（ .field ）やグループの見た目を変更するバリデーションクラスも用意されている。

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

https://www.concentinc.jp/design_research/2014/01/pixel-perfect-precision-handbook-2-japanese/

ドキュメントが PDF というのが気に食わなかったけど、簡潔にまとめられた文章と説明のためにつけられたグラフィックは読みやすかった。

自分がなるほどな、これは知らなかったなと思ったことをまとめた。普段 Sketch で Photoshop を使ってないから、ツール的なところは全然メモしてない。

  • きれいに整列されたデザインをつくるためにグリッドを使おう
  • 枠線を角丸で指定したとき、内側の角丸の半径について気を配ることがよくあるが、このときの半径の求め方として「線幅と角の半径を足す方法」または「線幅から角の半径を引く方法」があるのは知らなかった。この方法を使えば、内側の角を CSS などで汎用的に指定することが可能になりそう
  • 正三角形を描くとき、「横幅に対して高さを 86.6% にすると綺麗な正三角形に見える」というのを知らなかった。正確にはこの方法自体は知っていたが、縦幅の求め方（値）を知らなかった
  • 1 段落 5 行以内で！っていう提案があったけど、レスポンシブに表示されることを考えたら文字数で制限したほうがいいと思った。読みやすさのために、制限をつけること自体はいいと思う
  • たとえばページ内の注意書きの表示位置など、コンテンツを載せる順番を決めておくことは、ユーザーが知りたい情報をうまく見せるのに役立つ
  • フォームなど、ユーザーが行動を開始してから目標を達成するまでの最高ステップ数には制限をつけて決めていいかも。「いつになったら私がやりたいことができるの」とユーザーが思わないように
  • 何のページか明確にするためにタイトルは必要
  • ラベルは短い文章で的確に
  • タッチデバイスでもリンクを押せるエリアを十分確保しよう（この "十分" というのを正確な値でルール化するのが必要）
  • アプリケーションに慣れたユーザーにはリンクよりボタンのほうがアクション要素としてわかりやすい
  • ユーザーが何らかのアクションした際は反応を返そう。ユーザーが自分の取った行動を不安に思わないように
  • タイポグラフィを 3 点リーダーで短縮表示すると Example 1, Example 2 みたいなときにサフィックスが見れなくて困るから、省略するときは十分気をつけること
  • 色だけで要素の違いをつけることはしないこと。グラフなんかでも
  • 曲線にすると直線で同じ線幅にしたときより線が細く見えてしまう。こういったときは曲線と直線で同じ線幅に見えるように調整するため、線幅を直接調整するか、光彩で擬似的に見た目を整える

一人酒

diary

めでたいことがあって一人店に入ってお酒を楽しんでる。飲み放題でガブガブと。

お酒の失敗がこの頃多かったから控えてたけど、やっぱり人生にお酒は必要だ。

複数人いるノリで最初に料理をいっぱい頼んじゃったけど順番に頼めばよかった。冷めちゃうんだね、一人飲みに慣れてない。

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 で順序付きリストにすることもできるし、.ui.vertical.steps でステップを縦に並べて表示することもできる。

ステップに含めることができるコンテンツは、説明文、アイコン、リンクがある。

ステップは状態を持ち、アクティブ状態と、チェックマーク付きの完了状態、無効状態がある。

バリエーションもいくつかあり、ステップを横に並べて矢印でステップの方向を示す「Stackable」、幅いっぱいに表示する「Fluid」、ステップをコンテンツの上下にくっつける「Attached」、サイズのバリエーションなど。

ステップはフォームの進行状況をユーザーが確認したいときなどに使えそうだ。