Dreamweaverで学ぶ、「いい感じ」にするための実践CSSテクニック

2018年11月20日（火）Adobe MAX Japan 2018発表資料

Transcript

1. 「いい感じ」にするための 実践CSSテクニック Dreamweaverで学ぶ、 世路庵　沖 良矢　|　2018.11.20 (Tue)
2. Webページを構成する技術
3. 本セッションで扱う話題
4. 沖 良矢 おき よし や ・ インタラクションデザイナー ・ 受託制作一筋15年 ・ 来年1月に大型案件リリース予定 @448jp
6. マッハバイト・シンギュラリティ駆逐度診断 （2018）
8. KASHIYAMA the Smart Tailor （2017）
9. （2002～2014） （2014～） （2014～）
10. コミュニティの力を信じている
11. 75年間 724人
12. 家族、友達、コミュニティと よく繋がっている人ほど 幸せで身体的に健康である Robert Waldinger (2015)
13. CSS Cascading Style Sheet
14. 本日お話しすること Dreamweaver推し機能ベスト3 「いい感じ」にするCSSテクニック サービス活用でステップアップ 1 2 3
15. Dreamweaver推し機能ベスト3 1
16. Emmet ⚫ コーディングを爆速化する省略記法 ⚫ HTML/CSSの生成、編集で利用 ⚫ Dreamweaver CC2017から標準搭載
17. クイック編集 ⚫ HTMLから該当セレクタのCSSを直接編集 ⚫ CSSのカラーコードやイージングも編集可能
18. Extract ⚫ Creative Cloudに置いたPSDをプレビュー ⚫ CSSやテキストを直接コピー可能 ⚫ レイヤー別に画像を書き出せる
19. 「いい感じ」にするCSSテクニック 2
20. 受託制作に伝わる 魔法の言葉…… Wonderful magic word
21. 「いい感じ」にしてください！ Let's Ii Kanji!
22. 「いい感じ」とは何か 善さ ＋ 好さ 職人芸的な美しさを備える 雰囲気や感覚を表わす 参考：「FLASHerがこの先生きのこるには」https://qiita.com/alumican_net/items/f21170d68a686e59eab2 ビジネス課題を解決する あるべき姿を表わす よ よ
23. 善さ ビジネス課題を解決する あるべき姿を表わす よ
24. Flexboxで上下の高さを揃える カード名が⼊ります 親譲りの無鉄砲で⼩供の時から損ばかりしている。⼩学 校に居る時分学校の⼆階から⾶び降りて⼀週間ほど腰を シェア 609 120 カード名が⼊ります 親譲りの無鉄砲で⼩供の時から損ばかりしている。⼩学 校に居る時分学校の⼆階から⾶び降りて⼀週間ほど腰を シェア 609 120 カード名が⼊ります 親譲りの無鉄砲で⼩供の時から損ばかりしている。⼩学 校に居る時分学校の⼆階から⾶び降りて⼀週間ほど腰を シェア 609 120 カード名が⼊ります 親譲りの無鉄砲で⼩供の時から損ばかりしている。⼩学 校に居る時分学校の⼆階から⾶び降りて⼀週間ほど腰を シェア 609 120 よくあるカード型UI（デザイン時）
25. Flexboxで上下の高さを揃える Adobe
    XD最新情報！
    新機能
    の使いこなしと今後の進化 Adobe
    XDは、世界中のUI/UXデザインコミュニティと の膨⼤なディスカッションから得たアイデアをもとに、 毎⽉の機能アップデートで進化し続けています。 シェア 609 120 Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。 シェア 609 120 アドビビデオ製品最新情報 映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。 シェア 609 120 Project
    Gemini徹底解説 次世代のプロ向けデジタルスケッチアプリを、開発者が
    徹底解説します。 シェア 609 120 実際のデータが入ると……
