PREMIUM
第3回
今日から使えるHTML5/CSS3/JSのシンプルテクニック15選
2015年2月21日 90min
スライド資料
授業の概要
こんな人にオススメ
HTMLやCSSは書けるけど、経験が浅くてコーディング中に迷いが生じることがある方
チャプター
-
自己紹介＆アジェンダ
03:29 -
今回使用するソフトの紹介：CODEPEN
01:39 -
オシャレCSS編：transformを使って要素を変形させるワザ
04:58 -
オシャレCSS編：transitionを使い、cssだけで簡単なアニメーションを行うワザ
05:22 -
オシャレCSS編：keyframesを使ってcssだけで複雑なアニメーションを行うワザ
09:35 -
オシャレCSS編：矢印アイコンをcssだけで表現するワザ
08:19 -
オシャレCSS編：アイコンをアニメーションさせるワザ
02:42 -
オシャレCSS編：cssプロパティ
05:33 -
地味だけど使えるワザ編：今どきの、要素を上下中央寄せにするワザ
03:59 -
地味だけど使えるワザ編：「flexbox」で要素を自由自在に整列させるワザ
02:44 -
地味だけど使えるワザ編：Windowsでwebfontをちょっとマシに見せるワザ
01:33 -
地味だけど使えるワザ編：アイコンとテキストが1pxズレてる…！とかいうときに5秒で揃えるワザ
02:04 -
地味だけど使えるワザ編：text-indent:-9999pxの上位互換的なワザ
01:58 -
地味だけど使えるワザ編：デバイスごとに快適な閲覧してもらうために設定すべきviewportのワザ
01:14 -
JSで無理やりごにょごにょ編：select要素をデザインするワザ
04:58 -
JSで無理やりごにょごにょ編：input[type=
01:15 -
JSで無理やりごにょごにょ編：ユーザーエージェントを利用してブラウザ＆OSハックするワザ
06:55 -
まとめ
01:47
-
Ｑ：スマホサイト等にcss3を多様すると表示が重くなってしまいますか？
01:04 -
Ｑ：この矢印は<span>タグを空にして作られていますが、SEO的にはどうなのでしょうか？
00:59 -
Ｑ：回数指定もできるのでしょうか？
01:23 -
Ｑ：IE9以前で同じような動きはできないと思いますが、注意書きとかどうしたらよいですか？
02:21 -
Ｑ：translateとpositionの使い分けについて。
01:41 -
Ｑ：特定のブラウザやデバイスのみに特定のcssを指定する場合はどのようにしますか。
00:59 -
Ｑ：contentでのロゴ置換えはIEとか使えますか？
01:14 -
Ｑ：animationを行った場合、他の要素はどうなりますか？
00:57 -
Ｑ：縦に長いウェブサイトで、スクロールバーの動きに(たぶん)反応してアニメーションが起きるサイトがありますが、あれはＣＳＳだけでなくJSも使われているのでしょうか？