おためし受講中

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

この授業は、下記スキルの方が対象です。
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”]要素をデザインするワザ

 

学生代表

  • 塩原 桜

    塩原 桜

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    03:29  (00:13 ~ )
    今回使用するソフトの紹介:CODEPEN
    01: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 ~ )
    【後半】質疑応答
    Q:スマホサイト等にcss3を多様すると表示が重くなってしまいますか?
    01:04  (1:10:17 ~ )
    Q:この矢印はタグを空にして作られていますが、SEO的にはどうなのでしょうか?
    00:59  (1:11:21 ~ )
    Q:回数指定もできるのでしょうか?
    01:23  (1:12:20 ~ )
    Q:IE9以前で同じような動きはできないと思いますが、注意書きとかどうしたらよいですか?
    02:21  (1:13:43 ~ )
    Q:translateとpositionの使い分けについて。
    01:41  (1:16:04 ~ )
    Q:特定のブラウザやデバイスのみに特定のcssを指定する場合はどのようにしますか。
    00:59  (1:17:45 ~ )
    Q:contentでのロゴ置換えはIEとか使えますか?
    01:14  (1:18:44 ~ )
    Q:animationを行った場合、他の要素はどうなりますか?
    00:57  (1:19:58 ~ )
    Q:縦に長いウェブサイトで、スクロールバーの動きに(たぶん)反応してアニメーションが起きるサイトがありますが、あれはCSSだけでなくJSも使われているのでしょうか?
      (1:20:55 ~ )