chevron_left HTML5/CSS実践 明日から使えるテクニック

HTML5/CSS実践 明日から使えるテクニック

PREMIUM
第3回

今日から使えるHTML5/CSS3/JSのシンプルテクニック15選

2015年2月21日 90min

会員登録して、全てのスライドを見よう

1 / 53

授業の概要

この授業は、下記スキルの方が対象です。
XHTML,CSS2:必須
HTML5,CSS3,Sass,jQuery:推奨(いずれも基礎レベル)

■HTML・CSS3・JavaScriptをまとめてスキルアップ

スピーディーで完璧なコーディングをするために覚えておきたい以下15個の"ワザ"が身につきます。

① 今どきの要素を上下中央寄せにするワザ その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”]要素をデザインするワザ

 

こんな人にオススメ

HTMLやCSSは書けるけど、経験が浅くてコーディング中に迷いが生じることがある方

チャプター

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