実務でよく使う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ハックするワザ

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

2. はじめに

3. ホリグチ セイト
Front-End-Engineer
LIG.inc 所属
Twitter :
@seito_horiguchi

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. And

7. ↓今日これ使います
http://codepen.io/

8. 実践

9. ほにゃららなワザ
http://hogehoge.com
9 latest latest latest 4.0 7.1
No.xx
URL
ブラウザ
IE8 ? Android2.3? 一体何の話かね

10. オシャレCSS編

11. transformを使って要素を変形させるワザ
http://codepen.io/seito2014/pen/
yyKKRY
No.1
URL
ブラウザ
9 latest latest latest 4.1 7.1

12. transformを使って要素を変形させるワザポイント
CSS3全般にいえることだけど、
ベンダープレフィックスを忘れずに
transformを使えばあんなことや
こんなこともできる

13. transitionを使い、CSSだけで
簡単なアニメーションを行うワザ
http://codepen.io/seito2014/pen/
EaEwrx
No.2
URL
ブラウザ
10 latest latest latest 4.1 7.1

14. ポイント
transition: (property) (duration) (timing-
function) (transition-delay);
property…アニメーションさせたいプロパティ
duration…スピード
timing-function…イージング
delay…始まるまでの時間
transitionを使い、CSSだけで
簡単なアニメーションを行うワザ

15. keyframesを使ってCSSだけで複雑な
アニメーションを行うワザ
http://codepen.io/seito2014/pen/
ByrQPJ
No.3
URL
ブラウザ
10 latest latest latest 4.1 7.1

16. ポイント1
keyframesを使ってCSSだけで複雑な
アニメーションを行うワザ
@keyframeでアニメーションの動きをつくる
@keyframes animation {
0% { ... }
100% { ... }
}

17. ポイント2
keyframesを使ってCSSだけで複雑な
アニメーションを行うワザ
animation: (name) (duration) (timing-function)
(delay) (iteration-count) ( animation-direction);
name…@keyframesで設定したアニメーション名
duration…スピード
timing-function…イージング
delay…始まるまでの時間
iteration-count…アニメーションさせる回数
direction…交互に反転再生させるかどうか

18. 矢印アイコンをcssだけで表現するワザ
http://codepen.io/seito2014/pen/
dPmvpQ
No.4
URL
ブラウザ
9 latest latest latest 4.1 7.1

19. 矢印アイコンをcssだけで表現するワザポイント
borderを活用する！
とくにtransparentカラー

20. アイコンをアニメーションさせるワザ
http://codepen.io/seito2014/pen/
JoLXwG
No.5
URL
ブラウザ
10 latest latest latest 4.1 7.1

21. ポイント
transformなどを駆使してCSSだけで
アイコンをつくろう
transitionを組み合わせよう
アイコンをアニメーションさせるワザ

22. CSSプロパティ filter で
画像を加工するワザ
http://codepen.io/seito2014/pen/
gbegyE
No.6
URL
ブラウザ
latest latest latest 4.4 7.1

23. ポイント
使えるブラウザはけっこう限られている
transitionでアニメーションもできる
CSSプロパティ filter で
画像を加工するワザ

24. 地味だけど使えるワザ編

25. 今どきの、要素を上下中央寄せにするワザ
http://codepen.io/seito2014/pen/
NPYdzZ
No.7
URL
ブラウザ
9 latest latest latest 4.1 7.1

26. ポイント
transformを使い倒す
top:50%;
left:50%;
margin-top: (要素の高さの半分);
margin-left: (要素の幅の半分);
今どきの、要素を上下中央寄せにするワザ
or

27. 「flexbox」で要素を自由自在に
整列させるワザ
http://codepen.io/seito2014/pen/
KwoXve
No.8
URL
ブラウザ
10 latest latest latest 4.1 7.1

