HTML・CSSでWebサイトをつくる
白紙の画面から、スマートフォン対応のWebサイトを公開するまで。
HTMLで骨組みをつくり、CSSで見た目を整え、FlexboxとGridで配置します。 最後はスマートフォンへ対応し、完成したWebサイトを公開します。
このコースで作るもの
編を進むごとに、同じ 1 枚のページがこう育ちます。実物をそのまま描いています。
1. 骨組みだけ
見出し・リスト・表・フォームまで、意味の通る骨組みを組み上げます
2. 色と文字が付く
同じ HTML に色・余白・影を当てて、読みやすいカードにします
3. 画面幅に合う
Flexbox と Grid で並べ、スマホと PC の両方に合わせます
白紙から、公開できるWebサイトへ
HTML → CSS → レイアウト → スマホ対応・公開の順に進みます。 4つの学習コースを終えたら、道場で白紙から1ページを組み上げます。
STEP 1｜意味のある骨組みをつくる
HTML入門
Webページの骨組みをつくる
見出し、文章、画像、リンク。まずはWebページを構成する基本的な部品から始めます。 毎レッスン少しずつ自己紹介ページを書き足しながら、header・main・footerを使った1ページを完成させます。
STEP 2｜見た目を整える
CSS入門
色・文字・余白で装飾する
HTMLでつくったページに、色、文字、余白、背景、hoverなどのデザインを加えていきます。 書き方を覚えるだけでなく、自分のページが変わっていく感覚を体験します。
STEP 3｜要素を自在に並べる
CSSレイアウト
Flexbox・Gridで配置する
横並び、中央寄せ、カードレイアウトをFlexboxとGridで実装します。 用途に合う配置方法を選び、ナビゲーションと作品ギャラリーを完成させます。
STEP 4｜スマホ対応して公開する
レスポンシブWeb制作
スマホ対応して公開する
viewport、メディアクエリ、相対単位、モバイルファーストを学びます。 PCとスマートフォンで確認し、自分らしく仕上げたプロフィールサイトを公開します。
見本なしで、どこまで書ける？
ここまでは、教材を読みながらコードを書いてきました。 次は説明を読んで写すのではなく、依頼と完成条件だけを見て、自分で考えてつくります。
チャレンジしてみよう!
HTML/CSS道場
陽葵「ハレノヒ珈琲、開店を手伝ってくれる?」
カード、ナビゲーション、表、ヒーロー、グリッド、フォーム、フッター。 10個の依頼をひとつずつ解決し、最後はカフェのランディングページを白紙から完成させます。
この知識が出る資格
ここで学ぶ内容は、次の試験でも問われます
人気のコース
いま多くの方が取り組んでいるコースです
エンジニアキャリアの歩き方
フロントエンド、バックエンド、フルスタック、インフラ、AI/ML などエンジニアの主要キャリアパスと、各分野で求められるスキルセットや年収レンジを学べる無料コースです。これからエンジニア転職を考えている方や、自分の方向性を整理したい現役エンジニアを対象としています。全 30 レッスンを修了すると、自分に合った進路を見極めて学習計画を立てられるようになります。
30レッスン
プログラミング学習のはじめ方
プログラミング学習の進め方、言語の選び方、環境構築、つまずきやすいポイントの乗り越え方を、最短ルートで整理した無料の導入コースです。これから学習を始めたい完全初学者や、独学が続かず行き詰まっている方を対象としています。全 5 レッスンを修了すると、迷わず自分に合った学習ロードマップを描いて走り出せるようになります。
5レッスン
はじめての生成AI
ChatGPT、Claude、Gemini など主要な生成 AI の仕組みと使い分け、ハルシネーション対策、業務活用シナリオを手を動かして学べる無料コースです。AI 初学者や、業務効率化を進めたいビジネスパーソンを対象に、技術背景がなくても進められる構成です。全 76 レッスンを修了すると、AI を使った業務自動化や情報整理を自分で設計できるようになります。
42レッスン
AIへの指示の出し方：プロンプト入門
Chain of Thought、Few-shot、ロール指示、構造化出力、制約条件の設計など、生成 AI から狙った成果を引き出すプロンプト技法を体系的に学べるコースです。ChatGPT や Claude を業務で活用したいビジネスパーソンや AI エンジニアを対象としています。全 26 レッスンを修了すると、要件定義から評価まで再現性のあるプロンプトを自分で組めるようになります。
26レッスン