Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

プログラム組んだら負け!実はHTML/CSSだけでできること2015夏

77 221 vues

Publié le

2015年7月25日 マカベン × HTML5fun のセッションで使用したスライドです。

Publié dans : Technologie
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Thanks for share your idea, We have also maintain a slide side of our company CPH Graphics Media - www.clippingpathhouse.com You may visit our site will be help by any way.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

プログラム組んだら負け!実はHTML/CSSだけでできること2015夏

  1. 1. @2015.07.25 マカベン HTML5fun
  2. 2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典(ひらお ゆうてん) === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs
  3. 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で 技術を共有する場です。          福岡のマークアップ          に携わる人たちの          ためのコミュニティ          です。 定期的にセミナーや、ミニ講座、座談会 などを行っています。通称「マカベン」。 福岡発の国産CMS「baserCMS」の ユーザー会および開発コミュニティです。 平尾も微力ながら開発に携わらせて頂いています。
  4. 4. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## つくったもの baserCMSプラグイン - BurgerEditor - Ace Editor for baserCMS jQueryプラグイン - baserJS - Psyborg - jquery.raderChart.js nodeモジュール - jaco - typed-table gulpプラグイン - gulp-xlsx2html
  5. 5. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## つくったもの baserCMSプラグイン - BurgerEditor - Ace Editor for baserCMS jQueryプラグイン - baserJS - Psyborg - jquery.raderChart.js nodeモジュール - jaco - typed-table gulpプラグイン - gulp-xlsx2html
  6. 6. 2015 Yusuke Hirao, CC BY-ND. プログラム組んだら負け! 実はHTML/CSSだけでできること
  7. 7. 2015 Yusuke Hirao, CC BY-ND. あれから5年...
  8. 8. 2015 Yusuke Hirao, CC BY-ND. あれから3年...
  9. 9. 2015 Yusuke Hirao, CC BY-ND. あれから1年...
  10. 10. 2015 Yusuke Hirao, CC BY-ND. ようやく...
  11. 11. 2015 Yusuke Hirao, CC BY-ND. HTML/CSSだけでできることが増えてきた 一旦、ここでおさらいをしましょう
  12. 12. 2015 Yusuke Hirao, CC BY-ND. アジェンダ 今日話すこと === - どんなプログラムを組んだら負けなのか - CSSのできる子たち - HTMLのできる子たち - まとめ
  13. 13. 2015 Yusuke Hirao, CC BY-ND. アジェンダ 今日話すこと === - どんなプログラムを組んだら負けなのか - CSSのできる子たち - HTMLのできる子たち - まとめ
  14. 14. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか
  15. 15. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ※はじめに === この話は、完全にプログラムを廃止して HTML/CSSのみでWebサイトを作成しようというものではありません。
  16. 16. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ※はじめに === この話は、完全にプログラムを廃止して HTML/CSSのみでWebサイトを作成しようというものではありません。 ## 伝えたいことは2点
  17. 17. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ※はじめに === この話は、完全にプログラムを廃止して HTML/CSSのみでWebサイトを作成しようというものではありません。 ## 伝えたいことは2点 - 無駄なプログラムを組まない - 役割を明確に
  18. 18. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ※はじめに === この話は、完全にプログラムを廃止して HTML/CSSのみでWebサイトを作成しようというものではありません。 ## 伝えたいことは2点 - 無駄なプログラムを組まない - 役割を明確に ←特にこっち
  19. 19. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか さて問題。これどう実装する? ===
  20. 20. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか さて問題。これどう実装する? === ## お題「トップページの新着情報の『New』アイコン」
  21. 21. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ## お題「トップページの新着情報の『New』アイコン」
  22. 22. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ## お題「トップページの新着情報の『New』アイコン」
  23. 23. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ## お題「トップページの新着情報の『New』アイコン」 負けコード!
  24. 24. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ## お題「トップページの新着情報の『New』アイコン」
  25. 25. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ## お題「トップページの新着情報の『New』アイコン」
  26. 26. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ## お題「トップページの新着情報の『New』アイコン」 A. プログラムにデザインの 要件が混ざっている 負けプログラム
  27. 27. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか プログラムにデザインの要件が混ざっている問題点 ===
  28. 28. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか プログラムにデザインの要件が混ざっている問題点 === ## プログラムが担う要件が増える - プログラムの仕様にデザインが含まれることになる - プログラマの仕事が増える ##「デザインの修正 = プログラムの修正」という恐怖 - プログラムがデザインに依存する - デザインの変更にプログラムが引っ張られる
  29. 29. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ##「デザインの修正 = プログラムの修正」という恐怖 - プログラムがデザインに依存する - デザインの変更にプログラムが引っ張られる Newアイコンの場所変更! ディレクター デザイナー Newアイコン変更 だそうです プログラマ やれやれ またか テストもしないと
  30. 30. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ##「デザインの修正 = プログラムの修正」という恐怖 - プログラムがデザインに依存する - デザインの変更にプログラムが引っ張られる Newアイコンの場所変更! ディレクター デザイナー Newアイコン変更 だそうです プログラマ やれやれ またか テストもしないと 非効率
  31. 31. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ##「デザインの修正 = プログラムの修正」という恐怖 - プログラムがデザインに依存する - デザインの変更にプログラムが引っ張られる - 会社をまたぐともっと大変 ちょ、何この請求?! デザインの変更なのに? ディレクター デザイナー Newアイコン変更の 請求だそうです パートナープログラマ あれだけ修正 したわけですからね ※あくまで例えなのでフィクションです。
  32. 32. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか では、どう実装するとよかったのか? ===
  33. 33. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか では、どう実装するとよかったのか? === A. CSSの擬似要素をつかう
  34. 34. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか では、どう実装するとよかったのか? === A. CSSの擬似要素をつかう
  35. 35. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか では、どう実装するとよかったのか? ===
  36. 36. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか では、どう実装するとよかったのか? === 場所を変えても...
  37. 37. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか では、どう実装するとよかったのか? === 変更なし
  38. 38. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ##「デザインの修正」のみで完結する - プログラムがデザインに依存しない - デザインの変更にプログラムが引っ張られない Newアイコンの場所変更! ディレクター デザイナー りょうかいでーす プログラマ ∼♪
  39. 39. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ##「デザインの修正」のみで完結する - プログラムがデザインに依存しない - デザインの変更にプログラムが引っ張られない Newアイコンの場所変更! ディレクター デザイナー りょうかいでーす プログラマ ∼♪ 未稼働!
  40. 40. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか 役割を明確にしよう === コードも役割が明確になっているほうがいい CGI PHP/Ruby/Java etc... HTML CSS コンテンツ・文書構造 装飾・デザイン状態・性質(属性)の制御
  41. 41. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか 役割を明確にしよう === CGI PHP/Ruby/Java etc... HTML CSS 7日以内の記事は time属性のコンテンツの 後ろに span要素で...(略
  42. 42. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか 役割を明確にしよう === CGI PHP/Ruby/Java etc... HTML CSS 7日以内の記事は time属性のコンテンツの 後ろに span要素で...(略 日付の【状態】 アイコンの位置
  43. 43. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか 役割を明確にしよう === CGI PHP/Ruby/Java etc... HTML CSS 7日以内の記事は time属性のコンテンツの 後ろに span要素で...(略 日付の【状態】 アイコンの位置 データのはなし 装飾のはなし
  44. 44. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか 役割を明確にしよう === CGI PHP/Ruby/Java etc... HTML CSS newクラスが付加されていたら time要素のafter擬似要素を 装飾する 7日以内の記事は newクラスを付加する 日付の【状態】 アイコンの位置
  45. 45. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか 役割を明確にしよう === CGI PHP/Ruby/Java etc... HTML CSS newクラスが付加されていたら time要素のafter擬似要素を 装飾する 7日以内の記事は newクラスを付加する 役割分担!
  46. 46. 2015 Yusuke Hirao, CC BY-ND. アジェンダ 今日話すこと === - どんなプログラムを組んだら負けなのか - CSSのできる子たち - HTMLのできる子たち - まとめ
  47. 47. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち
  48. 48. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち CSS === - セレクタ - background-size - multiple background - background-blend-mode - filter Effects - calc() - Flexible Box - Feature Queries - image-rendering - pointer-events (for HTML) - border-image - text-overflow - Transition / Animation - vw, vh, vmin, vmax Units
  49. 49. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ## セレクタ - 結合子 - > + ~ - 属性セレクタ - [attr] [attr=val] [attr$=val] etc... - 構造擬似クラス - :nth-child(n) :empty etc... - ユーザーアクション擬似クラス - :hover :focus :active - 擬似要素 - ::before ::after - などなど
  50. 50. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### 構造擬似クラス :nth-child(n) 説明不要の便利なヤツ。 プログラムから無駄なクラスを付けなくて済む。 (n)は整数以外にも (2n+1) のように if文で条件分岐するよりよっぽどわかりやすいロジックで書ける。
  51. 51. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### 構造擬似クラス :empty 要素が空である状態を表す セレクタ。 地味に使える。 ※スペース・改行は空とみなさない点は注意。 if文、不要
  52. 52. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### ユーザーアクション擬似クラス :hover JavaScripを使わずになるべくコレで済ましょう。 画像の置換はbackgroundで。 アニメーションはtransitionで。 パフォーマンス、レスポンシブ、メンテンナンス 理由はいろいろありますが、とにかくコレ使いましょう。
  53. 53. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### 擬似要素 ::before ::after CSSの一番すごいやつ。 要素の"中"にspan要素を入れたのと同等。 アイコン、ラベル、マーカー、擬似背景、 エラーメッセージ、アニメーションのエフェクトなんでもござれ。 ※要素の中なのでimgなどの空要素には無効なので注意。 ※DOM APIから参照できないのでイベントバインディングもできない。直接のインタラクティブ要素にはできない。
  54. 54. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち CSS === - セレクタ - background-size - multiple background - background-blend-mode - filter Effects - calc() - Flexible Box - Feature Queries - image-rendering - pointer-events (for HTML) - border-images - text-overflow - Transition / Animation - vw, vh, vmin, vmax Units
  55. 55. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### background-size background-size: contain; background-size: cover; フルードレイアウトに欠かせない背景伸縮。 windowのリサイズイベントで計算をガンガン実行するような、 そんなパフォーマンスの悪いこと不要。
  56. 56. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### Multiple background background: url(A),url(B),url(C); 背景画像を4枚まで同時指定が可能。 背景画像扱いになるグラデーションも同じく複数指定可能。 画像+グラデーションの組み合わせもOK。 余計なdivを用意する必要なし。 JavaScriptで背景用divを生成挿入する必要なし。
  57. 57. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### background-blend-mode background-blend-mode Photoshopのでいう描画モード処理。 ついにCSSで手軽にできるようになった。 canvas要素でJavaScriptで処理する必要もなし。 ※ただしMS Edgeを除くモダンブラウザに限る
  58. 58. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### filter Effects filter: greyscale(1); filter: blur(5px); etc... こちらもPhotoshop不要でCSSで手軽にできるようになった。 canvas要素でJavaScriptで処理する必要もなし。 最大の利点はtransitionでアニメーションできること。 ※ただしMS Edgeを除くモダンブラウザに限る
  59. 59. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### calc() width: calc(100% - 20px); CSS上で計算が可能に。 calcの最大の利点は相対値と絶対値を混ぜた計算が可能なこと。 相対値同士・絶対値同士ならSASSにやらせれば済むはなし。 windowのリサイズイベントで計算…という必要がなくなる。
  60. 60. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### Flexible Box order: 1; Flexible Boxの利点は、それはそれは沢山ありますが、 地味に便利なのが順番を入れ替えることが出来るコイツ。 レスポンシブデザインなどブレークポイントによって、 デバイスに合わせた順番に切り替えることができる。 プログラムなしで!
  61. 61. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### Feature Query @supports (width: 75vw) and (height: 50vh) { /* selector { prop: value; } */ } 条件のプロパティや値が有効であれば、ブロック内のセレクタを有効にする。 グレイスフル・デグラデーションやプログレッシブ・エンハンスメントの ポリシーで実装する際に非常に有効になる。 Modernizr.jsが不要になる。
  62. 62. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### image-rendering image-rendering: pixelated; ドット絵職人さん出番ですよ!! 画像を拡大させてもアンチエイリアスがかからないようにできる video要素にも適応できる。 canvas要素とJavaScriptなしで可能になる。
  63. 63. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### pointer-events (for HTML) pointer-events: none; もともとSVG側のCSSの技術。 一切のインタラクションを受け付けなくなる。 クリック・ホバー・選択などのコントロールをCSSでできる。 z-indexが手前の要素にかけて、後ろの要素にカーソルが 反応するようにできる。乱用注意。
  64. 64. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### border-image border-image: url(A) 1 1 1 1 fill stretch; IEの対応してなさと、フラットデザイン流行の りをうけて 最近はあまり必要とされていない可哀想な子。 画像を3x3分割してボーダー部分に画像を指定できる。 CSSらしい良くできた機能。SVGとの相性が良い。 時がくれば大活躍すること間違いなし。
  65. 65. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### text-overflow text-overflow: ellipsis; テキストがコンテナから れたら「...」を加えてくれるアレ。 プログラムでやろうとすると、文字列長での制限に妥協したり バイナリ探索で れるポイントを見つけたりと面倒。 プログラムの地味なウィークポイントでもあったが CSSでさっくりとできるようなった。※ただし1行に限るのが残念
  66. 66. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### Transition / Animation transition: color 300ms ease-in-out; animation: animName 300ms infinite alternate; CSS3の代名詞にもなったアニメーション機能。 状態変化をスムーズにつなげるのがtransition。 キーに沿って変化をさせるのがanimation。 装飾的アニメーションなら絶対こちらを使いたい。
  67. 67. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### Transition / Animation #### jQueryとCSSのアニメーションの違い アニメーションの 上書き 最終値の決定 jQuery キューの蓄積 目標値優先 CSS マージ 状態優先
  68. 68. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### Transition / Animation #### jQueryとCSSのアニメーションの違い http://codepen.io/YusukeHirao/pen/xGyqBj
  69. 69. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### Transition / Animation #### jQueryとCSSのアニメーションの違い jQuery: - キューをしっかり管理する必要がある場合 - アニメーションの終了を検知・保証して次の処理につなげる場合 CSS: - 状態変化を滑らかにしたい場合 - 単独のループアニメーションオブジェクトをつくる場合
  70. 70. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち ### vw, vh, vmin, vmax Units height: 56.25vw; vwはwindowの幅を100とした単位。 パーセント指定との違いは、 windowの"幅"基準をheightに設定できるということ。 JavaScriptを使わなくて済むのはもちろん、 padding-topのトリッキーなテクニックを使う必要もない。
  71. 71. 2015 Yusuke Hirao, CC BY-ND. アジェンダ 今日話すこと === - どんなプログラムを組んだら負けなのか - CSSのできる子たち - HTMLのできる子たち - まとめ
  72. 72. 2015 Yusuke Hirao, CC BY-ND. HTMLのできる子たち
  73. 73. 2015 Yusuke Hirao, CC BY-ND. HTMLのできる子たち HTML === - input types - placeholder属性 - progress要素 - Form Validation
  74. 74. 2015 Yusuke Hirao, CC BY-ND. HTMLのできる子たち ### input types <input type="date"> etc... HTML5の代表的機能のひとつ。 jQuery UIを使わなくてもデートピッカーがつかえる。 それぞれブラウザ対応や機能的に未熟なものが多く、 デザインのカスタマイズも難しいので、これからに期待。
  75. 75. 2015 Yusuke Hirao, CC BY-ND. HTMLのできる子たち ### placeholder属性 <input placeholder="入力してください"> フォーム要素の拡張で一番嬉しかったのがコレ。 未入力の時に任意の文字を表示できる。 label要素や見出し・補足テキストの代替として利用するケースで アクセシビリティ的に問題じゃないのか、という意見もある。 使い方注意。
  76. 76. 2015 Yusuke Hirao, CC BY-ND. HTMLのできる子たち ### progress要素 <progress value="90">fallback msg.</progress> HTML5の完全な新要素。新UI。 プログレスバーがJavaScriptなしで実装できる。 が、リアルタイムの進行変更などは完全にJavaScript任せに なるので、単体でのほとんど利用シーンはない。
  77. 77. 2015 Yusuke Hirao, CC BY-ND. HTMLのできる子たち ### Form Validation <input required pattern="[a-z0-9_-]+"> JavaScriptなしである程度のバリデーションが実装できる。 細かい仕様と、デザインを気にしなければ (デザインはCSSの擬似クラスがいずれ解決するかも) ほぼ完結させることができる。 ※サーバサイドのバリデーションはどちらにせよ必須。
  78. 78. 2015 Yusuke Hirao, CC BY-ND. アジェンダ 今日話すこと === - どんなプログラムを組んだら負けなのか - CSSのできる子たち - HTMLのできる子たち - まとめ
  79. 79. 2015 Yusuke Hirao, CC BY-ND. まとめ
  80. 80. 2015 Yusuke Hirao, CC BY-ND. まとめ - HTML/CSSでできる部分を探そう
  81. 81. 2015 Yusuke Hirao, CC BY-ND. まとめ - HTML/CSSでできる部分を探そう - 役割をしっかりわけよう
  82. 82. 2015 Yusuke Hirao, CC BY-ND. まとめ - HTML/CSSでできる部分を探そう - 役割をしっかりわけよう - プログラムを減らそう
  83. 83. 2015 Yusuke Hirao, CC BY-ND. まとめ - HTML/CSSでできる部分を探そう - 役割をしっかりわけよう - プログラムを減らそう コスト削減
  84. 84. 2015 Yusuke Hirao, CC BY-ND. まとめ - HTML/CSSでできる部分を探そう - 役割をしっかりわけよう - プログラムを減らそう コスト削減 時間短縮
  85. 85. 2015 Yusuke Hirao, CC BY-ND. まとめ - HTML/CSSでできる部分を探そう - 役割をしっかりわけよう - プログラムを減らそう コスト削減 時間短縮帰ろう!
  86. 86. 2015 Yusuke Hirao, CC BY-ND. まとめ - HTML/CSSでできる部分を探そう - 役割をしっかりわけよう - プログラムを減らそう コスト削減 時間短縮帰ろう! 飲みに行こう!
  87. 87. 2015 Yusuke Hirao, CC BY-ND. まとめ 参考サイト Can I use http://caniuse.com/
  88. 88. ご清聴ありがとうございました。

×