Pro Yearly is on sale from $80 to $50! »

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

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

2018年11月20日(火)Adobe MAX Japan 2018発表資料

Cb42953bfedcd81daf5b1330d98712c3?s=128

448jp | OKI Yoshiya

November 20, 2018
Tweet

Transcript

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

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

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

  4. 沖 良矢 おき よし や ・ インタラクションデザイナー ・ 受託制作一筋15年 ・

    来年1月に大型案件リリース予定 @448jp
  5. None
  6. マッハバイト・シンギュラリティ駆逐度診断 (2018)

  7. None
  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で上下の高さを揃える AdobeXD最新情報!新機能 の使いこなしと今後の進化 AdobeXDは、世界中のUI/UXデザインコミュニティと の膨⼤なディスカッションから得たアイデアをもとに、 毎⽉の機能アップデートで進化し続けています。 シェア 609 120 Dreamweaverで学ぶ、

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

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

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

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

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

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

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

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

    「いい感じ」にするための 実践CSSテクニック CSSを学ぶ過程で、「えっ、こんなことできたの?」と 驚いたり、「なるほど、こう書けるのか!」と⽬から鱗 が落ちたりした、という経験はないでしょうか。 シェア 609 120 アドビビデオ製品最新情報 映像制作を取り巻く環境が著しく変化している中で、ア ドビビデオ製品はいち早くアップデートや新機能を搭載 し環境の変化にも対応し続けています。 シェア 609 120 カードの中身が空だったときに処理を変えたい :empty疑似クラス
  34. 要素の中身が空だったときの制御 AdobeXD最新情報!新機能 の使いこなしと今後の進化 AdobeXDは、世界中の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を止めるな!

  52. None
  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