HTMLの入口（0-0）｜まずは1ページを“形にする”までの最短ロードマップ（web-programming / html）
toshi
ToshiLab
【HTML 1-1】タグの基本｜見出し・段落・リンク・画像で“最初の1ページ”を作る（初心者向け）
toshi
記事内に商品プロモーションを含む場合があります
ここまで来たら、もう一回だけシンプルに進めます。
結論：今日はこれだけできればOKです。
- 見出しが出る
- 文章が出る
- リンクが押せる
- 画像が出せる
この4つが揃うと、「HTMLが分かった感」が出てきます。
では、さっそく作ります。
- 「このページのゴール（今日できればOK）」
-
✅ 今日のゴール
・index.html を作る
・基本タグ（h1 / p / a / img）を使う
・Live Server(vs code)で表示して確認するここまでできたら、次のCSSに進めます。
Q
フォルダとファイルを作る
準備
- VS Codeで「html」フォルダを開く
- htmlフォルダに index.html を作る
- 保存する（Ctrl+S / MacはCmd+S）
- Live Server(vs code)で開く（vs code右下「Go Live」）
コピペOK
まずは最小のHTML
下のコードを index.html にそのまま貼って保存してください。
保存できたら、ブラウザに表示されるはずです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>このページは、HTMLの練習用です。</p>
</body>
</html>
- <!DOCTYPE html>
<html lang=”ja”>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
の解説(必要な方のみ) -
1. <!DOCTYPE html> は何？
「このファイルは HTML5 で書いています」
とブラウザに伝える宣言です。
2. <html lang=”ja”> は何？
「このページの言語は日本語です」
と伝えるものです。
lang=”ja” の意味
lang = language（言語）
ja = Japanese（日本語）
※英語なら en
※まずは 「このページの言語を伝える設定」 と覚えればOKです
3. <meta charset=”utf-8″ /> は何？
「このページの文字コードは UTF-8 です」
と伝えています。
文字コードって何？
すごく簡単に言うと、
文字をコンピュータが読むためのルール です。
これがないとどうなる？
日本語がうまく読めず、
・文字化けする
・変な記号になる
・日本語が崩れる
ことがあります。
UTF-8 って？
今のWebでは、かなり標準的な文字コードです。
日本語も英語も扱いやすいので、基本これでOKです。
※Visual studio code(基本UTF-8になる為)の場合はあまり気にしなくて良いですが、
ご自身で用意されたEditorによって、自身で文字コードを選択して保存する際は
UTF-8(BOM無し)で保存するようにしてください。
4. <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> は何？
これは、
スマホで見たときの表示幅を正しく合わせる設定 です。
これがないとどうなる？
スマホで見たときに、
・文字がすごく小さくなる
・PCサイトを無理やり縮めたみたいに見える
・レイアウトが崩れやすい
ことがあります。
やさしく分けると
”width=device-width ”
画面の幅を、その端末の幅に合わせる という意味です。
たとえば、
スマホならスマホの幅
タブレットならタブレットの幅
に合わせて表示します。
” initial-scale=1 ”
最初の拡大率を1倍にする という意味です。
最初から変に縮小・拡大せず、自然な大きさで表示しやすくなります。
初心者向けの覚え方
スマホで正しく表示するための設定
今のWebページでは、かなり大事
とりあえず毎回入れてOK
Q
説明簡易版
| 記述 | 役割 |
|---|---|
<!DOCTYPE html> | HTML5で書いていると伝える |
<html lang="ja"> | このページは日本語だと伝える |
<meta charset="utf-8" /> | 文字化けを防ぐ |
<meta name="viewport" ...> | スマホで正しく表示しやすくする |
表示できたら、まずそれで十分です。
今はすべてを深く理解する必要はありません。
次へ進んで行きましょう。
見出し・リンク・画像
タグを少しずつ増やす
ここからは「足すだけ」です。
下の“追加版”を index.html に上書きして保存してください。
コピペOK：リンクと画像まで
追加版
※画像の用意が面倒な方へ下記よりsample.jpgをダウンロードできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>はじめてのHTML</title>
</head>
<body>
<header>
<h1>はじめてのHTML</h1>
<p>このページは、HTMLの練習用です。</p>
</header>
<main>
<h2>今日やること</h2>
<p>見出し・段落・リンク・画像を入れて、1ページを作ります。</p>
<h2>リンク（aタグ）</h2>
<p>
参考：<a href="https://developer.mozilla.org/ja/" target="_blank" rel="noopener">MDN（日本語）</a>
</p>
<h2>画像（imgタグ）</h2>
<p>まずは“画像が出る”ことだけ確認します。</p>
<!-- ① 画像を置いたら、下の src を書き換えます -->
<img src="images/sample.jpg" alt="サンプル画像" width="480" />
</main>
<footer>
<p>© ToshiLab</p>
</footer>
</body>
</html>ここが最初の山
画像が表示されないとき
ポイント
- index.html と同じ階層に「images」フォルダを作った？
- imagesフォルダの中に sample.jpg を置いた？
- ファイル名は本当に sample.jpg？（大文字小文字も一致してる？）
- 拡張子は .jpg？（.jpeg や .png ではない？）
- ブラウザを更新した？（Ctrl+R / Cmd+R）
- 「画像がない場合の“とりあえず確認”」
-
最初は画像が手元にないことも多いので、
いったん imgタグをコメントアウトして先に進んでもOKです。例：表示させたくないタグ等を <!– –> で囲む
<!– <img src=”images/sample.jpg” alt=”サンプル画像” width=”480″ /> –>
Q
最低限だけ
よく使うタグの意味
| タグ | 役割 | まず覚えること |
|---|---|---|
| h1 | いちばん大きい見出し | 1ページに基本1つ |
| h2 | 章の見出し | 見出しの区切りに使う |
| p | 段落（文章） | 文章はまずpでOK |
| a | リンク | hrefで飛び先を指定 |
| img | 画像 | src（画像の場所）とalt（説明） |
次に読む
HTML 1-2. へ
次は「ページの構造（header/main/footer）」をもう少しだけ整理します。
そのあとCSSに入ると、見た目が一気に整えられるようになります。
PR：最初の1冊（必要な方だけ）
PR：HTMLを進めるための参考（必要な方だけ）
HTML/CSSの最初の土台づくり用に、1冊だけ置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。
リンク
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
