「ほんきでHTML」講座レポート(6)

こんにちは。
レポーターの大澤です。
ひきつづき初級者向け講座「ほんきでHTML」の内容や様子をお届けいたします。

6回目の今回は、見た目をよりステキにするための技術いろいろを習いました。

all

◎今回習ったこと
CSS3 シャドウ box-shadow
角丸 border-radius
グラデーション background: linear-gradient
CSSアニメーション(transition)
jQuery導入
jQuery+CSSアニメーション(スクロール)

当然のことなのかもしれないですが、
ウェブ上でシャドウや角丸、グラデーションをするのにも
ひとつひとつちゃんとHTMLで書かなければいけないんですよね。
結構複雑だなぁと思ったんですが、シャドウとグラデーションに関しては
ウェブ上にジェネレーターがあって、それを利用すると
見た目で作ったものをCSSに書き換えてくれるので便利です。

シャドウのジェネレーター
グラデーションのジェネレーター

css

そして、アニメーション。
動きがつくと断然ワクワクしますね。
今回習ったトランジションは、例えば隠れているメニューバーが
ホバーやクリックで登場する、という動きをさせたい時に使うものだそうです。
登場するタイミングや動きの速さも指定できるので、ちょっとずつ調整しながら
一番気持ちよい動きをする数値を探していきました。
職人の気持ち。

js

そして最後にjQueryについて。
jQueryはJavaScriptの中にあるライブラリ
(実際はJavaScriptで書かれたファイル)ということで、
難しいJavaScriptを簡略化して書くことができます。
jQuery(https://jquery.com/)からファイルをダウンロードすることができます。
その中で、今回はscrollを習いました。
ウィンドウのトップから何ピクセル動いたら○○という指示が出せるものです。
すごく難しいです。。。
たくさんやって慣れるしかないんでしょうね。

以上で今回の授業で伝授される基本技術をすべて教わりました。
あとは組み合わせて課題に取りかかるのみ。

松村先生曰く、
◎今までやったことの難しかったところ
float(clearfix, overflow)
absolute
mediaquery, viewport
css transition, jQuery
この辺りを理解していると組み合わせでいろいろ作れるそうです。

今日の授業の残り時間は課題制作にあてられました。

kadai1

kadai2

来週は、各自課題を進めてきて、その疑問点を解消する回です。


クスールでは8月下旬からスタートする2つの講座と子ども向けワークショップの参加者を募集しています。

【大人向け講座】
■「ほんきでJavaScript」《カリキュラム》
■「Node.js講座」《カリキュラム》

【子ども向けワークショップ】
詳しくはこちらのブログをご覧くださいhttps://cshool.jp/blog/2016/07/8180.html

(1)親子で楽しく電気工作を学び、宇宙人を作ろう!
■日時: 2016/8/18(木) 15:00〜17:30
■対象:低学年 小学1年〜6年

(2)littleBitsのArduinoを使ってプログラミングを学ぼう!
■日時:2016/8/19(金) 15:00〜17:30
■対象:高学年以上 小学5年〜中学3年

上記の講座で気になる講座や、もっと話しを聞いてみたい講座などございましたら、お気軽にお問い合わせください。そして大人向け講座で一度教室を見てみたい方などいらっしゃいましたら、現在「ほんきでHTML」を開催中ですので、ぜひ見学にいらしてください。
お問い合わせはコチラです。http://cshool.jp/contact