Download as PDF, PPTX
![【オシャレ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ハックするワザ実践](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ftequnic-master-150223191859-conversion-gate02%2f75%2fHTML-CSS-JS-15-5-2048.jpg&f=jpg&w=240)
![input[type= file ]要素をデザインするワザhttp://codepen.io/seito2014/pen/MYQMXyNo.14URLブラウザ9 latest latest latest 4.1 7.1](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ftequnic-master-150223191859-conversion-gate02%2f75%2fHTML-CSS-JS-15-40-2048.jpg&f=jpg&w=240)
![ポイントIE対策にfont-sizeを指定する（参考：http://lab.sonicmoov.com/development/javascript/input-type-file/）「select要素をデザインするワザ」と同様のテクニックを使うinput[type= file ]要素をデザインするワザ](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ftequnic-master-150223191859-conversion-gate02%2f75%2fHTML-CSS-JS-15-41-2048.jpg&f=jpg&w=240)
Uploaded byHoriguchi Seito
PDF, PPTX2,869 views
今日から使える! HTML/CSS/JSの シンプルテクニック15選
実務でよく使う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ハックするワザ
Recommended
More Related Content
What's hot
Viewers also liked
Similar to 今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
- 1.
- 2.
- 3.
- 4.
- 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.
- 7.
- 8.
- 9.ほにゃららなワザhttp://hogehoge.com9 latest latestlatest 4.0 7.1No.xxURLブラウザIE8 ? Android2.3? 一体何の話かね
- 10.
- 11.
- 12.
- 13.
- 14.ポイントtransition: (property) (duration)(timing-function) (transition-delay);property…アニメーションさせたいプロパティduration…スピードtiming-function…イージングdelay…始まるまでの時間transitionを使い、CSSだけで簡単なアニメーションを行うワザ
- 15.
- 16.
- 17.ポイント2keyframesを使ってCSSだけで複雑なアニメーションを行うワザanimation: (name) (duration)(timing-function)(delay) (iteration-count) ( animation-direction);name…@keyframesで設定したアニメーション名duration…スピードtiming-function…イージングdelay…始まるまでの時間iteration-count…アニメーションさせる回数direction…交互に反転再生させるかどうか
- 18.
- 19.
- 20.
- 21.
- 22.CSSプロパティ filter で画像を加工するワザhttp://codepen.io/seito2014/pen/gbegyENo.6URLブラウザlatestlatest latest 4.4 7.1
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.ポイントrow-reverseとか使うと順番が逆になるdisplay: flex;flex-flow: (どう整列させるか);row, columnなどalign-items:(vertical-align的な);「flexbox」で要素を自由自在に整列させるワザ
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.input[type= file ]要素をデザインするワザhttp://codepen.io/seito2014/pen/MYQMXyNo.14URLブラウザ9latest latest latest 4.1 7.1
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.Special Thanks林先生Twitter :@frontainerhttp://frontainer.com/
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.