HTML・CSSでWebサイトをつくる

このコースで作るもの

編を進むごとに、同じ 1 枚のページがこう育ちます。実物をそのまま描いています。

白紙から、公開できるWebサイトへ

HTML → CSS → レイアウト → スマホ対応・公開の順に進みます。 4つの学習コースを終えたら、道場で白紙から1ページを組み上げます。

STEP 1｜意味のある骨組みをつくる

学習無料

HTML入門

Webページの骨組みをつくる

見出し、文章、画像、リンク。まずはWebページを構成する基本的な部品から始めます。 毎レッスン少しずつ自己紹介ページを書き足しながら、header・main・footerを使った1ページを完成させます。

初級20レッスン始める

STEP 2｜見た目を整える

学習無料

CSS入門

色・文字・余白で装飾する

HTMLでつくったページに、色、文字、余白、背景、hoverなどのデザインを加えていきます。 書き方を覚えるだけでなく、自分のページが変わっていく感覚を体験します。

初級19レッスン解説動画1本始める

STEP 3｜要素を自在に並べる

学習無料

CSSレイアウト

Flexbox・Gridで配置する

横並び、中央寄せ、カードレイアウトをFlexboxとGridで実装します。 用途に合う配置方法を選び、ナビゲーションと作品ギャラリーを完成させます。

初級12レッスン始める

STEP 4｜スマホ対応して公開する

学習無料

レスポンシブWeb制作

スマホ対応して公開する

viewport、メディアクエリ、相対単位、モバイルファーストを学びます。 PCとスマートフォンで確認し、自分らしく仕上げたプロフィールサイトを公開します。

初級10レッスン始める

見本なしで、どこまで書ける？

ここまでは、教材を読みながらコードを書いてきました。 次は説明を読んで写すのではなく、依頼と完成条件だけを見て、自分で考えてつくります。

チャレンジしてみよう!

道場有料プラン

HTML/CSS道場

陽葵「ハレノヒ珈琲、開店を手伝ってくれる?」

カード、ナビゲーション、表、ヒーロー、グリッド、フォーム、フッター。 10個の依頼をひとつずつ解決し、最後はカフェのランディングページを白紙から完成させます。

初級10レッスン道場に挑む

この知識が出る資格

ここで学ぶ内容は、次の試験でも問われます

ITパスポート

IT全般の基礎知識を問う入門資格

初級17レッスン見る

基本情報技術者（FE）

アルゴリズムと擬似言語が中心

中級79レッスン見る

人気のコース

いま多くの方が取り組んでいるコースです

エンジニアキャリアの歩き方

エンジニアの主要なキャリアパスと求められるスキルを学ぶ、全30レッスンの無料コースです。

初級30レッスン見る

プログラミング学習のはじめ方

学習の進め方、言語の選び方、つまずきの乗り越え方を整理した、全5レッスンの無料導入コースです。

初級5レッスン見る

Linux入門：コマンド操作のきほん

Linuxの基本概念とファイル操作を学び、コマンドでの移動・確認・整理を自力で行えるようにします。

初級14レッスン見る

はじめての生成AI

主要な生成AIの仕組みと使い分け、ハルシネーション対策、業務活用を手を動かして学ぶ無料コースです。

初級42レッスン見る

次に進むコース

JavaScript

コードを動かし、WebページとAPIへ広げる。

初級全6コース・141レッスン見る