26. Flexboxで上下の高さを揃える Adobe
    XD最新情報！
    新機能
    の使いこなしと今後の進化 Adobe
    XDは、世界中のUI/UXデザインコミュニティと の膨⼤なディスカッションから得たアイデアをもとに、 毎⽉の機能アップデートで進化し続けています。 シェア 609 120 Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。 シェア 609 120 アドビビデオ製品最新情報 映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。 シェア 609 120 Project
    Gemini徹底解説 次世代のプロ向けデジタルスケッチアプリを、開発者が
    徹底解説します。 シェア 609 120 実際のデータが入ると…… 高さが揃わない
27. Flexboxで上下の高さを揃える Adobe
    XD最新情報！
    新機能
    の使いこなしと今後の進化 Adobe
    XDは、世界中のUI/UXデザインコミュニティと の膨⼤なディスカッションから得たアイデアをもとに、 毎⽉の機能アップデートで進化し続けています。 シェア 609 120 Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。 シェア 609 120 アドビビデオ製品最新情報 映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。 シェア 609 120 Project
    Gemini徹底解説 次世代のプロ向けデジタルスケッチアプリを、開発者が
    徹底解説します。 シェア 609 120 .list
28. Flexboxで上下の高さを揃える Adobe
    XD最新情報！
    新機能
    の使いこなしと今後の進化 Adobe
    XDは、世界中のUI/UXデザインコミュニティと の膨⼤なディスカッションから得たアイデアをもとに、 毎⽉の機能アップデートで進化し続けています。 シェア 609 120 Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。 シェア 609 120 アドビビデオ製品最新情報 映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。 シェア 609 120 Project
    Gemini徹底解説 次世代のプロ向けデジタルスケッチアプリを、開発者が
    徹底解説します。 シェア 609 120 フレックスアイテムは初期値で高さが揃う
29. 特定のフレックスアイテムを寄せる Adobe
    XD最新情報！
    新機能
    の使いこなしと今後の進化 Adobe
    XDは、世界中のUI/UXデザインコミュニティと の膨⼤なディスカッションから得たアイデアをもとに、 毎⽉の機能アップデートで進化し続けています。 シェア 609 120 Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。 シェア 609 120 アドビビデオ製品最新情報 映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。 シェア 609 120 Project
    Gemini徹底解説 次世代のプロ向けデジタルスケッチアプリを、開発者が
    徹底解説します。 シェア 609 120 シェア関連の要素は下に寄せたい
30. 特定のフレックスアイテムを寄せる Adobe
    XD最新情報！
    新機能
    の使いこなしと今後の進化 Adobe
    XDは、世界中のUI/UXデザインコミュニティと の膨⼤なディスカッションから得たアイデアをもとに、 毎⽉の機能アップデートで進化し続けています。 シェア 609 120 Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。 シェア 609 120 アドビビデオ製品最新情報 映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。 シェア 609 120 Project
    Gemini徹底解説 次世代のプロ向けデジタルスケッチアプリを、開発者が
    徹底解説します。 シェア 609 120 .list .card .share
31. 特定のフレックスアイテムを寄せる Adobe
    XD最新情報！
    新機能
    の使いこなしと今後の進化 Adobe
    XDは、世界中のUI/UXデザインコミュニティと の膨⼤なディスカッションから得たアイデアをもとに、 毎⽉の機能アップデートで進化し続けています。 シェア 609 120 Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。 シェア 609 120 アドビビデオ製品最新情報 映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。 シェア 609 120 Project
    Gemini徹底解説 次世代のプロ向けデジタルスケッチアプリを、開発者が
    徹底解説します。 シェア 609 120 .list .card .share
32. 要素の中身が空だったときの制御 Adobe
    XD最新情報！
    新機能
    の使いこなしと今後の進化 Adobe
    XDは、世界中のUI/UXデザインコミュニティと の膨⼤なディスカッションから得たアイデアをもとに、 毎⽉の機能アップデートで進化し続けています。 シェア 609 120 Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。 シェア 609 120 アドビビデオ製品最新情報 映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。 シェア 609 120 カードの中身が空だったときに処理を変えたい
