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

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

Transcript

1. 「いい感じ」にするための
   実践CSSテクニック
   Dreamweaverで学ぶ、
   世路庵　沖 良矢　|　2018.11.20 (Tue)
   

   View Slide

2. Webページを構成する技術
   

   View Slide

3. 本セッションで扱う話題
   

   View Slide

4. 沖 良矢
   おき よし や
   ・ インタラクションデザイナー
   ・ 受託制作一筋15年
   ・ 来年1月に大型案件リリース予定
   @448jp
   

   View Slide

5. View Slide

6. マッハバイト・シンギュラリティ駆逐度診断
   （2018）
   

   View Slide

7. View Slide

8. KASHIYAMA the Smart Tailor
   （2017）
   

   View Slide

9. （2002～2014） （2014～） （2014～）
   

   View Slide

10. コミュニティの力を信じている
    

    View Slide

11. 75年間 724人
    

    View Slide

12. 家族、友達、コミュニティと
    よく繋がっている人ほど
    幸せで身体的に健康である
    Robert Waldinger (2015)
    

    View Slide

13. CSS
    Cascading Style Sheet
    

    View Slide

14. 本日お話しすること
    Dreamweaver推し機能ベスト3
    「いい感じ」にするCSSテクニック
    サービス活用でステップアップ
    1
    2
    3
    

    View Slide

15. Dreamweaver推し機能ベスト3
    1
    

    View Slide

16. Emmet
    ⚫ コーディングを爆速化する省略記法
    ⚫ HTML/CSSの生成、編集で利用
    ⚫ Dreamweaver CC2017から標準搭載
    

    View Slide

17. クイック編集
    ⚫ HTMLから該当セレクタのCSSを直接編集
    ⚫ CSSのカラーコードやイージングも編集可能
    

    View Slide

18. Extract
    ⚫ Creative Cloudに置いたPSDをプレビュー
    ⚫ CSSやテキストを直接コピー可能
    ⚫ レイヤー別に画像を書き出せる
    

    View Slide

19. 「いい感じ」にするCSSテクニック
    2
    

    View Slide

20. 受託制作に伝わる
    魔法の言葉……
    Wonderful magic word
    

    View Slide

21. 「いい感じ」にしてください！
    Let's Ii Kanji!
    

    View Slide

22. 「いい感じ」とは何か
    善さ ＋ 好さ
    職人芸的な美しさを備える
    雰囲気や感覚を表わす
    参考：「FLASHerがこの先生きのこるには」https://qiita.com/alumican_net/items/f21170d68a686e59eab2
    ビジネス課題を解決する
    あるべき姿を表わす
    よ よ
    

    View Slide

23. 善さ
    ビジネス課題を解決する
    あるべき姿を表わす
    よ
    

    View Slide

24. Flexboxで上下の高さを揃える
    カード名が⼊ります
    親譲りの無鉄砲で⼩供の時から損ばかりしている。⼩学
    校に居る時分学校の⼆階から⾶び降りて⼀週間ほど腰を
    シェア
    609 120
    カード名が⼊ります
    親譲りの無鉄砲で⼩供の時から損ばかりしている。⼩学
    校に居る時分学校の⼆階から⾶び降りて⼀週間ほど腰を
    シェア
    609 120
    カード名が⼊ります
    親譲りの無鉄砲で⼩供の時から損ばかりしている。⼩学
    校に居る時分学校の⼆階から⾶び降りて⼀週間ほど腰を
    シェア
    609 120
    カード名が⼊ります
    親譲りの無鉄砲で⼩供の時から損ばかりしている。⼩学
    校に居る時分学校の⼆階から⾶び降りて⼀週間ほど腰を
    シェア
    609 120
    よくあるカード型UI（デザイン時）
    

    View Slide

25. Flexboxで上下の高さを揃える
    AdobeXD最新情報！新機能
    の使いこなしと今後の進化
    AdobeXDは、世界中のUI/UXデザインコミュニティと
    の膨⼤なディスカッションから得たアイデアをもとに、
    毎⽉の機能アップデートで進化し続けています。
    シェア
    609 120
    Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック
    CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。
    シェア
    609 120
    アドビビデオ製品最新情報
    映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。
    シェア
    609 120
    ProjectGemini徹底解説
    次世代のプロ向けデジタルスケッチアプリを、開発者が
    徹底解説します。
    シェア
    609 120
    実際のデータが入ると……
    

    View Slide

