Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

de

プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 1 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 2 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 3 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 4 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 5 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 6 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 7 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 8 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 9 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 10 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 11 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 12 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 13 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 14 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 15 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 16 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 17 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 18 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 19 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 20 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 21 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 22 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 23 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 24 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 25 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 26 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 27 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 28 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 29 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 30 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 31 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 32 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 33 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 34 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 35 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 36 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 37 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 38 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 39 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 40 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 41 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 42 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 43 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 44 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 45 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 46 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 47 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 48 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 49 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 50 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 51 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 52 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 53 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 54 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 55 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 56 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 57 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 58 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 59 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 60 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 61 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 62 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 63 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 64 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 65 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 66 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 67 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 68 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 69 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 70 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 71 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 72 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 73 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 74 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 75 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 76 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 77 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 78 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 79 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 80 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 81 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 82 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 83 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 84 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 85 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 86 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 87 プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 Slide 88
Próximo SlideShare
偶然にも500万個のSSH公開鍵を手に入れた俺たちは
Siguiente
Descargar para leer sin conexión y ver en pantalla completa.

462 recomendaciones

Compartir

Descargar para leer sin conexión

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

Descargar para leer sin conexión

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

Libros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

プログラム組んだら負け!実は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. ご清聴ありがとうございました。
  • ssuser6c94c9

    Nov. 2, 2021
  • Yujiimabeppu

    Nov. 3, 2020
  • ShuntaroNishizawa

    Jul. 5, 2020
  • TsugumiObara

    Jun. 24, 2019
  • ssuserde1c8a

    May. 16, 2019
  • ShoIkeda1

    Aug. 21, 2018
  • DaikiTanaka5

    Jul. 20, 2018
  • BornToRule1

    Apr. 25, 2018
  • akihirotanii

    Mar. 4, 2018
  • siromath

    Feb. 10, 2018
  • ssuser17b18f

    Dec. 19, 2017
  • SatokiFuruya

    Apr. 12, 2017
  • Clipping-Path-House

    Apr. 12, 2017
  • yamahige

    Mar. 17, 2017
  • OkitaTakuya

    Mar. 10, 2017
  • HayatoInaba

    Feb. 12, 2017
  • HisanoRyo

    Feb. 11, 2017
  • KensukeSakai

    Feb. 5, 2017
  • EcilaAkechi

    Oct. 21, 2016
  • KazuyoshiHamasaki

    Oct. 19, 2016

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

Vistas

Total de vistas

81.399

En Slideshare

0

De embebidos

0

Número de embebidos

5.092

Acciones

Descargas

254

Compartidos

0

Comentarios

0

Me gusta

462

×