33. 要素の中身が空だったときの制御 Adobe
    XD最新情報！
    新機能
    の使いこなしと今後の進化 Adobe
    XDは、世界中のUI/UXデザインコミュニティと の膨⼤なディスカッションから得たアイデアをもとに、 毎⽉の機能アップデートで進化し続けています。 シェア 609 120 Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。 シェア 609 120 アドビビデオ製品最新情報 映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。 シェア 609 120 カードの中身が空だったときに処理を変えたい :empty疑似クラス
34. 要素の中身が空だったときの制御 Adobe
    XD最新情報！
    新機能
    の使いこなしと今後の進化 Adobe
    XDは、世界中のUI/UXデザインコミュニティと の膨⼤なディスカッションから得たアイデアをもとに、 毎⽉の機能アップデートで進化し続けています。 シェア 609 120 Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。 シェア 609 120 アドビビデオ製品最新情報 映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。 シェア 609 120
35. リンクやボタンを無効化する ⚫ UIの変化など一時的に無効化したい ⚫ pointer-eventsプロパティで実装
36. 好さ 職人芸的な美しさを備える 雰囲気や感覚を表わす よ
37. タップ時に変化を出す ⚫ リンクやボタンをタップ時にスタイル変更 ⚫ :hover疑似クラスは変化後のままになる ⚫ :active疑似クラスで実装
38. タップ時に変化を出す
39. font-smoothing ⚫ フォントのアンチエイリアシングを制御 ⚫ macOSでのみ有効 ⚫ 標準化された仕様ではない ⚫ -webkit-font-smoothing ⚫ -moz-osx-font-smoothing
40. macOS Sierra 10.12.6 Safari 12.0.1
41. 指定なし subpixel-antialiased antialiased none -webkit-font-smoothingプロパティ
42. 指定なし antialiased
43. transition-timing-function ⚫ CSS Transitionsのイージングを指定 ⚫ 指定できる値 ⚫ ease ⚫ linear ⚫ ease-in ⚫ ease-out ⚫ ease-in-out ⚫ cubic-bezier()
44. Robert Pennerのイージング関数
45. サービス活用でステップアップ 3
46. CSScomb ⚫ プロパティ順を一定のルールでソートする ⚫ gulpなどのタスクランナーからも利用可 http://csscomb.com/online/
47. CSS Stats ⚫ CSSの中身を集計して表示する ⚫ 色、フォント、メディアクエリー等を一覧表示 ⚫ あらゆるWebサイトのCSSを集計できる https://cssstats.com/
48. CSS Reference ⚫ 主なプロパティの各値をビジュアルで解説 ⚫ 忘れがちなFlexboxやGridを分かりやすく 把握できる https://cssreference.io/
49. Animista ⚫ CSSアニメーションをGUIで作成できる ⚫ 大量のサンプルが用意されている ⚫ 実際のコードも書き出せる http://animista.net/
50. まとめ
51. ⚫ 善さと好さの両立を意識しよう ⚫ あなたの前進がコミュニティを助ける ⚫ CSSを止めるな！
53. コミュニティの力を信じている
54. DIST.24 「Re: Adobe MAX Japan 2018」 日時：2018年11月30日（金）19:00〜 場所：中野セントラルパーク カンファレンス B1F コンベンションホール 出演：池田 泰延（ICS） 木村 哲朗（まぼろし） 山下 大輔（Vook）
55. 沖 良矢　@448jp ありがとうございました
56. Licensed under the CC-by 3.0 https://creativecommons.org/licenses/by/3.0/deed.ja Official HTML5 logo by W3C. CSS3 logo by Rudloff. Licensed under the MIT license https://opensource.org/licenses/mit-license.php JavaScript logo Copyright (c) 2011 Christopher Williams <chris@iterativedesigns.com> Quote Robert Waldinger https://www.ted.com/talks/robert_waldinger_what_makes_a_good_life_lessons_from_the_longest_study_on_happiness?language=ja CREDIT