nlog

とめどなく流れるよだれ

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

Sketch でシンボルつくるときに迷うことが多いので、今のつくり方を少しづつ残していく活動。

シンボルの命名

ライブラリー名/コンポーネント名(ページ名)/コンポーネントの構成要素名 にしてる。

f:id:namikuguri:20180621230414p:plain

  • ライブラリー名はライブラリーが複数ある場合に使う
    • 例)mobile/list/item, web/list/item
  • Sketch のページ名がコンポーネント名になるようにする
    • f:id:namikuguri:20180621230822p:plain
  • コンポーネントに構成要素がない場合は、要素名の代わりにコンポーネント名をいれる
    • 例)button/button
  • hover や active など、状態変化や見た目のバリエーション系のシンボルは、BEM の Modifier のように -- を使って名前をつける
    • 例)button/button--hover, button/button--large
  • Modifier をつくりすぎない
    • f:id:namikuguri:20180621233105p:plain
  • コンポーネント名やシンボルのパーツは、そのまま CSS に置き換えられる名前をつける

シンボルのレイヤー

  • Override するレイヤー名はカテゴリーに分けて絵文字をつける
    • 🖊label, 🎨background, 💈border, 🔶icon
  • Override するレイヤー名はコンポーネントを見なくても内容がわかるようにする
    • Override するレイヤーは名前がかぶらないようにする
    • 例)input コンポーネントであれば、🖊text と 🖊placeholder にするなど
  • Override したくないレイヤーはロックする

(余談)シンボル作成に使うプラグイン

普段からよく使うプラグインばかりだけど、以下のプラグインはシンボル作成時にとくによく使う。最近 Paddy を使うようになった。

  • Runner ... シンボルの呼び出し
  • Smartboards ... アートボードの整列
  • Rename It ... アートボードやレイヤー名の一括置換
  • Paddy ... シンボルに余白( padding )をつける

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

Semantic UI の Container、Menu 、Image 、Search 、Icon 、Button などを使ってサイトヘッダーをつくった。

f:id:namikuguri:20180529234531p:plain

本当はフィードみたいなものまでつくり切りたかったけど全然進まなかった。思いの外大変だ。

HTML はつぎのようになっている。Container と Menu でほとんどのレイアウトを決めて、あとはデザインに合わせて Button などのコンポーネントを使った。

<div class="ui fixed secondary menu pointing siteHeader">
  <div class="ui container">
    <div class="left menu">
      <a href="#" class="active item">
        <i class="icon home"></i>
        Home
      </a>
      ...
    </div>
    <a href="#" class="item">
      <img class="ui avatar image centered circular" src="logo.png" alt="">
    </a>
    <div class="right menu">
      <div class="item">
        <div class="ui search">
          <div class="ui icon input">
            <input class="prompt" type="text" placeholder="Search">
            <i class="search icon"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      <a href="#" class="item">
        <img class="ui avatar image centered circular" src="avatar.png" alt=""><!-- no image -->
      </a>
      <a class="ui item">
        <button class="ui primary button circular">Follow</button>
      </a>
    </div>
  </div>
</div>

サイトヘッダー内の配置を整えるために上書き用のスタイルは少しだけ書いた。

.siteHeader {
  $itemSize: 54px;

  .item {
    height: $itemSize; // ロゴやアバター画像とサイズを合わせる
  }
}

感想。

  • Semantic UI のスタイルは継承やセレクタが頻繁に使われていて詳細度が高く、スタイルを上書きするのがつらい
  • .ui.xxx という Semantic UI の書式とは別にして、上書き用の命名ルールがあるとスタイルが管理しやすくなりそう( .siteXxxx みたいな)
  • Semantic UI のドキュメント見ながらスタイル書くのがしんどいけど、こういうもんか

CSS 関連の記事を眺めて

マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法

すべてのコンポーネントの周囲に padding を持たせて設計することを提案している。均等な余白が向いているのはアプリケーションかな。コンポーネントの周囲に padding を持たせることで、コンポーネントの組み合わせごとに余白の設計をしなくて済むようになるというのが利点に思えた。けど、背景画像やボーダーをコンポーネントに持たせたいときに要素がひとつ増えてネストが増えることや、本来 margin の役割となる部分に padding を使ってるのがそもそも気になるので、あんまりこの提案には乗り気になれないな。

Pure CSS watch animation

信じられませんけど。

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

Semantic UI の SidebarStickyTabTransition を読んだ。

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

Sidebar

テーマはない。Sidebar はページのナビゲーションを見えないところに隠しておくのに使う。

.ui.sidebar で括られた要素はページの裏側に隠される。隠された要素はユーザーがボタンを押すなどアクションを起こしたときに表示される。

Sidebar の構造は Sidebar 自身(隠される要素)と Pusher (Sidebar を表示するアクション要素)の 2 つに分けられる。

見た目のバリエーションもあり、Sidebar を表示する場所をページの上下左右から選べる Direction と、Sidebar のサイズを指定する Width がある。

Sticky

テーマはない。Sticky はページをスクロールしたときに、途中で要素を固定して表示させたいときに使う。

.ui.sticky で指定した要素が上述したような Sticky の効果を得る。

Tab

テーマはない。Tab は Menu によってアクティブ化したコンテンツを表示するときに使う。

Tab は .ui.tab で指定する。メニューとコンテンツ部分は data-tab 属性でつなげる。

Tab はコンテンツが表示されたアクティブ状態と、コンテンツが表示される前の読み込み中の状態がある。

Transition

テーマはない。Transition はコンテンツを表示・非表示させるときに使う。

つぎのように jQuery で Transition の対象とアニメーションの内容を指定するみたい。

$('.autumn.leaf') // 対象
  .transition('scale') // アニメーションの内容
;

アニメーションの種類はたくさん用意されている。Transitions はコンテンツの表示・非表示をトグルし、Static Animations はコンテンツを表示したままアニメーションする。

  • Transitions
    • Scale
    • Zoom
    • Fade
    • Flip
    • Drop
    • Fly
    • Swing
    • Browse
    • Slide
  • Static Animations

また、Transition はアニメーションの種類だけでなく時間など細かい調整も可能。


Semantic UI のドキュメント読む旅がようやく終わった。途中からこれが CSS の記事なのか何なのかわからなくなったが、とにかく最後までやりきれてよかった。

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

Semantic UI の ProgressRatingSearchShape を読んだ。

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 ) を読む

Semantic UI の EmbedModalNagPopup を読んだ。

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

Embed

テーマはない。Embed は YouTubeGoogle 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 ) を読む

Semantic UI の AccordionCheckboxDimmerDropdown を読んだ。

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 ... ドロップダウンリストの中にドロップダウンリストを表示