CSS設計
CSS設計方法について
block, parts, structure, utility / かたまり、パーツ、構造、利用
SMACSS スマックス
カテゴリ分けして頭に識別用の文字をつける
・レイアウト（l-xxxx）ページの構造、関連性の低いブロック同士の区切り
・ブロック（b-xxxx）コンテンツとしてラベリングされるパーツの集まり
・パーツ（p-xxxx）アトミックまたはパーツの集合で中から小程度の部品
・アトミック（a-xxxx）最小の部品単位：ボタン（a-btn）
・ステータス（is-xxxx）状態を示す：（is-active, is-hidden,）
・ユーティリティ（u-xxxx）利便性のためのクラス
・ネーム（n-xxxx）個別指定のための名前、できればIDにする
CSS設計についての考え方
・知識、経験、考え方が違うと設計も違う。これを統一するのは難しい。
・統一しなくても運用に問題ない。
・いろいろな考え方が混在しているほうがいろいろわかる
・バラツキから担当者や実装時期がわかることがある
・一度決めたとしても、仕様や考え方も時間が経つと変化する
・他紙、他サイトを見てもそれぞれ仕様はバラバラで正解がない
・ルールを決める範囲と独自仕様でよい範囲をわける
・基本的なルール、曖昧な点だけ基準を設けておく
・構造と見た目のパターンを決めておく
・パーツは運用と汎用のバランスを考慮したうえでできるだけ大きな括りでパーツ化する
・フロント実装チームの共通認識を揃えるためのも
・LPなど一時的なページでは意識する必要ない、むしろ自由に新しい方法も試す
CSSフレームワーク
・独自の要件を反映しにくい
・使わない指定が多い
・デザインする際にCSSフレームワークを元にしていない
・全体像がつかめない、つかむには時間がかかる
・時間をかけずに均一なデザインを再現
・独自デザインには不向き
・PC-SPはテンプレート分けでレスポンシブではない
NG
・スタイルのプロパティ指定をクラス指定で代用するようなクラス名
例：class=”text-center”
フレームワーク：Tailwind CSS
参考フレームワーク
BULMA ブルマ
SMACSS スマックス
CSSを5つのカテゴリーに分類する
– Base – リセットCSSなど、サイト全体のスタイルを定義
– Layout – 位置に関する指定、頭に「l-」をつける
– Module – 再利用可能なパーツ、子要素の頭には親要素の名前をつける
– State – LayoutやModuleが変化した状態、頭に「is-」をつける
– Theme – 色などの見た目に関する指定、頭に「theme-」もしくは「t-」をつける
– 識別の名称
レイアウト（l-）
・セクション分け
・ヘッダー、フッター、コンテンツ、aside、
・カラム分け：１カラム、２カラム、、、
・ページ幅
・固定幅、全幅、、、
モジュール・パーツ（m-）
・タイトル、本文、記事リスト、パンくず、
種類（is-）
・選択、解除、フォーカス、、、
レイアウト
float, flex, center, left, right, width, height,
デザイン
border,color,font,background,
機能、見え方
scroll, overflow, hidden,
Page ＞ Section ＞ Block ＞ Module ＞ Parts
ページ：1画面の単位
セクション：ページの構成
ブロック：モジュールのかたまり
モジュール：部品の集まり
パーツ：部品
アトム：テキスト、線、など最小単位
技術面
・CSSカスタム変数：IE11未対応
・CSSスムーズスクロール：iOS未対応
・記述：適用範囲を限定する、子孫「 」（スペース）ではなく直下「>」
NG .hoge .piyo
OK .hoge > .piyo
デザインシステム
経営理念
デザイン概念
デザイン原則
・ガイドライン
・UXガイドライン
・デザインガイド
・デザインツール
・コンポーネントライブラリ
・スタイルガイド
・パターンライブラリ
・コーディングガイド
・トンマナガイド
・アニメーションガイド
・アトミックデザイン
デザインとコードの両方において一貫性があり、動的で、再利用可能で維持可能である
Classの命名方法
・大文字と小文字
・プレフィックスを付ける
・キャメル式
・バーで区切る、ハイフン、アンダーバー、１本２本
・短縮記号
・機械的な番号
HCDC：Human Centered Data Categorize
・制作者（人間）中心にコーディングを捉え、汎用性を意識した「分類」のこと
・block, parts, structure, utility
デザイン完成
分解
構造 レイアウト
部品 パーツ
要素 エレメント
分類
規則性 パターン
再利用性 パターン化する粒度
組み合わせた際の整合性
ルール決め
使用する単語
命名規則
スタイル指定の方法
モック制作
画像切り出し
コーディング
JSプログラム
CMS組み込み
PHPプログラム
テスト