26. Flexboxで上下の高さを揃える
    AdobeXD最新情報！新機能
    の使いこなしと今後の進化
    AdobeXDは、世界中のUI/UXデザインコミュニティと
    の膨⼤なディスカッションから得たアイデアをもとに、
    毎⽉の機能アップデートで進化し続けています。
    シェア
    609 120
    Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック
    CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。
    シェア
    609 120
    アドビビデオ製品最新情報
    映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。
    シェア
    609 120
    ProjectGemini徹底解説
    次世代のプロ向けデジタルスケッチアプリを、開発者が
    徹底解説します。
    シェア
    609 120
    実際のデータが入ると……
    高さが揃わない
    

    View Slide

27. Flexboxで上下の高さを揃える
    AdobeXD最新情報！新機能
    の使いこなしと今後の進化
    AdobeXDは、世界中のUI/UXデザインコミュニティと
    の膨⼤なディスカッションから得たアイデアをもとに、
    毎⽉の機能アップデートで進化し続けています。
    シェア
    609 120
    Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック
    CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。
    シェア
    609 120
    アドビビデオ製品最新情報
    映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。
    シェア
    609 120
    ProjectGemini徹底解説
    次世代のプロ向けデジタルスケッチアプリを、開発者が
    徹底解説します。
    シェア
    609 120
    .list
    

    View Slide

28. Flexboxで上下の高さを揃える
    AdobeXD最新情報！新機能
    の使いこなしと今後の進化
    AdobeXDは、世界中のUI/UXデザインコミュニティと
    の膨⼤なディスカッションから得たアイデアをもとに、
    毎⽉の機能アップデートで進化し続けています。
    シェア
    609 120
    Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック
    CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。
    シェア
    609 120
    アドビビデオ製品最新情報
    映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。
    シェア
    609 120
    ProjectGemini徹底解説
    次世代のプロ向けデジタルスケッチアプリを、開発者が
    徹底解説します。
    シェア
    609 120
    フレックスアイテムは初期値で高さが揃う
    

    View Slide

29. 特定のフレックスアイテムを寄せる
    AdobeXD最新情報！新機能
    の使いこなしと今後の進化
    AdobeXDは、世界中のUI/UXデザインコミュニティと
    の膨⼤なディスカッションから得たアイデアをもとに、
    毎⽉の機能アップデートで進化し続けています。
    シェア
    609 120
    Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック
    CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。
    シェア
    609 120
    アドビビデオ製品最新情報
    映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。
    シェア
    609 120
    ProjectGemini徹底解説
    次世代のプロ向けデジタルスケッチアプリを、開発者が
    徹底解説します。
    シェア
    609 120
    シェア関連の要素は下に寄せたい
    

    View Slide

30. 特定のフレックスアイテムを寄せる
    AdobeXD最新情報！新機能
    の使いこなしと今後の進化
    AdobeXDは、世界中のUI/UXデザインコミュニティと
    の膨⼤なディスカッションから得たアイデアをもとに、
    毎⽉の機能アップデートで進化し続けています。
    シェア
    609 120
    Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック
    CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。
    シェア
    609 120
    アドビビデオ製品最新情報
    映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。
    シェア
    609 120
    ProjectGemini徹底解説
    次世代のプロ向けデジタルスケッチアプリを、開発者が
    徹底解説します。
    シェア
    609 120
    .list
    .card
    .share
    

    View Slide

31. 特定のフレックスアイテムを寄せる
    AdobeXD最新情報！新機能
    の使いこなしと今後の進化
    AdobeXDは、世界中のUI/UXデザインコミュニティと
    の膨⼤なディスカッションから得たアイデアをもとに、
    毎⽉の機能アップデートで進化し続けています。
    シェア
    609 120
    Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック
    CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。
    シェア
    609 120
    アドビビデオ製品最新情報
    映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。
    シェア
    609 120
    ProjectGemini徹底解説
    次世代のプロ向けデジタルスケッチアプリを、開発者が
    徹底解説します。
    シェア
    609 120
    .list
    .card
    .share
    

    View Slide

32. 要素の中身が空だったときの制御
    AdobeXD最新情報！新機能
    の使いこなしと今後の進化
    AdobeXDは、世界中のUI/UXデザインコミュニティと
    の膨⼤なディスカッションから得たアイデアをもとに、
    毎⽉の機能アップデートで進化し続けています。
    シェア
    609 120
    Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック
    CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。
    シェア
    609 120
    アドビビデオ製品最新情報
    映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。
    シェア
    609 120
    カードの中身が空だったときに処理を変えたい
    

    View Slide

