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/JSの シンプルテクニック15選

2 096 vues

Publié le

実務でよく使うhtml,css,jsの小技をつらつらと紹介します。

※2/11のスクーの授業中で使った資料です。
https://schoo.jp/class/1776

【オシャレCSS編】
1. transformを使って要素を変形させるワザ
2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ
5. アイコンをアニメーションさせるワザ
6. CSSプロパティ”filter”で画像を加工するワザ

【地味だけど使えるワザ編】
7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ
9. Windowsでwebfontをちょっとマシに見せるワザ
10. アイコンとテキストが1pxズレてる...!とかいうときに5秒で揃えるワザ 11. text-indent:-9999pxの上位互換的なワザ
12. デバイズごとに快適な閲覧をしてもらうために設定すべきviewportのワザ

【jsで無理やりごにょごにょ編】
13. select要素をデザインするワザ
14. input[type=“file”]要素をデザインするワザ
15. ユーザーエージェントを利用してブラウザ&OSハックするワザ

  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. 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 THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. 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 THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. 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 THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. 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 THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. 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

今日から使える! HTML/CSS/JSの シンプルテクニック15選

  1. 1. 今日から使える! HTML/CSS/JSの シンプルテクニック15選
  2. 2. はじめに
  3. 3. ホリグチ セイト Front-End-Engineer LIG.inc 所属 Twitter : @seito_horiguchi
  4. 4. アジェンダ はじめに 実践 まとめ
  5. 5. 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ filter で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. アイコンとテキストが1pxズレてる…!とかいうときに5秒で揃えるワザ 11. text-indent:-9999pxの上位互換的なワザ 12. デバイズごとに快適な閲覧をしてもらうために設定すべきviewportのワザ 【jsで無理やりごにょごにょ編】 13. select要素をデザインするワザ 14. input[type= file ]要素をデザインするワザ 15. ユーザーエージェントを利用してブラウザ&OSハックするワザ 実践
  6. 6. And
  7. 7. ↓今日これ使います http://codepen.io/
  8. 8. 実践
  9. 9. ほにゃららなワザ http://hogehoge.com 9 latest latest latest 4.0 7.1 No.xx URL ブラウザ IE8 ? Android2.3? 一体何の話かね
  10. 10. オシャレCSS編
  11. 11. transformを使って要素を変形させるワザ http://codepen.io/seito2014/pen/ yyKKRY No.1 URL ブラウザ 9 latest latest latest 4.1 7.1
  12. 12. transformを使って要素を変形させるワザポイント CSS3全般にいえることだけど、 ベンダープレフィックスを忘れずに transformを使えばあんなことや こんなこともできる
  13. 13. transitionを使い、CSSだけで 簡単なアニメーションを行うワザ http://codepen.io/seito2014/pen/ EaEwrx No.2 URL ブラウザ 10 latest latest latest 4.1 7.1
  14. 14. ポイント transition: (property) (duration) (timing- function) (transition-delay); property…アニメーションさせたいプロパティ duration…スピード timing-function…イージング delay…始まるまでの時間 transitionを使い、CSSだけで 簡単なアニメーションを行うワザ
  15. 15. keyframesを使ってCSSだけで複雑な アニメーションを行うワザ http://codepen.io/seito2014/pen/ ByrQPJ No.3 URL ブラウザ 10 latest latest latest 4.1 7.1
  16. 16. ポイント1 keyframesを使ってCSSだけで複雑な アニメーションを行うワザ @keyframeでアニメーションの動きをつくる @keyframes animation { 0% { ... } 100% { ... } }
  17. 17. ポイント2 keyframesを使ってCSSだけで複雑な アニメーションを行うワザ animation: (name) (duration) (timing-function) (delay) (iteration-count) ( animation-direction); name…@keyframesで設定したアニメーション名 duration…スピード timing-function…イージング delay…始まるまでの時間 iteration-count…アニメーションさせる回数 direction…交互に反転再生させるかどうか
  18. 18. 矢印アイコンをcssだけで表現するワザ http://codepen.io/seito2014/pen/ dPmvpQ No.4 URL ブラウザ 9 latest latest latest 4.1 7.1
  19. 19. 矢印アイコンをcssだけで表現するワザポイント borderを活用する! とくにtransparentカラー
  20. 20. アイコンをアニメーションさせるワザ http://codepen.io/seito2014/pen/ JoLXwG No.5 URL ブラウザ 10 latest latest latest 4.1 7.1
  21. 21. ポイント transformなどを駆使してCSSだけで アイコンをつくろう transitionを組み合わせよう アイコンをアニメーションさせるワザ
  22. 22. CSSプロパティ filter で 画像を加工するワザ http://codepen.io/seito2014/pen/ gbegyE No.6 URL ブラウザ latest latest latest 4.4 7.1
  23. 23. ポイント 使えるブラウザはけっこう限られている transitionでアニメーションもできる CSSプロパティ filter で 画像を加工するワザ
  24. 24. 地味だけど使えるワザ編
  25. 25. 今どきの、要素を上下中央寄せにするワザ http://codepen.io/seito2014/pen/ NPYdzZ No.7 URL ブラウザ 9 latest latest latest 4.1 7.1
  26. 26. ポイント transformを使い倒す top:50%; left:50%; margin-top: (要素の高さの半分); margin-left: (要素の幅の半分); 今どきの、要素を上下中央寄せにするワザ or
  27. 27. 「flexbox」で要素を自由自在に 整列させるワザ http://codepen.io/seito2014/pen/ KwoXve No.8 URL ブラウザ 10 latest latest latest 4.1 7.1
  28. 28. ポイント row-reverseとか使うと順番が逆になる display: flex; flex-flow: (どう整列させるか); row, columnなど align-items:(vertical-align的な); 「flexbox」で要素を自由自在に 整列させるワザ
  29. 29. Windowsでwebfontをちょっと マシに見せるワザ http://codepen.io/seito2014/pen/ ByrpOE No.9 URL ブラウザ 10 latest latest latest 4.1 7.1
  30. 30. ポイント text-shadowで擬似アンチエイリアスをかける Windowsでwebfontをちょっと マシに見せるワザ 影の度合いは実機で確認しながら要調整
  31. 31. アイコンとテキストが1pxズレてる…! とかいうときに5秒で揃えるワザ http://codepen.io/seito2014/pen/ dPmNMR No.10 URL ブラウザ 9 latest latest latest 4.1 7.1
  32. 32. ポイント position: relative; を使おう アイコンとテキストが1pxズレてる…! とかいうときに5秒で揃えるワザ
  33. 33. text-indent:-9999pxの 上位互換的なワザ http://codepen.io/seito2014/pen/ yyKMMM No.11 URL ブラウザ 9 latest latest latest 4.1 7.1
  34. 34. ポイント contentプロパティに画像URLをつっこもう text-indent:-9999pxの 上位互換的なワザ 記述はちょい増えるが、font-size: 0;でもいける
  35. 35. デバイズごとに快適な閲覧をして もらうために設定すべきviewportのワザ http://codepen.io/seito2014/pen/ myxOzw No.12 URL ブラウザ 9 latest latest latest 4.1 7.1
  36. 36. ポイント PCサイトにはwidth=(サイト幅) を。 レスポンシブ or スマホサイトには width=device-widthを設定しよう デバイズごとに快適な閲覧をして もらうために設定すべきviewportのワザ
  37. 37. JSで無理やりごにょごにょ編
  38. 38. select要素をデザインするワザ http://codepen.io/seito2014/pen/ RNQdaM No.13 URL ブラウザ 9 latest latest latest 4.1 7.1
  39. 39. ポイント <select>本体はopacity,positionを使って 「クリックできるけど見えない」ようにする select要素をデザインするワザ テキストが変わる、などの挙動はJSで処理する <div>などで偽select要素を用意し、それを装飾する
  40. 40. input[type= file ]要素を デザインするワザ http://codepen.io/seito2014/pen/ MYQMXy No.14 URL ブラウザ 9 latest latest latest 4.1 7.1
  41. 41. ポイント IE対策にfont-sizeを指定する(参考:http:// lab.sonicmoov.com/development/javascript/ input-type-file/) 「select要素をデザインするワザ」と同様のテクニック を使う input[type= file ]要素を デザインするワザ
  42. 42. ユーザーエージェントを利用して ブラウザ&OSハックするワザ http://codepen.io/seito2014/pen/ azYBQz No.15 URL ブラウザ 9 latest latest latest 4.1 7.1
  43. 43. ポイント indexOf() で判定を行う window.navigator.userAgent でユーザーの ブラウザ、OS情報が取得できる ユーザーエージェントを利用して ブラウザ&OSハックするワザ
  44. 44. まとめ
  45. 45. 今どきはCSS3だけでオシャレな装飾・ アニメーションができる CSSとJSのちょっとした工夫が実務の コーディングでは役に立つ CSSで何とかできない部分も意外に あるので、そのときはJS様に頼ろう
  46. 46. Can I use http://caniuse.com/
  47. 47. Special Thanks 林先生 Twitter : @frontainer http://frontainer.com/
  48. 48. Thank you! @seito_horiguchi (質問とかあれば気軽に聞いてくだせえ)
  49. 49. 告知
  50. 50. レスポンシブ基礎 ∼Webサイトをレスポンシブにする方法とそのメリット∼ 3/21 13:00∼14:30 http://xxx.xxx.xxxSchoo
  51. 51. https://poole-job.jp/Poole
  52. 52. https://iioffice.liginc.co.jp/いいオフィス
  53. 53. http://www.sundayplanning.com/lamp/LAMP

×