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

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

今すぐ無料で受講する

7レッスン｜ビギナー

favorite_border

無料

レベル

ビギナー

7レッスン

access_time2日間

この講座について

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

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

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

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

本講座では、見本コードや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プロパティを使った配置ができる
疑似要素、擬似クラスの違いが分かる
疑似要素で装飾性の高いページを作成できる
指定された方法で色をつけることが出来る

レッスン内容

講座内容と使用素材について

本講座ではpositionや疑似要素などを使って、HTML/CSSの書き方入門講座の応用的なコーディングを習得して頂きます。実際にコードを書きながらレッスンを進められるよう、素材をご利用下さい。
CSSで使う色指定の種類、画像から色(カラーコード)を調べる方法を知ろう

CSSで文字色や背景色を指定するときに使用するカラーコード。どんな種類があるのか、指定する色の調べ方を解説します。IllustratorやPhotoshopを立ち上げずに画像の色を調べる方法もありますよ。
CSSでリンクの下線を消し、擬似クラス:hoverでマウスオーバー時の色を変える

テキストリンクの装飾方法をしてみましょう。リンク文字の下に表示される線の変更、擬似クラス（:hover）を使ってマウスオーバー時に文字色や背景色を変更する方法を解説します。
Flexboxレイアウト・アイテム配置方法に関係するプロパティを知ろう

CSSのFlexboxには、レイアウト構成のためのプロパティがたくさん用意されています。フレックスアイテムの配置に関わるプロパティを中心に、ヘッダーナビゲーションを作成しながら学習しましょう。
ブロック?インライン要素? タグの種類とdisplayプロパティについて知ろう

ブロックレベル要素・インライン要素という言葉を聞いたことはありませんか？これらの区分の元ともなっているdisplayプロパティのblock、inline、inline-blockの特徴について解説します。
CSSのz-indexとpositionで要素を好きな位置に、重ねて表示する方法

positionプロパティの指定方法・使い方を解説します。習得すると要素を好きな位置に表示することができるので、デザイン性や利便性の高いwebデザインのコーディングが可能になります。
CSSの疑似要素とは? beforeとafterの設定方法・使い方を知ろう

CSSの疑似要素について学びましょう。疑似要素の中でもよく使われる::beforeと::afterの基本の書き方、装飾的な使用方法を解説します。

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

0円

7レッスン｜ビギナー

favorite_border