女性向けエンジニアスクール
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個の依頼をひとつずつ解決し、最後はカフェのランディングページを白紙から完成させます。
スライドで復習する
手を動かす前に、図解でざっと思い出せます
そもそも、ブラウザって何？
Chrome や Safari など、Web ページを見るためのアプリです。アドレスを受け取ると、ページの材料を取りに行き、読みやすい画面に組み立てます。
表示されたWebページ
パン屋さんのお知らせ
新しいメニューを公開しました。
ブラウザの役割
取りに行く → 読む → 画面にする
ブラウザはインターネットそのものではありません。インターネットを通して材料を受け取り、私たちが読める画面にするアプリです。
1 / 4
Webページの正体は文字のファイル
Web ページの土台は、文字が書かれた HTML ファイルです。最初はタグや記号がなくても、書いた文字をブラウザがそのまま表示します。
山田 太郎
左のファイルに書いた1行が、右の画面へそのまま出ています。何も飾られていないのが、今は正解です。
2 / 4
HTML入門：Webページの骨組みをつくる
URLを開くと、ファイルが届く
1区間ずつ進めて、ブラウザが頼み、サーバーがファイルを返す流れを追いましょう。
- URL は、開きたいページの場所を示す住所
- ブラウザは「このページをください」とサーバーへ頼む
- 返ってきたファイルを、ブラウザが画面に表示する
3 / 4
考えてみよう外しても進めます
空の HTML ファイルに、タグを使わず「山田 太郎」と1行だけ書くと、ブラウザにはどう表示されますか。
選ぶと、この枚の中で答えと理由を確かめられます。
4 / 4
打ってから画面が出るまで
4枚同じ名前に、見出しという役割を足す
前回は名前をそのまま表示しました。h1タグで囲むと、文字は消えずに残り、その1行がページの見出しだとブラウザへ伝わります。
前回 タグなし
山田 太郎
文字として表示される
今回 h1で囲む
山田 太郎
ページの見出しとして表示される
大きく太く見えるのは、ブラウザが『これは見出し』と受け取った結果です。文字そのものを書き換えたわけではありません。
1 / 4
h1要素は3つで1組
開始タグと終了タグで中身を挟んだ全体を、要素と呼びます。前回の名前は消さず、前と後ろへタグを足すだけです。
終了タグにはスラッシュが付きます。左右のタグ名がどちらもh1なら、1組として名前を囲めています。
2 / 4
HTML入門：Webページの骨組みをつくる
h1は大きくするためのタグではない
h1が伝えるのは『この1行がページの主な見出し』という意味です。大きさや太さは、ブラウザがその意味を見た目へ変えた結果です。
文字を好きな大きさや色に変えるのは、次のレッスンで学ぶCSSの仕事です。HTMLでは、まず正しい役割を選びます。
| 受け取る相手 | h1から分かること |
|---|---|
| ブラウザ | ページの主な見出しとして画面に表示する |
| 検索エンジン | ページの主題を読み取る手掛かりにする |
| 読み上げソフト | 見出しだと知らせ、見出し間の移動に使う |
3 / 4
考えてみよう外しても進めます
自己紹介ページの名前をh1で囲む理由として、最も正しいものはどれですか。
選ぶと、この枚の中で答えと理由を確かめられます。
4 / 4
タグは飾りではなく意味付け
4枚HTML入門：Webページの骨組みをつくる
CSS を外すと中身は減らない
CSS を外して、同じ中身の並び方と大きさがどう変わるか見比べてください。
- CSS を外しても中身は1つも減らない。縦に積まれるだけ
- HTML が何が書いてあるかを決め、CSS がどう見えるかを決める
- 文章を変えずに色や大きさだけ直したいときは、CSS の側だけ書き替えれば済む
1 / 3
CSS の決まりを3つに分ける
今回書くCSSでは、h1で相手を選び、colorで変えるものを示し、最後に青の値を書きます。
h1どの要素に当てるかcolor色を変える#0071e3青を表す値このかたまりを <style> と </style> で囲み、前回のh1の下へ足します。HTMLの文章そのものは変えません。
2 / 3
考えてみよう外しても進めます
書いた style のかたまりをまるごと消すと、ページはどうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3
HTML と CSS の役割分担
3枚この知識が出る資格
ここで学ぶ内容は、次の試験でも問われます
人気のコース
いま多くの方が取り組んでいるコースです
エンジニアキャリアの歩き方
フロントエンド、バックエンド、フルスタック、インフラ、AI/ML などエンジニアの主要キャリアパスと、各分野で求められるスキルセットや年収レンジを学べる無料コースです。これからエンジニア転職を考えている方や、自分の方向性を整理したい現役エンジニアを対象としています。約 5 時間 (1 日 30 分 × 10 日) で 30 レッスンを修了でき、修了後は自分に合った進路を見極めて学習計画を立てられるようになります。
30レッスン
プログラミング学習のはじめ方
プログラミング学習の進め方、言語の選び方、環境構築、つまずきやすいポイントの乗り越え方を、最短ルートで整理した無料の導入コースです。これから学習を始めたい完全初学者や、独学が続かず行き詰まっている方を対象としています。約 1 時間 (1 日 30 分 × 2 日) で 5 レッスンを修了でき、修了後は迷わず自分に合った学習ロードマップを描いて走り出せるようになります。
5レッスン
はじめての生成AI
ChatGPT、Claude、Gemini など主要な生成 AI の仕組みと使い分け、ハルシネーション対策、業務活用シナリオを手を動かして学べる無料コースです。AI 初学者や、業務効率化を進めたいビジネスパーソンを対象に、技術背景がなくても進められる構成です。約 19 時間 (1 日 30 分 × 38 日) で 76 レッスンを修了でき、修了後は AI を使った業務自動化や情報整理を自分で設計できるようになります。
76レッスン
AIへの指示の出し方：プロンプト入門
Chain of Thought、Few-shot、ロール指示、構造化出力、制約条件の設計など、生成 AI から狙った成果を引き出すプロンプト技法を体系的に学べるコースです。ChatGPT や Claude を業務で活用したいビジネスパーソンや AI エンジニアを対象としています。約 7 時間 (1 日 30 分 × 14 日) で 26 レッスンを修了でき、修了後は要件定義から評価まで再現性のあるプロンプトを自分で組めるようになります。
26レッスン