H-1. HTMLを作成しよう！(extern)

2026

はじめに

HTML（HyperText Markup Language）はWebアプリケーションやWebサイトの「構造」を定義し、CSS（Cascading Style Sheets）はその「見た目」や「レイアウト」を制御する基盤技術です。フロントエンドエンジニアにとって、これらは単なるマークアップではなく、ユーザー体験とプロダクト価値を左右する重要なスキルです。

◼️ ユーザー行動を促進するUIを自ら実装できる
LPやWeb画面はユーザーとの最初の接点であり、フロントエンドエンジニアはHTMLで情報構造を設計し、CSSで視覚的な優先順位や操作性を調整します。これにより、ユーザーに信頼感を与え、自然な行動導線を作ることができます。
例：ボタンの配色やサイズ、余白を調整し、視認性とクリック率を向上させる改善を自ら実装できる。

◼️ 迅速な改修とイテレーションが可能
エンジニア自身がUIを直接修正できることで、仕様変更や改善要望に即時対応できます。開発プロセスにおけるボトルネックを減らし、PDCAを高速に回すことが可能になります。
例：文言変更やレイアウト調整などを即時反映し、ABテストやユーザーフィードバックをもとに継続的に改善できる。

◼️ 保守性と拡張性を意識した実装によるコスト最適化
HTML/CSSを適切に設計することで、再利用可能なコンポーネントやスタイル設計が実現でき、将来的な改修コストを抑えられます。結果として、開発・運用全体のコスト効率が向上します。
例：共通コンポーネント化やCSS設計（BEMなど）により、デザイン変更時の影響範囲を最小化する。

◼️ プロダクト全体を理解したフルスタックな価値提供
HTML/CSSを理解しているエンジニアは、フロントエンド実装からUX改善、バックエンド連携まで一貫して関われるため、プロダクト全体の最適化に貢献できます。単なる実装者ではなく、価値提供に直結するエンジニアとして活躍できます。

フロントエンドエンジニアにとってHTML/CSSは、「画面を作る技術」ではなく、「ユーザー体験を設計し、継続的に改善するための基盤技術」です。これを活用することで、開発スピード・品質・プロダクト価値のすべてを高めることができます。

HTMLを作成しよう！

HTMLとは、ホームページ上に表示をしたい文章や写真などの情報に対して、コンピュータに文章構成を指示するものです。

HTMLは、タグと呼ばれる要素の組み合わせで、ページ構造を定義することができます。タグについては、この後の学習で出てきますので、まずは以下の記述例がどのように表示されるのか、確認しましょう。

HTMLの記述例（内容を確認してください）

実際にエディターに記載してみよう。それぞれのタグを変更して、どう変わるかを確認してください。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ページタイトル</title>
</head>
<body>
  <!-- 大セクション -->
  <h1>大見出し</h1>
  <section>
    <!-- 中セクション -->
    <h2>中見出し</h2>
    <p>本文</p>
    <p>リンクは<a href="https://techmask-lab-version.bubbleapps.io/">こちら</a>です</p>
    <img src="https://muu-a2e49f8abc.heteml.net/wp-content/uploads/2021/12/image1.jpg" alt="サンプル画像">
  </section>
</body>
</html>

課題

上記の内容をエディターに記述して表示させてください。作成したファイル名をindex_h_1.htmlにして送ってください。

エディター（Editer）は、以下のいずれか使いやすい方を使ってコードを書いて下さい。

１．PC初心者、簡単に作成したい方向き（慣れたら、vscodeに移行します）

　　HTML CSS JavaScriptオンラインエディタ https://liveweave.com/

２．ある程度、PCやコードを理解している方向き

　本格的開発のweb用のソースコードエディタVisual Studio Code(vscode)

をダウンロードして利用してください。

実行結果

ヒント

  • HTMLファイルとは、HTMLが記述されたテキストファイルのことを指します。
  • ファイルの拡張子は「.html」にする必要があります（例えば「index.html」のようにします）。
  • 上位に<html> 下位に</html>を付ける必要があります。

課題・復習用検索キーワード

検索例
🔍HTML　タグ
🔍プログラミング　エディタ
🔍HTMLファイル　ローカル　表示方法

補足：参考のサイト

理解するためのWebサイト一覧

ウェブ開発を学ぶ