HTML&CSSでつくるWebサイト制作入門 - はじめてのWEBデザイン

HTML&CSSを使って多くのWebページで使われている装飾技法を学びましょう。解説と一緒にコードを書き、検証ツールで整えなが進めることで「自分で考えてコーディングする」ことができるようになります。

※ ログインする必要はありません。


無料

レベル

ビギナー

7レッスン

access_time 0日間

脱初心者・脱コピペ!
CSSを活用した、装飾的Webコーディング

~ 作りたいデザインから、考えてコーディングできるようになる方法 ~

HTMLとCSSを学習して慣れてくると、「習ったことは出来るけど、作りたいサイトはどうコーディングしてよいかわからない」という壁にぶつかるタイミングがあります。
頑張ってCSSを書いたけれど崩れてしまったり、コピペOKのサイトからコードを貰ったものの調整できなかったり…。そんな経験がある方も少なく無いのではないでしょうか?

【レッスンで解説するCSSデザインの一例】

本講座では、見本コードやCSSの解説はもちろん、デザインからHTML/CSSを組み立てる考え方から、CSSの調整方法も公開。わかった気になるコーディング学習ではなく、コードに触れながら理解を深められる構成になっています。

短時間で実践的な基礎スキルを習得可能にするSkillhubメソッド

多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。ほんとうに必要な知識だけを厳選しているからこそ、受講した日のうちにレベルアップを感じられる超短期学習が実現できます。

1

図解たっぷり! むずかしい定義もすんなり理解できます

HTMLやCSSには心強いリファレンスサイトが多くありますが、厳密性を重視した解説は非常に難解です。複雑なことができるCSSプロパティになるほど、解説読解の難易度も上がってしまうのです。

Skillhubの講座は、HTMLやCSSの学習をはじめたばかりの方でも分かりやすいことが大前提。親しみやすい表現+図解を使った解説が中心です。

2

実際に使って、動かしながら体得しましょう!

本講座ではCSSについての解説を読むのではなく、コードを書いたり、検証ツールで値を変更することで学習して頂きます。実際に動かしてみるからこそ、類似プロパティとの違いや、プロパティの値の特徴を短時間で理解できます。

ブラウザの検証ツールを使ってCSSを調整する、崩れの原因を探す場面はお仕事でも多くあります。レッスンと一緒に検証ツールを使って動作を確認していくことで、自然と実践的なセルフデバック力も見についていきます。

3

脱コピペ! 作りたいレイアウトを作成可能

本講座で取り上げているCSSプロパティは、多くのWebサイトで装飾やレイアウトに使われています。例えば同じ疑似要素::afterでも、使い方によって見え方は様々。幅広いデザインに応用することが出来ます。検証ツールも併用すれば、作りたいデザインをイチからコーディングできるようになりますよ。

本講座の受講に必要なスキル

レッスンをスムーズに進めるため、HTMLとCSSの基礎学習後の受講がオススメです。

  • HTML,CSSの基本書式を理解している
  • Flexboxを使える(レイアウトができる)
  • ブラウザ付属の検証ツールが使える

本講座を終えると、できるようになること

  • Flexboxで様々なレイアウトが組める
  • positionプロパティを使った配置ができる
  • 疑似要素、擬似クラスの違いが分かる
  • 疑似要素で装飾性の高いページを作成できる
  • 指定された方法で色をつけることが出来る

レッスン内容

もっと見る


HTML&CSSでつくるWebサイト制作入門 - はじめてのWEBデザインを 無料で始めましょう!

募集人数には制限があります。サインアップはお早めに。

※ ログインする必要はありません。

無料申し込み期限

5月22日まで


募集
人数

100名 (残りわずか)

×