# CSS Nite in Kobe, vol.55「モダンコーディング：XDで作られたデータを元に実装工程のセミハンズオン」に参加してきました

URL: https://webrandum.net/cssnite-kobe-55/
公開日: 2020-03-04
更新日: 2020-03-04
カテゴリー: セミナー・イベント
タグ: CSS, CSS Nite, XD
出典: Webrandum（著者: サイトウ マサカズ）

先日開催されたCSS Nite in Kobe vol.55「モダンコーディング：XDで作られたデータを元に実装工程のセミハンズオン」に参加してきました。

vol.54の続きで、前回に作成したビジュアルデザインを元に、コーディングを行っていきます。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2020/02/eyecatch-29.jpg)CSS Nite in Kobe, vol.54「XDで作ったワイヤーフレームを元に制作するウェブビジ...https://webrandum.net/cssnite-kobe-54先日開催されたCSS Nite in Kobe vol.54「XDで作ったワイヤーフレームを元に制作するウェブビジュアルデザインと精度の高いプロトタイプをコーダーに渡すときのポイントのセミハンズオン」に参加してきました。vol.53の続きで、前回作成したワイヤーフレームからビジュアルデザインをどのように行っていくのかと、コーダーにデータを渡す上でのポイントを学びました。今回の登壇者登壇者は前回に引き続きツキアカリの松下絵梨さんです。今回はXDを使ってビジュアルデザインと、その後のコーダーへの受け渡しが目的で、XDで進行するウェ...](https://webrandum.net/cssnite-kobe-54)

## 今回の登壇者

登壇者は株式会社ICSの鹿野 壮さんです。

[ICS MEDIA](https://ics.media/)でも数多くの記事を書いているインタラクションデザイナーの方です。

[![](https://www.google.com/s2/favicons?domain=ics.media)ICS MEDIA![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/a48487357d1f8a5d4a1f1e5a11a7b4f0367607baab739d5dff13f19f9799ea98.webp)ICS MEDIA - Webデザイナー/フロントエンジニアの必読メディアhttps://ics.mediaインタラクションデザインを得意とするWeb制作会社ICS(アイシーエス)の技術情報メディア。HTML5やCSS3、JavaScriptを中心とした業界最先端の情報や、学生や新社会人にわかりやすいと評判のWebデザイン入門記事を掲載。](https://ics.media)

今回はXDでできたビジュアルデザインを確認しながら、XDで進行するウェブサイト制作フロー3回のうちの最後の回でした。

- [vol.53](http://cssnite-kobe.jp/vol53/)「XDでワイヤーフレーム・プロトタイプの作成」

- [vol.54](http://cssnite-kobe.jp/vol54/)「ワイヤーフレームをもとにXDでビジュアルデザインの作成」

- [vol.55](http://cssnite-kobe.jp/vol55/)「XDで作られたデータを元にコーディング」

XDでは簡単にプロトタイプモードでアニメーションを付けたりできますが、最終的に実装するときはコードで実装する必要があります。

また、デザイン時にせっかくアセット機能を使って便利に管理していたとしても、コーディング側が知らずに実装していてはすごくもったいないです。

最近のCSSに触れつつ、XDのデザインカンプを見ながらコーディングのセミハンズオンを行いました。

## CSSのレイアウト

ウェブのCSSレイアウトは2020年現在で下記3つの方法があります。

| レイアウト方法 | 特徴 | 備考 |
| --- | --- | --- |

| float | 要素を回り込ませる役割 | レイアウトとしてはレスポンシブ対応が面倒なので、 現在は「テキストの回り込み」の本来の役割としての使用が良さそう |
| --- | --- | --- |

| Flexbox | 指定した要素の直下にある要素を レイアウトする | 要素の中央揃えも簡単に実現できる 直線には強いが、複数行のレイアウトには弱い |
| --- | --- | --- |

| CSS Grid | 列（column）と行（row）を指定して、 その中に要素を配置していく | 複数行のレイアウトに強く、HTMLの並びに依存しない自由なレイアウトが可能 ただし、書き方が特殊で初心者が見ると混乱しそう |
| --- | --- | --- |

個人的には「どれが良い」というわけではなく、ケースバイケースでそれぞれの長所を活かして、目的の実装をするのが1番です。

### 使い分け

例外ももちろんありますが、自分の場合は下記のような考え方で使い分けています。

まず、CSS Gridの特徴は複数行のレイアウトに強かったり、かなり柔軟なレイアウトができるので、大枠のレイアウト作成や「カード」などが複数行になって並べられている場合はCSS Gridを使用します。

それ以外の横並びレイアウトはFlexboxを使用、テキストの回り込みが必要な場合はfloatを使用します。

1. 「大枠のレイアウト」や「複数行に並べられるカード」はCSS Grid
2. それ以外の普通の横並びレイアウトはFlexbox
3. テキストの回り込みが必要な場合は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](https://easings.net/)で似たもので対応できますが、「バウンス」は完璧に再現しようとすると時間がかかってしまうので、あらかじめデザイナーさんと話し合っておく必要があります。

## 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;
}
```

新しい技術を知っておかないと、いつの間にか視野が狭くなって「いままでのままでいいじゃん！」と何も考えずに面倒な方法に縛られることになります。

ブラウザ対応状況などの理由から最新の技術は使えなかったとしても、たまに目を通すのは大切だと改めて感じました。