どうも、ひろです。
今回は、webデザイナーには必須の「HTML」をHTML言語のみにこだわった記事をご紹介します。
※理由は、単純にHTMLだけを知って欲しいからです。
私は、専門学校がweb係の学校に行くくらいだったので（身についてはいない）、そのためか一定の周期でプログラミングがしたくなります。
その度、毎回まず始めに行うことが、「webデザイナー初心者」と検索して出てきたサイトを参考にしながら簡単なホームページ作成をしています。
その後は、やる気がなくなっていなかったら他の言語もサイトを見ながら写経しています。
ただ、見るサイトはいつも違うため（前に見たサイトが思い出せない）私にあったサイトをいちいち探すのが少しストレスでした。
なら、自分で自分に合ったサイトを作れば良いじゃんと思った私は、初心者専用の記事を書くことにしました。
拙い文章ですが、温かい目で見てください。
HTMLとは何か
私は「HTML」とはwebサイトを作るために必要な家だという認識です。
実際、AIに聞いてみたところ「webサイトを作るための柱」と書いてあったので、そんなに間違いないかなと思います。
HTMLは、文章や画像貼りリンク貼り、文字の配色は限定的ですが可能です。
可能は可能ですが、通常はその後に「CSS」でデザインを整えて「Javascript」で動きをつけるのが一般的とされています。
ちなみに、コードとはタグというものを用いてサイトを作るに当たって書いた命令文です。
※タグは後に説明します。
私なりにまとめると、「HTML」とはやっぱり家で、家のインテリを整えるために「CSS」水や電気を出したりつけるために「Javascript」が必要とういう認識になりました。
※学んでいくうちに、考えが変わっていく可能性あり。
コードはどんな文字を使う？
HTMLを書くに当たって、必要なコードが存在します。
そのコードは
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ホームページ</title>
</head>
<body></body>
</html>
です。
この< >の中に書いてあるコードは「タグ」と呼びます。
例えば<title>は、「タイトルタグ」と言います。
タグとは、簡単にいうと付箋の様なものです。
※ネットにそう書いてありました。
そしてタグは基本的に</title>と終わる時に「/」をつけます。
つまり
「<title>（ここから）タイトル</title>（ここまで）の文字がタイトルになりますよ」の付箋です。
という意味になります。
この、タグ（付箋）が書かれた文章がコード（命令文）となります。
タグの順番は、間違っているとうまく表示されなかったりする可能性が高いので、書いてある順番が望ましいです。
なので、上に書かれているコードの通りに書けばHTMLの大まかな設定の出来上がりです。
とはいえ、コードの役割が分かっていないとしっくりこない方もいると思います。
そこで、簡単ですがコードの役割をざっくりと書きました。
<!DOCTYPE html></html>
HTMLにはバージョンがあり、HTML4だったりHTML5だったりするそうです。
なので、このコードがないとうまく表示されなかったりします。
<html lang=”ja”>
このサイトは日本語で書かれていますよ。
<head></head>
設定
検索をかけた時に引っかかるためのコード
<meta charset=”UTF-8″>
どのパソコンで見ても、文字化けしませんよ。
このタグには</meta>は存在しません。
理由は、空要素のため開始タグだけで完結するためだそうです。
※ごめんなさい、今の私では意味わかりません。
<title>ホームページ</title>
名前の通り、タイトルです。
これがないと検索に引っかかりません。
<body></body>
サイトに表示されるもののコード。
この中で作らないと、サイトで表示されない可能性あり。
これさえ分かれば、大方の部分はサイトに表示されないというトラブルは防げるかと思います。
これからwebサイトを作る時は、忘れない様に書きましょう。
HTMLだけで、AIに頼んで実際にホームページを作ってみた
ここからは、AIに頼んでHTMLのみでホームページを作ってもらいました。
サイトのソースコード（サイトに反映させるためのコード）見ながら、他のコードの説明（簡単なものだけ）していきます。
AIに頼んで、HTMLのみで作成してもらったサイトです。
通常は、「CSS」を用いて書くところがありますが、今回はわざとHTMLだけで作りました。
ただ、やはり細かくサイトを作りたい場合は、やはり「CSS」を用いて作成する方が良いなと改めて思いました。
このサイトのソースコード（サイトを表示させるためのコード）を見ていきましょう。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>自己紹介サイト</title>
</head>
<body bgcolor=”#f5f7fa”><center>
<h1><font color=”#1e3a8a”>ようこそ！</font></h1>
<hr width=”50%”>
<h2><font color=”#2563eb”>自己紹介</font></h2>
<p>
はじめまして。<br>
HTMLを勉強中です。
</p><h2><font color=”#2563eb”>趣味</font></h2>
<p>
ゲーム<br>
映画鑑賞<br>
プログラミング学習
</p><h2><font color=”#2563eb”>好きなサイト</font></h2>
<p>
<a href=”https://www.google.com”>
</a>
</p><h2><font color=”#2563eb”>今日のひとこと</font></h2>
<p>
継続は力なり！
</p><hr width=”50%”>
<p>
© 2026 自己紹介サイト
</p></center>
</body>
</html>
先ほどご説明した重要なコードは、省いて説明していきます。
<hr width=”50%”>
罫線を引くためのタグです。
<p></p>
サイトに表示する文字を書くためのタグです。
<h1></h1>とか<h2></h2>
メインタイトルにつけるためのタグです。
文字の大きさが変わりますが、サイズは指定できません。
h1よりh2の方が文字の大きさは小さいです。
サブタイトル的な扱いで、やはりサイズ指定はできません。
<font color=”#2563eb”>今日のひとこと</font>
文字の色を変えてくれます。
色の指定は英語でも変更できます。
例 ”#2563eb”→redでも可能
<p><font size=”1″>今日のひとこと</font></p>
今回は書かれてはいませんが、字の大きさを変えてくれます。
数字が大きくなるにつれて文字の大きさも大きくなります。
<a href=”https://www.google.com”>Google</a>
リンク先を指定します。
※実際にこのコードをコピペして、Googleの文字をクリックするとGoogleのサイトに飛びます。
<br>
改行
※このタグには</br>はいりません。
<center></center>
表示される全てを、真ん中に持ってきてくれます。
まだまだ色んなタグはありますが、今回は表示されている内容少しプラスアルファでご紹介しました。
終わりに
今回は、HTMLのみにこだわってご紹介しました。
HTMLのみでもここまでできます。
なんなら、もうちょっとレベルの高いサイトだって作れます。
でも、色んなところに書いてはいますが、やはりHTMLでは限界があるので「CSS」の活用をお勧めします。
※私的には「Javascript」はなくても良いですが、動きをつけたい方は必須です。というより、あった方が格好良い！
次回は「HTML」の装飾担当である「CSS」をご紹介します。
ご覧いただき、ありがとうございました。
