第1部:Web制作の基礎知識 Step 1 / 14

HTMLの基礎

HTMLはWebページの「骨組み」を作る言語です。難しそうに見えますが、基本はシンプル。AIの力を借りれば、すぐにWebページが作れるようになります。

HTMLとは

HTML(HyperText Markup Language)は、Webページの構造を記述するための言語です。

HTMLの役割

📄

構造を定義

見出し、段落、リストなど

🔗

リンクを作成

他のページへ移動

🖼️

メディアを配置

画像や動画を表示

基本的なHTMLタグ

HTMLは「タグ」と呼ばれる記号で構造を表現します。

基本構造:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページタイトル</title>
</head>
<body>
    <h1>見出し</h1>
    <p>段落テキスト</p>
</body>
</html>

よく使うタグ一覧

<h1>〜<h6> 見出し(h1が最大、h6が最小)
<p> 段落
<a href=""> リンク
<img src=""> 画像
<div> グループ化(汎用コンテナ)
<ul><li> リスト

AIでHTMLを書く

AIを使えば、HTMLを覚えなくても欲しい構造を作れます。

プロンプト例:

以下の内容でシンプルなHTMLページを作成してください。

・会社名:株式会社サンプル
・ロゴ画像:logo.png
・ナビゲーション:ホーム、サービス、会社概要、お問い合わせ
・メインビジュアル:「未来を創造する」というキャッチコピー
・3つのサービス紹介セクション
・フッター:著作権表示と住所

HTMLのみで、CSSは別ファイルで読み込む想定で書いてください。

ポイント:AIに具体的な構成を伝えると、適切なHTMLタグを選んでくれます。セマンティック(意味のある)なHTMLを意識して指示しましょう。

まとめ

  • HTMLはWebページの構造を作る言語
  • タグで要素を囲んで構造を表現
  • 見出し、段落、リンク、画像が基本
  • AIに構成を伝えれば自動で生成できる
トップページ 次へ:CSSの基礎