HTML・CSS部 中級
この部活で作るもの
まだ投稿されていません
HTML・CSS部 中級の練習メニュー
レッスン一覧はレッスンを進めていくごとにゲームのように解放されていきます！
無料で受講してみる次の練習へ進む ボタンで解除
Lesson 01 「ボタンをふわっとアニメーションさせよう！その１」
今回からこの部では、動画とブログ形式両方をミックスさせたレッスンを行なっていきます！ 実際の仕事では、動画ではなく「ブログ」や「公式リファレンス」といった文字の情報だけを頼りに情報を収集し、理解し、仕事に使っていかなければいけないので、少しずつ「文字」に慣れていきましょう！ HTML・CSS部中級の第１回目は、CSSを使ったアニメーションです！
次の練習へ進む ボタンで解除
Lesson 02 「ボタンをふわっとアニメーションさせよう！その２」
ボタンホバーアニメーションの後編！ スタイルをゆっくり適用することのできる「transition」について学びましょう！
次の練習へ進む ボタンで解除
Lesson 03 「基本の４つのアニメーションを覚えよう！その１」
ゲームで使われているようなどんな複雑なアニメーションも実はたった４つの基本的なアニメーションを組み合わせてできています！ その基本のアニメーションの「移動」「縮尺」を学んでいきましょう！
次の練習へ進む ボタンで解除
Lesson04 「基本の４つのアニメーションを覚えよう！その２」
基本のアニメーション後編！ 残り２つのアニメーション「回転」「傾斜」を学んでいきましょう！
次の練習へ進む ボタンで解除
Lesson 05「リッチな拡大できる風サムネイルを作ろう！」
基本のアニメーションを応用して、画像サムネイルにリッチなアニメーションをつけてみましょう！
次の練習へ進む ボタンで解除
Lesson 06「リッチなズームアップサムネイルを作ろう！」
基本のアニメーションを応用して、画像サムネイルにリッチなズームアップのアニメーションをつけてみましょう！
次の練習へ進む ボタンで解除
Lesson 07「アニメーションを使ったお気に入りボタンを作ろう！その１」
CSSアニメーションを使って、WEBサイトによくあるお気に入りボタンを作ってみましょう！ CSS３から新たに追加された@keyframeという機能を使ってオリジナルのアニメーション関数を作っていきます！
次の練習へ進む ボタンで解除
Lesson 08「アニメーションを使ったお気に入りボタンを作ろう！その２」
Lesson07の続き！
次の練習へ進む ボタンで解除
Lesson 09「ブラウザの種類と見え方」
HTMLやCSSのコードを理解して実際に画面に表示させているのは「ブラウザ」というソフト！！ でも、そのブラウザにも色々な種類があって、しかも理解の仕方がみんなまちまち！？
次の練習へ進む ボタンで解除
Lesson 10「スマホ用サイト４つの作り方」
スマホ用ホームページの作り方は４種類！！ でも、今主流なのはCSS3のメディアクエリーを使った「レスポンシブデザイン」です！
次の練習へ進む ボタンで解除
Lesson 11「flexboxを学ぼう！part１」
CSS3から新しく使えるようになった新機能の「flexbox」を学びましょう！ flexboxを使えば、今までjsやCSSのfloatでしかできなかった「横並び」「上下左右中央寄せ・均等寄せ」「横並びボックスの高さを合わせる」といったレイアウトが簡単にできるようになります！
次の練習へ進む ボタンで解除
Lesson 12「flexboxを学ぼう！part２」
flexboxの後編！ flexboxはスマートフォン用サイトを作る時にもよく使います！
次の練習へ進む ボタンで解除
コーヒーブレイク「はたらくプログラミング 第8話」
この部ではHTML・CSS部初級で習った基礎を元に「ホームページ制作でよく使うパーツ」や「アニメーション」「スマホ対応方法」などさらに実践的なものを学んでいきます！
※この部にはHTML・CSS部初級、javascript・jQuery部初級を学んでから参加してください