HTML・CSS部 中級

部活トップ画像

この部ではHTML・CSS部初級で習った基礎を元に「ホームページ制作でよく使うパーツ」や「アニメーション」「スマホ対応方法」などさらに実践的なものを学んでいきます!
※この部にはHTML・CSS部初級、javascript・jQuery部初級を学んでから参加してください

この部活で作るもの

まだ投稿されていません

HTML・CSS部 中級の練習メニュー

Lesson01 「ボタンをふわっとアニメーションさせよう!その1」

今回からこの部では、動画とブログ形式両方をミックスさせたレッスンを行なっていきます! 実際の仕事では、動画ではなく「ブログ」や「公式リファレンス」といった文字の情報だけを頼りに情報を収集し、理解し、仕事に使っていかなければいけないので、少しずつ「文字」に慣れていきましょう! HTML・CSS部中級の第1回目は、CSSを使ったアニメーションです!

Lesson02 「ボタンをふわっとアニメーションさせよう!その2」

ボタンホバーアニメーションの後編! スタイルをゆっくり適用することのできる「transition」について学びましょう!

Lesson03 「基本の4つのアニメーションを覚えよう!その1」

ゲームで使われているようなどんな複雑なアニメーションも実はたった4つの基本的なアニメーションを組み合わせてできています! その基本のアニメーションの「移動」「縮尺」を学んでいきましょう!

Lesson04 「基本の4つのアニメーションを覚えよう!その2」

基本のアニメーション後編! 残り2つのアニメーション「回転」「傾斜」を学んでいきましょう!

Lesson05「リッチな拡大できる風サムネイルを作ろう!」

基本のアニメーションを応用して、画像サムネイルにリッチなアニメーションをつけてみましょう!

Lesson06「リッチなズームアップサムネイルを作ろう!」

基本のアニメーションを応用して、画像サムネイルにリッチなズームアップのアニメーションをつけてみましょう!

Lesson07「アニメーションを使ったお気に入りボタンを作ろう!その1」

CSSアニメーションを使って、WEBサイトによくあるお気に入りボタンを作ってみましょう! CSS3から新たに追加された@keyframeという機能を使ってオリジナルのアニメーション関数を作っていきます!

Lesson08「アニメーションを使ったお気に入りボタンを作ろう!その2」

Lesson07の続き!

Lesson09「ブラウザの種類と見え方」

HTMLやCSSのコードを理解して実際に画面に表示させているのは「ブラウザ」というソフト!! でも、そのブラウザにも色々な種類があって、しかも理解の仕方がみんなまちまち!?

Lesson10「スマホ用サイト4つの作り方」

スマホ用ホームページの作り方は4種類!! でも、今主流なのはCSS3のメディアクエリーを使った「レスポンシブデザイン」です!

Lesson11「flexboxを学ぼう!part1」

CSS3から新しく使えるようになった新機能の「flexbox」を学びましょう! flexboxを使えば、今までjsやCSSのfloatでしかできなかった「横並び」「上下左右中央寄せ・均等寄せ」「横並びボックスの高さを合わせる」といったレイアウトが簡単にできるようになります!

Lesson12「flexboxを学ぼう!part2」

flexboxの後編! flexboxはスマートフォン用サイトを作る時にもよく使います!