33. 要素の中身が空だったときの制御
    AdobeXD最新情報！新機能
    の使いこなしと今後の進化
    AdobeXDは、世界中のUI/UXデザインコミュニティと
    の膨⼤なディスカッションから得たアイデアをもとに、
    毎⽉の機能アップデートで進化し続けています。
    シェア
    609 120
    Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック
    CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。
    シェア
    609 120
    アドビビデオ製品最新情報
    映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。
    シェア
    609 120
    カードの中身が空だったときに処理を変えたい
    :empty疑似クラス
    

    View Slide

34. 要素の中身が空だったときの制御
    AdobeXD最新情報！新機能
    の使いこなしと今後の進化
    AdobeXDは、世界中のUI/UXデザインコミュニティと
    の膨⼤なディスカッションから得たアイデアをもとに、
    毎⽉の機能アップデートで進化し続けています。
    シェア
    609 120
    Dreamweaverで学ぶ、
    「いい感じ」にするための
    実践CSSテクニック
    CSSを学ぶ過程で、「えっ、こんなことできたの？」と
    驚いたり、「なるほど、こう書けるのか！」と⽬から鱗
    が落ちたりした、という経験はないでしょうか。
    シェア
    609 120
    アドビビデオ製品最新情報
    映像制作を取り巻く環境が著しく変化している中で、ア
    ドビビデオ製品はいち早くアップデートや新機能を搭載
    し環境の変化にも対応し続けています。
    シェア
    609 120
    

    View Slide

35. リンクやボタンを無効化する
    ⚫ UIの変化など一時的に無効化したい
    ⚫ pointer-eventsプロパティで実装
    

    View Slide

36. 好さ
    職人芸的な美しさを備える
    雰囲気や感覚を表わす
    よ
    

    View Slide

37. タップ時に変化を出す
    ⚫ リンクやボタンをタップ時にスタイル変更
    ⚫ :hover疑似クラスは変化後のままになる
    ⚫ :active疑似クラスで実装
    

    View Slide

38. タップ時に変化を出す
    

    View Slide

39. font-smoothing
    ⚫ フォントのアンチエイリアシングを制御
    ⚫ macOSでのみ有効
    ⚫ 標準化された仕様ではない
    ⚫ -webkit-font-smoothing
    ⚫ -moz-osx-font-smoothing
    

    View Slide

40. macOS Sierra 10.12.6
    Safari 12.0.1
    

    View Slide

41. 指定なし
    subpixel-antialiased
    antialiased
    none
    -webkit-font-smoothingプロパティ
    

    View Slide

42. 指定なし
    antialiased
    

    View Slide

43. transition-timing-function
    ⚫ CSS Transitionsのイージングを指定
    ⚫ 指定できる値
    ⚫ ease
    ⚫ linear
    ⚫ ease-in
    ⚫ ease-out
    ⚫ ease-in-out
    ⚫ cubic-bezier()
    

    View Slide

44. Robert Pennerのイージング関数
    

    View Slide

45. サービス活用でステップアップ
    3
    

    View Slide

46. CSScomb
    ⚫ プロパティ順を一定のルールでソートする
    ⚫ gulpなどのタスクランナーからも利用可
    http://csscomb.com/online/
    

    View Slide

47. CSS Stats
    ⚫ CSSの中身を集計して表示する
    ⚫ 色、フォント、メディアクエリー等を一覧表示
    ⚫ あらゆるWebサイトのCSSを集計できる
    https://cssstats.com/
    

    View Slide

48. CSS Reference
    ⚫ 主なプロパティの各値をビジュアルで解説
    ⚫ 忘れがちなFlexboxやGridを分かりやすく
    把握できる
    https://cssreference.io/
    

    View Slide

49. Animista
    ⚫ CSSアニメーションをGUIで作成できる
    ⚫ 大量のサンプルが用意されている
    ⚫ 実際のコードも書き出せる
    http://animista.net/
    

    View Slide

50. まとめ
    

    View Slide

51. ⚫ 善さと好さの両立を意識しよう
    ⚫ あなたの前進がコミュニティを助ける
    ⚫ CSSを止めるな！
    

    View Slide

52. View Slide

53. コミュニティの力を信じている
    

    View Slide

54. DIST.24 「Re: Adobe MAX Japan 2018」
    日時：2018年11月30日（金）19:00〜
    場所：中野セントラルパーク カンファレンス
    B1F コンベンションホール
    出演：池田 泰延（ICS） 木村 哲朗（まぼろし）
    山下 大輔（Vook）
    

    View Slide

55. 沖 良矢　@448jp
    ありがとうございました
    

    View Slide

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
    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
    

    View Slide