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に構成を伝えれば自動で生成できる