CONTENTS
現場で役立つWeb制作力を、ゼロから学習できる。独学の限界を超える、段階別カリキュラム | Webtraining　- Webトレは、 初心者から実務までのWeb学習トレーニング

HTML

  1. HOME
  2. HTML

HTML COURSE

Webページの土台を、
意味のある構造から。

HTMLは、見出し、文章、画像、リンクなどを配置し、Webページの内容と構造を作るための言語です。実際にコードを入力しながら、基本的な書き方を一つずつ学びます。

Web制作が初めてでも大丈夫です。英字や記号の入力に不安がある方は、タイピング練習も利用しながら、基礎12課題、応用の順番で進められます。

HTML基礎から始める HTML応用を見る
TEST SITE HTML基礎テストに挑戦する

TYPING SUPPORT

コード入力に不安がある方へ

英字や記号の入力に慣れていない方は、HTML課題を始める前に、タイピングサイトのトライアルコースで基本的なキー入力を練習できます。

コード入力を練習してみる

COURSE MAP

基礎12課題から、少しずつ応用へ

初めての方はHTML基礎から始めます。よく使うタグとページの基本構造を学んだ後、応用講座で要素や属性の使い分けを確認します。

STEP 01

HTML基礎

HTMLファイルの作り方から始め、見出し、文章、画像、リンク、表、フォームなど、Webページでよく使う要素を順番に学びます。

  • 全12課題
  • 基本タグ
  • ページ構造
HTML基礎から始める

STEP 02

HTML応用

ページの情報をブラウザや検索エンジンへ伝えるmeta要素や、フォームで使うinput属性などを確認し、目的に合ったHTML要素を選ぶ力を身につけます。

  • meta要素
  • HTML要素辞典
  • フォーム属性
HTML応用へ進む

WHAT YOU WILL LEARN

この講座で学べること

HTMLタグをただ暗記するのではなく、「この内容にはどの要素を使うのか」を考え、人にもブラウザにも意味が伝わるページ構造を作る力を身につけます。

01

HTMLファイルの基本形を作る

DOCTYPE、html、head、bodyなど、HTMLファイルに必要な基本の書き方と、それぞれの役割を学びます。

02

文章を分かりやすく整理する

見出し、段落、強調、リストを使い、文章の順番や情報のまとまりが伝わるようにします。

03

画像やリンク、入力欄を配置する

画像、リンク、表、フォームを使い、情報を見せたり、利用者が入力したりできるページの土台を作ります。

04

役割が伝わる構造にする

header、main、section、articleなどを使い、ページのどこが見出し、本文、記事、メニューなのか分かる構造を作ります。

LEARNING FLOW

学習の流れ

必要に応じてタイピング練習から始め、コードを入力し、ブラウザで確認する作業を繰り返しながら、HTMLの書き方に慣れていきます。

  1. 01

    入力と学習環境を準備する

    英字や記号の入力に不安がある場合は、コード入力トライアルから始めます。その後、VS Codeなどのエディタと練習用フォルダを準備します。

  2. 02

    コードを入力する

    課題を見ながら自分の手でコードを入力し、タグ、属性、開始タグと終了タグの書き方を覚えます。

  3. 03

    ブラウザで表示を確認する

    保存したHTMLファイルをブラウザで開き、入力したコードと画面表示がどのようにつながっているか確認します。

  4. 04

    間違いを直しながら応用へ進む

    表示されないときはスペルやタグの閉じ忘れを確認します。基礎に慣れたら、meta要素やフォーム属性などの応用へ進みます。

BENEFITS

HTMLを学ぶメリット

Webページの構造を理解すると、CSSで見た目を整えたり、JavaScriptで動きを加えたりするときにも、どの要素を操作すればよいか分かりやすくなります。

Webページの中身をコードから読める

見出し、本文、画像、リンク、メニューなどが、HTMLのどの部分で作られているか分かるようになります。

CSSで装飾する場所を見つけやすくなる

HTMLのまとまりや親子関係を理解できるため、色や余白、レイアウトをどこへ設定すればよいか考えやすくなります。

JavaScriptの操作対象が分かる

ボタン、入力欄、画像などのHTML要素を理解することで、クリックや入力に反応する処理へ進みやすくなります。

伝わりやすいページを作れる

内容に合ったHTML要素を使うことで、利用者、検索エンジン、読み上げソフトにも情報の役割が伝わりやすくなります。

RECOMMENDED FOR

こんな方におすすめ

  • Web制作を初めて学ぶ方
  • パソコンでの英字や記号の入力に不安がある方
  • HTMLを一から学び直したい方
  • コードを自分の手で入力する練習をしたい方
  • タグの使い分けやページ構造に迷っている方
  • CSSやJavaScriptへ進むための土台を作りたい方
  • WordPressのテーマやテンプレートを理解したい方
  • 人や検索エンジンに伝わりやすいHTMLを書きたい方

NEXT COURSES

HTMLでページの内容と土台を作ったら、CSSで見た目を整え、JavaScriptで動きを加えます。制作前の画面設計を学びたい方はFigma講座も確認できます。

CSS

HTMLで作ったページに、色、余白、文字サイズ、レイアウトなどの見た目を加えます。

講座を見る

Figma

コードを書く前に、見出しや画像、ボタンをどこへ置くか画面の設計図を作ります。

講座を見る

JavaScript

HTMLで作ったボタンや入力欄を操作し、クリックや入力に反応する仕組みを作ります。

講座を見る

フロントエンドを極める

HTML・CSS・JavaScriptを順番に学び、Webページを完成させる流れを身につけます。

講座を見る