本文へスキップ
スキルアップカレッジ

HTML・CSS入門

Web制作 入門 全7レッスン 約180分

公開日：　最終更新日：

コース概要

このコースは、HTMLとCSSを使って自分の手でWebページを組み立てられるようになることを目標とした、実習中心の入門コースです。テキストエディタとブラウザがあれば、今すぐ始められます。1レッスンごとに小さなコードを書き、ブラウザで結果を確認しながら進めるスタイルで、最終レッスンでは自己紹介・作品紹介・お問い合わせの3ページ構成のサイトを自分で完成させます。自分のパソコンの中でフォルダを作り、ファイルを保存し、ブラウザで開く——という実際のWeb制作と同じ手順をはじめから体験してもらう構成です。

学習の流れ

レッスン1で開発環境（Visual Studio Code）を整え、最初のHTMLファイルを作って表示するところから始めます。レッスン2でHTMLの基本タグを覚えて文章をマークアップできるようにし、レッスン3でCSSによる装飾を加えます。レッスン4でボックスモデル、レッスン5でFlexboxによるレイアウト、レッスン6でレスポンシブデザインへと、見た目を整える技術を段階的に学びます。最後のレッスン7で、これまでの知識をすべて使って複数ページの小さなサイトを完成させます。前半（レッスン1〜3）は「文章を表示する力」、中盤（レッスン4〜5）は「レイアウトを組む力」、後半（レッスン6〜7）は「仕上げる力」を身につける流れです。

このコースで学べること

  • ✓ テキストエディタでHTMLファイルを作成し、ブラウザで開いて確認できる
  • ✓ 見出し・段落・リスト・リンク・画像といった基本タグを使い分けられる
  • ✓ CSSで色・フォント・余白・枠線などの装飾を適用できる
  • ✓ ボックスモデルとFlexboxを理解し、要素のレイアウトを組める
  • ✓ メディアクエリでスマートフォン表示にも対応できる
  • ✓ 複数ページからなる小さなWebサイトを自力で完成させられる

対象者

Webサイトを自分で作ってみたいが、HTMLやCSSの知識がほとんどない初学者。プログラミング自体が初めての方も対象。手を動かしながら基本を体得したい方

レッスン一覧

  1. 1

    はじめてのHTML——エディタを用意して最初のページを開く

    Visual Studio Codeのインストールから、フォルダとindex.htmlの作成、ブラウザでの表示確認までを実習する。HTMLファイルの基本構造（DOCTYPE・html・head・body）も理解する
  2. 2

    文章をマークアップする——見出し・段落・リスト・リンク・画像

    HTMLの基本タグを使って、自己紹介ページに文章・リスト・リンク・画像を配置する。タグの意味（セマンティクス）と正しい入れ子のルールも学ぶ
  3. 3

    CSSの基本——色とフォントでページを装飾する

    CSSの書き方（セレクタ・プロパティ・値）を学び、外部CSSファイルを作成してHTMLにリンクする。色・背景色・フォント・サイズなど基本プロパティを実習で適用する
  4. 4

    ボックスモデル——余白・枠線・サイズを操る

    ブロック要素とインライン要素の違い、margin・padding・borderの使い分けを理解する。box-sizingで実用的なサイズ計算ができるようになる
  5. 5

    レイアウトの基礎——Flexboxで横並びと整列を作る

    display: flexによる横並びレイアウト、justify-content・align-items・gapなど主要プロパティを学ぶ。横並びナビゲーションとカード並びのレイアウトを実習で作る
  6. 6

    レスポンシブデザイン——スマートフォンでもきれいに見せる

    viewport設定、メディアクエリ、相対単位（rem・%・vw）を学び、画面幅に応じてレイアウトが変わるページを作る。モバイルファーストの考え方も理解する
  7. 7

    仕上げ——複数ページの小さなサイトを完成させる

    複数のHTMLファイル間のリンク、共通CSSの使い回し、適切なフォルダ構成（assets/css・assets/img）を学び、自己紹介・作品紹介・お問い合わせの3ページ構成のサイトを完成させる
  8. ✓

    総復習テスト

    全レッスンの内容を振り返るテスト
このコースの用語集（68語）
開始タグ・終了タグ
HTMLのタグは原則として、開始タグ `<タグ名>` と終了タグ `</タグ名>` のペアで構成される。両者の間に書いた内容が、そのタグの効果を受ける。
開発者ツール（かいはつしゃつーる）
ブラウザに標準で備わった、Webページの構造やCSSを確認できるツール。F12キーや右クリックの「検証」から開ける。要素のHTML・CSSを確認したり、ボックスモデルを視覚化したりできる、Web制作の必須ツール。
カラーコード（からーこーど）
`#ff0000` のように `#` で始まる6桁の16進数で色を指定する形式。Web制作では最もよく使われる色指定の形式。
関連属性
タグの中に書く追加情報。「属性名="値"」の形で書く。例：`<a href="...">` の `href="..."` の部分。
交差軸
Flexboxにおいて、主軸に直交する方向。デフォルトでは縦方向。整列は `align-items` で制御する。
子要素・親要素
HTMLの入れ子構造で、外側にある要素を親要素、内側にある要素を子要素と呼ぶ。
すべての用語を見る →