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

今日から使える！
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ハックするワザ
実践

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

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

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

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

transitionを使い、CSSだけで
簡単なアニメーションを行うワザ
EaEwrx
No.2
URL
ブラウザ

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

keyframesを使ってCSSだけで複雑な
アニメーションを行うワザ
ByrQPJ
No.3
URL
ブラウザ

ポイント1
@keyframeでアニメーションの動きをつくる
@keyframes animation {
0% { ... }
100% { ... }
}

ポイント2
animation: (name) (duration) (timing-function)
(delay) (iteration-count) ( animation-direction);
name…@keyframesで設定したアニメーション名
duration…スピード
timing-function…イージング
delay…始まるまでの時間
iteration-count…アニメーションさせる回数
direction…交互に反転再生させるかどうか

矢印アイコンをcssだけで表現するワザ
dPmvpQ
No.4
URL
ブラウザ

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

アイコンをアニメーションさせるワザ
JoLXwG
No.5
URL
ブラウザ

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

CSSプロパティ filter で
画像を加工するワザ
gbegyE
No.6
URL
ブラウザ
latest latest latest 4.4 7.1

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

地味だけど使えるワザ編

今どきの、要素を上下中央寄せにするワザ
NPYdzZ
No.7
URL
ブラウザ

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

「flexbox」で要素を自由自在に
整列させるワザ
KwoXve
No.8
URL
ブラウザ

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

Windowsでwebfontをちょっと
マシに見せるワザ
ByrpOE
No.9
URL
ブラウザ

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

アイコンとテキストが1pxズレてる…！
とかいうときに5秒で揃えるワザ
dPmNMR
No.10
URL
ブラウザ

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

text-indent:-9999pxの
上位互換的なワザ
yyKMMM
No.11
URL
ブラウザ

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

デバイズごとに快適な閲覧をして
もらうために設定すべきviewportのワザ
myxOzw
No.12
URL
ブラウザ

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

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

select要素をデザインするワザ
RNQdaM
No.13
URL
ブラウザ

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

input[type= file ]要素を
デザインするワザ
MYQMXy
No.14
URL
ブラウザ

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

ユーザーエージェントを利用して
ブラウザ＆OSハックするワザ
azYBQz
No.15
URL
ブラウザ

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

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

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

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

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

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

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

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

Recommended

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to 今日から使える! HTML/CSS/JSのシンプルテクニック15選 (20)