- 全3回
- 2015年2月21日公開
この授業は、下記スキルの方が対象です。
XHTML,CSS2：必須
HTML5,CSS3,Sass,jQuery：推奨（いずれも基礎レベル）
■HTML・CSS３・JavaScriptをまとめてスキルアップ
スピーディーで完璧なコーディングをするために覚えておきたい以下１５個の"ワザ"が身につきます。
① 今どきの要素を上下中央寄せにするワザ その1
② 今どきの要素を上下中央寄せにするワザ その2
③ 今どきの要素を上下中央寄せにするワザ その3
④ text-indent:-9999pxの上位互換的なワザ
⑤ PCサイトをタブレットやスマホで閲覧した時にちょい綺麗に見せるワザ
⑥ デバイズごとに快適な閲覧をしてもらうために設定すべきviewportのワザ
⑦ Windowsでweb-fontをちょっとマシに見せるワザ
⑧ CSSプロパティ”filter”で画像を加工するワザ
⑨ transformを使って楽するワザ
⑩ 矢印、ハンバーガーなどのアイコンをcssだけで表現するワザ
⑪ transitionやkeyframesを使ってCSSだけでアニメーションさせるワザ
⑫ アイコンとテキストが1pxズレてる…！とかいうときに5秒で揃えるワザ
⑬ ユーザーエージェントを利用してブラウザ＆OSハックするワザ
⑭ select要素をデザインするワザ
⑮ input[type=“file”]要素をデザインするワザ
HTML5/CSS実践 明日から使えるテクニック（全3回）
この授業の先生
学生代表
-
塩原 桜
スクー放送部
-
残り枚数：- 枚
- ノートを確認する
- 【前半】授業
-
自己紹介＆アジェンダ03:29 (00:13 ~ )
-
今回使用するソフトの紹介：CODEPEN01:39 (03:42 ~ )
-
オシャレCSS編：transformを使って要素を変形させるワザ04:58 (05:21 ~ )
-
オシャレCSS編：transitionを使い、cssだけで簡単なアニメーションを行うワザ05:22 (10:19 ~ )
-
オシャレCSS編：keyframesを使ってcssだけで複雑なアニメーションを行うワザ09:35 (15:41 ~ )
-
オシャレCSS編：矢印アイコンをcssだけで表現するワザ08:19 (25:16 ~ )
-
オシャレCSS編：アイコンをアニメーションさせるワザ02:42 (33:35 ~ )
-
オシャレCSS編：cssプロパティ05:33 (36:17 ~ )
-
地味だけど使えるワザ編：今どきの、要素を上下中央寄せにするワザ03:59 (41:50 ~ )
-
地味だけど使えるワザ編：「flexbox」で要素を自由自在に整列させるワザ02:44 (45:49 ~ )
-
地味だけど使えるワザ編：Windowsでwebfontをちょっとマシに見せるワザ01:33 (48:33 ~ )
-
地味だけど使えるワザ編：アイコンとテキストが1pxズレてる…！とかいうときに5秒で揃えるワザ02:04 (50:06 ~ )
-
地味だけど使えるワザ編：text-indent:-9999pxの上位互換的なワザ01:58 (52:10 ~ )
-
地味だけど使えるワザ編：デバイスごとに快適な閲覧してもらうために設定すべきviewportのワザ01:14 (54:08 ~ )
-
JSで無理やりごにょごにょ編：select要素をデザインするワザ04:58 (55:22 ~ )
-
JSで無理やりごにょごにょ編：input[type=01:15 (1:00:20 ~ )
-
JSで無理やりごにょごにょ編：ユーザーエージェントを利用してブラウザ＆OSハックするワザ06:55 (1:01:35 ~ )
-
まとめ01:47 (1:08:30 ~ )
- 【後半】質疑応答
-
Ｑ：スマホサイト等にcss3を多様すると表示が重くなってしまいますか？01:04 (1:10:17 ~ )
-
Ｑ：この矢印はタグを空にして作られていますが、SEO的にはどうなのでしょうか？00:59 (1:11:21 ~ )
-
Ｑ：回数指定もできるのでしょうか？01:23 (1:12:20 ~ )
-
Ｑ：IE9以前で同じような動きはできないと思いますが、注意書きとかどうしたらよいですか？02:21 (1:13:43 ~ )
-
Ｑ：translateとpositionの使い分けについて。01:41 (1:16:04 ~ )
-
Ｑ：特定のブラウザやデバイスのみに特定のcssを指定する場合はどのようにしますか。00:59 (1:17:45 ~ )
-
Ｑ：contentでのロゴ置換えはIEとか使えますか？01:14 (1:18:44 ~ )
-
Ｑ：animationを行った場合、他の要素はどうなりますか？00:57 (1:19:58 ~ )
-
Ｑ：縦に長いウェブサイトで、スクロールバーの動きに(たぶん)反応してアニメーションが起きるサイトがありますが、あれはＣＳＳだけでなくJSも使われているのでしょうか？(1:20:55 ~ )