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