CSS Nite in Kobe, vol.55「モダンコーディング：XDで作られたデータを元に実装工程のセミハンズオン」に参加してきました
先日開催されたCSS Nite in Kobe vol.55「モダンコーディング：XDで作られたデータを元に実装工程のセミハンズオン」に参加してきました。
vol.54の続きで、前回に作成したビジュアルデザインを元に、コーディングを行っていきます。
今回の登壇者
登壇者は株式会社ICSの鹿野 壮さんです。
ICS MEDIAでも数多くの記事を書いているインタラクションデザイナーの方です。
今回はXDでできたビジュアルデザインを確認しながら、XDで進行するウェブサイト制作フロー3回のうちの最後の回でした。
XDでは簡単にプロトタイプモードでアニメーションを付けたりできますが、最終的に実装するときはコードで実装する必要があります。
また、デザイン時にせっかくアセット機能を使って便利に管理していたとしても、コーディング側が知らずに実装していてはすごくもったいないです。
最近のCSSに触れつつ、XDのデザインカンプを見ながらコーディングのセミハンズオンを行いました。
CSSのレイアウト
ウェブのCSSレイアウトは2020年現在で下記3つの方法があります。
| レイアウト方法 | 特徴 | 備考 |
|---|---|---|
| float | 要素を回り込ませる役割 | レイアウトとしてはレスポンシブ対応が面倒なので、 現在は「テキストの回り込み」の本来の役割としての使用が良さそう |
| Flexbox | 指定した要素の直下にある要素を レイアウトする | 要素の中央揃えも簡単に実現できる 直線には強いが、複数行のレイアウトには弱い |
| CSS Grid | 列（column）と行（row）を指定して、 その中に要素を配置していく | 複数行のレイアウトに強く、HTMLの並びに依存しない自由なレイアウトが可能 ただし、書き方が特殊で初心者が見ると混乱しそう |
個人的には「どれが良い」というわけではなく、ケースバイケースでそれぞれの長所を活かして、目的の実装をするのが1番です。
使い分け
例外ももちろんありますが、自分の場合は下記のような考え方で使い分けています。
まず、CSS Gridの特徴は複数行のレイアウトに強かったり、かなり柔軟なレイアウトができるので、大枠のレイアウト作成や「カード」などが複数行になって並べられている場合はCSS Gridを使用します。
それ以外の横並びレイアウトはFlexboxを使用、テキストの回り込みが必要な場合はfloatを使用します。
- 「大枠のレイアウト」や「複数行に並べられるカード」はCSS Grid
- それ以外の普通の横並びレイアウトはFlexbox
- テキストの回り込みが必要な場合はfloat
XDのトランジション
XDのアニメーション時に設定するイージングは、下記のCSS Transitionに相当します。
| XD | CSS |
|---|---|
| なし | transition: 0.3s linear; |
| イーズイン | transition: 0.3s ease-in; |
| イーズアウト | transition: 0.3s ease-out; |
| イーズイン/アウト | transition: 0.3s ease-in-out; |
「スナップ」と「ワインドアップ」はEasing Functions Cheat Sheetで似たもので対応できますが、「バウンス」は完璧に再現しようとすると時間がかかってしまうので、あらかじめデザイナーさんと話し合っておく必要があります。
CSS関連の話
最新のCSSに関しても触れましたが、面白かったのがCSS変数です。
下記の記述方法で定義して使います。
--main-color: #fff;使うときはvar()関数で呼び出します。
element {
background-color: var(--main-color);
}もともと存在は知っていましたが、Sassの変数を使わずCSSの変数を使うメリットがいまいちピンと来ていませんでした。
（Sassの変数の場合は$を付けて定義・呼び出しができるので、記述量も少なくて済む）
ただ、ダークモードの対応のためにCSS変数を使えば、色をかなりラクに管理できそうです。
@media (prefers-color-scheme: dark) {
--main-color: #333;
}新しい技術を知っておかないと、いつの間にか視野が狭くなって「いままでのままでいいじゃん！」と何も考えずに面倒な方法に縛られることになります。
ブラウザ対応状況などの理由から最新の技術は使えなかったとしても、たまに目を通すのは大切だと改めて感じました。
