HTML&CSSでつくるWebサイト制作入門 - はじめてのWEBデザイン
こんな方へWeb制作未経験/初心者の方
HTML&CSSを使って多くのWebページで使われている装飾技法を学びましょう。解説と一緒にコードを書き、検証ツールで整えなが進めることで「自分で考えてコーディングする」ことができるようになります。
この講座で、できるようになること
- HTMLの概要と基礎知識が身につく
- CSSの概要と基礎知識が身につく
- CSSの疑似要素、擬似クラスがわかる
この講座について
脱初心者・脱コピペ!
CSSを活用した、装飾的Webコーディング
～ 作りたいデザインから、考えてコーディングできるようになる方法 ～
HTMLとCSSを学習して慣れてくると、「習ったことは出来るけど、作りたいサイトはどうコーディングしてよいかわからない」という壁にぶつかるタイミングがあります。
頑張ってCSSを書いたけれど崩れてしまったり、コピペOKのサイトからコードを貰ったものの調整できなかったり…。そんな経験がある方も少なく無いのではないでしょうか？
本講座では、見本コードやCSSの解説はもちろん、デザインからHTML/CSSを組み立てる考え方から、CSSの調整方法も公開。わかった気になるコーディング学習ではなく、コードに触れながら理解を深められる構成になっています。
短時間で実践的な基礎スキルを習得可能にするSkillhubメソッド
多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。ほんとうに必要な知識だけを厳選しているからこそ、受講した日のうちにレベルアップを感じられる超短期学習が実現できます。
図解たっぷり! むずかしい定義もすんなり理解できます
HTMLやCSSには心強いリファレンスサイトが多くありますが、厳密性を重視した解説は非常に難解です。複雑なことができるCSSプロパティになるほど、解説読解の難易度も上がってしまうのです。
Skillhubの講座は、HTMLやCSSの学習をはじめたばかりの方でも分かりやすいことが大前提。親しみやすい表現+図解を使った解説が中心です。
実際に使って、動かしながら体得しましょう！
本講座ではCSSについての解説を読むのではなく、コードを書いたり、検証ツールで値を変更することで学習して頂きます。実際に動かしてみるからこそ、類似プロパティとの違いや、プロパティの値の特徴を短時間で理解できます。
ブラウザの検証ツールを使ってCSSを調整する、崩れの原因を探す場面はお仕事でも多くあります。レッスンと一緒に検証ツールを使って動作を確認していくことで、自然と実践的なセルフデバック力も見についていきます。
脱コピペ! 作りたいレイアウトを作成可能
本講座で取り上げているCSSプロパティは、多くのWebサイトで装飾やレイアウトに使われています。例えば同じ疑似要素::afterでも、使い方によって見え方は様々。幅広いデザインに応用することが出来ます。検証ツールも併用すれば、作りたいデザインをイチからコーディングできるようになりますよ。
本講座の受講に必要なスキル
レッスンをスムーズに進めるため、HTMLとCSSの基礎学習後の受講がオススメです。
- HTML,CSSの基本書式を理解している
- Flexboxを使える（レイアウトができる）
- ブラウザ付属の検証ツールが使える
本講座を終えると、できるようになること
- Flexboxで様々なレイアウトが組める
- positionプロパティを使った配置ができる
- 疑似要素、擬似クラスの違いが分かる
- 疑似要素で装飾性の高いページを作成できる
- 指定された方法で色をつけることが出来る
この講座で学べること
- HTMLの概要と基礎知識が身につく
- CSSの概要と基礎知識が身につく
- CSSの疑似要素、擬似クラスがわかる
- 作りたいレイアウトが組めるようになる
こんな方におすすめです
- Web制作未経験/初心者の方
- HTMLとCSSの基本的な仕組みを理解したい方
- HTMLとCSSの基礎を理解したけど、作りたいページにならない方
- 無料で基礎を学びたい方
受講の前に用意するもの
- WindowsもしくはMacのパソコンがある方
- パソコンの基本操作ができる方
- 【推奨】Google Chrome がインストールされている環境 ※他のブラウザでもOKですが、動画と同じ操作画面にするために、同じ環境を推奨します。
カリキュラム
- 1講座内容と使用素材について本講座ではpositionや疑似要素などを使って、HTML/CSSの書き方入門講座の応用的なコーディングを習得して頂きます。実際にコードを書きながらレッスンを進められるよう、素材をご利用下さい。
- 2CSSで使う色指定の種類、画像から色(カラーコード)を調べる方法を知ろうCSSで文字色や背景色を指定するときに使用するカラーコード。どんな種類があるのか、指定する色の調べ方を解説します。IllustratorやPhotoshopを立ち上げずに画像の色を調べる方法もありますよ。
- 3CSSでリンクの下線を消し、擬似クラス:hoverでマウスオーバー時の色を変えるテキストリンクの装飾方法をしてみましょう。リンク文字の下に表示される線の変更、擬似クラス（:hover）を使ってマウスオーバー時に文字色や背景色を変更する方法を解説します。
- 4Flexboxレイアウト・アイテム配置方法に関係するプロパティを知ろうCSSのFlexboxには、レイアウト構成のためのプロパティがたくさん用意されています。フレックスアイテムの配置に関わるプロパティを中心に、ヘッダーナビゲーションを作成しながら学習しましょう。
- 5ブロック?インライン要素? タグの種類とdisplayプロパティについて知ろうブロックレベル要素・インライン要素という言葉を聞いたことはありませんか？これらの区分の元ともなっているdisplayプロパティのblock、inline、inline-blockの特徴について解説します。
- 6CSSのz-indexとpositionで要素を好きな位置に、重ねて表示する方法positionプロパティの指定方法・使い方を解説します。習得すると要素を好きな位置に表示することができるので、デザイン性や利便性の高いwebデザインのコーディングが可能になります。
- 7CSSの疑似要素とは? beforeとafterの設定方法・使い方を知ろうCSSの疑似要素について学びましょう。疑似要素の中でもよく使われる::beforeと::afterの基本の書き方、装飾的な使用方法を解説します。
HTML&CSSでつくるWebサイト制作入門 - はじめてのWEBデザイン
Web制作未経験/初心者の方に向けた、全7レッスンの講座です。上から順に、1つずつ進めてください。
- HTMLの概要と基礎知識が身につく
- CSSの概要と基礎知識が身につく
- CSSの疑似要素、擬似クラスがわかる
- 作りたいレイアウトが組めるようになる