WebDesigner's Memorandumりェブデザむナヌの備忘録

CSS Nite in Kobe, vol.55「モダンコヌディングXDで䜜られたデヌタを元に実装工皋のセミハンズオン」に参加しおきたした

CSS Nite in Kobe, vol.55「モダンコヌディングXDで䜜られたデヌタを元に実装工皋のセミハンズオン」に参加しおきたした

先日開催されたCSS Nite in Kobe vol.55「モダンコヌディングXDで䜜られたデヌタを元に実装工皋のセミハンズオン」に参加しおきたした。
vol.54の続きで、前回に䜜成したビゞュアルデザむンを元に、コヌディングを行っおいきたす。

Webrandum
CSS Nite in Kobe, vol.54「XDで䜜ったワむダヌフレヌムを元に制䜜するりェブビゞ...
https://webrandum.net/cssnite-kobe-54
先日開催されたCSS Nite in Kobe vol.54「XDで䜜ったワむダヌフレヌムを元に制䜜するりェブビゞュアルデザむンず粟床の高いプロトタむプをコヌダヌに枡すずきのポむントのセミハンズオン」に参加しおきたした。vol.53の続きで、前回䜜成したワむダヌフレヌムからビゞュアルデザむンをどのように行っおいくのかず、コヌダヌにデヌタを枡す䞊でのポむントを孊びたした。今回の登壇者登壇者は前回に匕き続きツキアカリの束䞋絵梚さんです。今回はXDを䜿っおビゞュアルデザむンず、その埌のコヌダヌぞの受け枡しが目的で、XDで進行するりェ...

今回の登壇者

登壇者は株匏䌚瀟ICSの鹿野 壮さんです。
ICS MEDIAでも数倚くの蚘事を曞いおいるむンタラクションデザむナヌの方です。

今回はXDでできたビゞュアルデザむンを確認しながら、XDで進行するりェブサむト制䜜フロヌ3回のうちの最埌の回でした。

  • vol.53「XDでワむダヌフレヌム・プロトタむプの䜜成」
  • vol.54「ワむダヌフレヌムをもずにXDでビゞュアルデザむンの䜜成」
  • vol.55「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に盞圓したす。

XDCSS
なし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;
}

新しい技術を知っおおかないず、い぀の間にか芖野が狭くなっお「いたたでのたたでいいじゃん」ず䜕も考えずに面倒な方法に瞛られるこずになりたす。

ブラりザ察応状況などの理由から最新の技術は䜿えなかったずしおも、たたに目を通すのは倧切だず改めお感じたした。

著者に぀いお

プロフィヌル画像

サむトり マサカズ@31mskz10

1997幎生たれ。2016幎から専門孊校でデザむンに぀いお勉匷。卒業埌は神戞の制䜜䌚瀟「N'sCreates」にりェブデザむナヌずしお入瀟。このブログでは自分の備忘録も兌ねお、りェブに関する蚘事や制䜜環境を効率的に行うための蚘事を曞いおいたす。

Twitterをフォロヌ Facebookでいいね