28. ポイント
row-reverseとか使うと順番が逆になる
display: flex;
flex-flow: (どう整列させるか); row, columnなど
align-items:(vertical-align的な);
「flexbox」で要素を自由自在に
整列させるワザ

29. Windowsでwebfontをちょっと
マシに見せるワザ
http://codepen.io/seito2014/pen/
ByrpOE
No.9
URL
ブラウザ
10 latest latest latest 4.1 7.1

30. ポイント
text-shadowで擬似アンチエイリアスをかける
Windowsでwebfontをちょっと
マシに見せるワザ
影の度合いは実機で確認しながら要調整

31. アイコンとテキストが1pxズレてる…！
とかいうときに5秒で揃えるワザ
http://codepen.io/seito2014/pen/
dPmNMR
No.10
URL
ブラウザ
9 latest latest latest 4.1 7.1

32. ポイント
position: relative; を使おう
アイコンとテキストが1pxズレてる…！
とかいうときに5秒で揃えるワザ

33. text-indent:-9999pxの
上位互換的なワザ
http://codepen.io/seito2014/pen/
yyKMMM
No.11
URL
ブラウザ
9 latest latest latest 4.1 7.1

34. ポイント
contentプロパティに画像URLをつっこもう
text-indent:-9999pxの
上位互換的なワザ
記述はちょい増えるが、font-size: 0;でもいける

35. デバイズごとに快適な閲覧をして
もらうために設定すべきviewportのワザ
http://codepen.io/seito2014/pen/
myxOzw
No.12
URL
ブラウザ
9 latest latest latest 4.1 7.1

36. ポイント
PCサイトにはwidth=(サイト幅) を。
レスポンシブ or スマホサイトには
width=device-widthを設定しよう
デバイズごとに快適な閲覧をして
もらうために設定すべきviewportのワザ

37. JSで無理やりごにょごにょ編

38. select要素をデザインするワザ
http://codepen.io/seito2014/pen/
RNQdaM
No.13
URL
ブラウザ
9 latest latest latest 4.1 7.1

39. ポイント
<select>本体はopacity,positionを使って
「クリックできるけど見えない」ようにする
select要素をデザインするワザ
テキストが変わる、などの挙動はJSで処理する
<div>などで偽select要素を用意し、それを装飾する

40. input[type= file ]要素を
デザインするワザ
http://codepen.io/seito2014/pen/
MYQMXy
No.14
URL
ブラウザ
9 latest latest latest 4.1 7.1

41. ポイント
IE対策にfont-sizeを指定する（参考：http://
lab.sonicmoov.com/development/javascript/
input-type-file/）
「select要素をデザインするワザ」と同様のテクニック
を使う
input[type= file ]要素を
デザインするワザ

42. ユーザーエージェントを利用して
ブラウザ＆OSハックするワザ
http://codepen.io/seito2014/pen/
azYBQz
No.15
URL
ブラウザ
9 latest latest latest 4.1 7.1

43. ポイント
indexOf() で判定を行う
window.navigator.userAgent でユーザーの
ブラウザ、OS情報が取得できる
ユーザーエージェントを利用して
ブラウザ＆OSハックするワザ

44. まとめ

45. 今どきはCSS3だけでオシャレな装飾・
アニメーションができる
CSSとJSのちょっとした工夫が実務の
コーディングでは役に立つ
CSSで何とかできない部分も意外に
あるので、そのときはJS様に頼ろう

46. Can I use
http://caniuse.com/

47. Special Thanks
林先生
Twitter : @frontainer
http://frontainer.com/

48. Thank you!
@seito_horiguchi
（質問とかあれば気軽に聞いてくだせえ）

49. 告知

50. レスポンシブ基礎
∼Webサイトをレスポンシブにする方法とそのメリット∼
3/21 13:00∼14:30
http://xxx.xxx.xxxSchoo

51. https://poole-job.jp/Poole

52. https://iioffice.liginc.co.jp/いいオフィス

53. http://www.sundayplanning.com/lamp/LAMP