Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Webページを構成する技術

Slide 3

Slide 3 text

本セッションで扱う話題

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

KASHIYAMA the Smart Tailor （2017）

Slide 9

Slide 9 text

（2002～2014） （2014～） （2014～）

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

75年間 724人

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

CSS Cascading Style Sheet

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Dreamweaver推し機能ベスト3 1

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

タップ時に変化を出す

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

macOS Sierra 10.12.6 Safari 12.0.1

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

指定なし antialiased

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Robert Pennerのイージング関数

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

まとめ

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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