HTML・CSS部 実践

部活トップ画像

HTML・CSS部 入門で習った基礎を元に「SASS」や「スマホ対応方法」などさらに実践的なものを学んでいきます!(こちらはweb制作部員専用です)

この部活で作るもの

まだ投稿されていません

HTML・CSS部 実践の練習メニュー

次の練習へ進む ボタンで解除

Lesson01|ブラウザの種類と見え方

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

次の練習へ進む ボタンで解除

Lesson02|スマホ用サイト4つの作り方

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

次の練習へ進む ボタンで解除

Lesson03|flexboxを学ぼう!part1

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

次の練習へ進む ボタンで解除

Lesson04|flexboxを学ぼう!part2

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

次の練習へ進む ボタンで解除

Lesson05|レスポンシブデザインのサイトを作ろう!〜開発環境の説明〜

レスポンシブデザインを作る前にSASSの使い方とSASSをコンパイルする環境をjsのパッケージ管理ツール「Yarn」を使って開発環境を構築していきましょう!

次の練習へ進む ボタンで解除

Lesson06|レスポンシブデザインのサイトを作ろう!〜SASSを使ってヘッダー・ヒーローバナー作成〜

まずは、PCページから!SASSを使ってヘッダーやヒーローバナーを作っていきましょう!

次の練習へ進む ボタンで解除

Lesson07|レスポンシブデザインのサイトを作ろう!〜SASSを使ったその他パーツの作り方〜

PC用ページのその他セクションを作ってきます!要素を横並びにしていく方法として従来のfloatを使った方法とCSS3から主流になってきているFlexboxを使った方法を両方やってみましょう!

次の練習へ進む ボタンで解除

Lesson08|レスポンシブデザインのサイトを作ろう!〜SASSの@mixinでメディアクエリを作る〜

SASSの機能の1つ「mixin」はプログラミングでいうところの「関数」を作れるものです!mixinを使えばメディアクエリも簡単に書くことが出来てしまいます!

次の練習へ進む ボタンで解除

Lesson09|レスポンシブデザインのサイトを作ろう!〜SASSを使ってスマホページ完成!!〜

とうとうスマホページの完成です!TODOと書かれた箇所を最後にリファクタしていきましょう!「修正しやすいコード」を心がけていきましょうね!