¥0
30日間返金保証
このコースの特徴
脱初心者・脱コピペ!
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プロパティを使った配置ができる
- 疑似要素、擬似クラスの違いが分かる
- 疑似要素で装飾性の高いページを作成できる
- 指定された方法で色をつけることが出来る
学習内容
こんな方におすすめ
受講に必要なもの
コースコンテンツ
講座内容と使用素材について
CSSで使う色指定の種類、画像から色(カラーコード)を調べる方法を知ろう
CSSでリンクの下線を消し、擬似クラス:hoverでマウスオーバー時の色を変える
Flexboxレイアウト・アイテム配置方法に関係するプロパティを知ろう
ブロック?インライン要素? タグの種類とdisplayプロパティについて知ろう
CSSのz-indexとpositionで要素を好きな位置に、重ねて表示する方法
CSSの疑似要素とは? beforeとafterの設定方法・使い方を知ろう
