HTMLって何？～ホームページ作成について～

ホームページ作成に関する情報を調べていると、必ずと言っていいほど目にする単語が 「HTML」 です。

HTML（エイチ・ティー・エム・エル）は
「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、
ホームページを組み立てるための言語です。

「言語」と聞くと難しく感じますが、
HTMLは、「家」を建てるための設計図と置き換えて考えるとわかりやすいかもしれません。

どこに玄関を配置して、どこにリビングを配置するのか？
そして、家具はどのように設置するのか？

といったように、
ページのどこに何を置くのか決める役割を持っています。

HTMLがしっかりしていないと、
どんなにCSSで装飾しても
そもそも「どれがリビングなのかわからない」「リビングがどこにあるかわからないので家具が置けない」という状態になり、
うまくページを作れません。

なぜHTMLが必要なの？

ホームページは、文章だけではなく、

• 見出し
• 文字の大きさ・色・強調
• 画像や動画
• 表（表組み）
• リンク
• ボタン

といった様々な要素で構成されています。

これらをブラウザ（ChromeやSafari）が理解できる形で表示するために、
「この文章は見出しですよ」「これは表ですよ」と明示する必要があります。

その役割を担うのがHTMLです。

HTMLは「タグ」と「要素」でできている

HTMLは基本的に、

• タグ（部品名）
• 要素（属性・見た目の変化）

の2つで構成されています。

タグとは？

タグは
文章の役割・構造を示すためのものです。

例

• <h1> →見出し（最も大きい見出し）
• <p> →段落
• <table> →表
• <a> →リンク

タグは、
「<>」を使って囲んで書くのが基本です。

<h1>見出しです</h1>
<p>文章です。</p>

要素とは？

要素は、タグに対して

• 色
• 文字の大きさ
• レイアウト
• 余白

などを指定し、見た目を調整することができます。

例

<h1 style="color: red;">見出し</h1>

この場合、style="color:red" が 要素 です。

タグ＝パーツ
要素＝どう見せたいか

と理解すると覚えやすいです。

HTMLは覚えたほうがいい？

結論から言うと、必須ではありませんが、理解していると作りたいホームページに更に近づけることが出来ます。

今日では

• WordPress
• Wix
• STUDIO
• Jimdo

など、多くの無料ホームページ作成サービスでHTMLを直接触らなくてもサイトを作れます。
※HTMLを使用せずにホームページを作成することをノーコードと言います。

さらに、最近はAI機能も搭載され、好きなデザインを自動でページ生成、という便利な環境が整っています。

しかし…

「細かく調整したい」「こだわったサイトを作りたい」

となった瞬間、HTMLの理解が壁になります。

ノーコードでも限界を感じるシーンがあります

HTMLの知識がないと困る代表例として、

• レイアウトが崩れて修正できない
• 文字の行間や余白が意図通りに作れない
• 画像の位置が揃わない
• 取り付けたい場所にテキストや画像がつけられない
• 少しでもHTMLの要素が見えると作業が止まってしまう

といったトラブルが起きます。

しかしこれらは、
HTMLやCSSの理解が少しあると即解決できることが多いです。

無料ホームページ作成サービスにてHTMLは必要なのか？

それでは先程挙げた無料のホームページ作成サービスではHTMLを覚えているとどう有利になるのか見ていきましょう。

WordPressではどうなる？

まずは世界で最も多く使われているホームページ作成サービスWordPressではどうなるのか見ていきましょう。

WordPressではテーマと呼ばれるテンプレートのようなものを使ってデザインの方向性を決めることが出来ます。
そして、ブロックエディターと呼ばれる機能を使用してホームページを作っていきます。

使用感覚はwordに近く、HTMLを直接操作せずに十分立派なホームページ作ることができます。

だけでも十分に形になります。

しかし、

• トップページのレイアウト調整
• グローバルメニューのカラーやデザインの編集
• 表のデザイン変更
• ボタンの細かなカスタム

などに手を出し始めると、
HTMLやCSSの最低限の理解が必要になります。

WixやSTUDIOならどうなるの？

WixやSTUDIOの無料ホームページサービスでは、

• HTMLを触らずにデザインが組める
• マウス操作だけで配置できる
• 標準でレスポンシブ対応

といった利点があります。

しかし、

• 細かくデザインを整える
• 特殊な表現を実装する
• 他サービスを埋め込む

となると、

• コード編集
• デベロッパー設定
• カスタム埋め込み

が必要になる場合があります。
やはり、WixやSTUDIOでもHTMLを多少理解していたほうがもっと魅力的なホームページを作成できます。

HTMLはどれぐらい覚えればいいの？

初心者の方は、まず以下が分かれば十分です。

• <h1> <h2> <p> の役割
• <a>（リンク）の貼り方
• <img>（画像）の表示方法
• <div>（囲い）の存在を知る
• style=""で見た目を変えられる

暗記よりも、概念が理解できればOK！

HTMLはホームページ理解に役立つ

HTMLに触れると、

• なぜ見た目がこうなるのか
• なぜ崩れるのか
• なぜ修正できないのか

が理解できるようになり、

トラブルに強いサイト運営者になれます。

これは、ノーコード全盛時代においても
大きな武器です。

✔ それでも難しい・時間がない方へ

正直、仕事をしながらHTMLを習得して
ホームページを維持するのは簡単ではありません。

そこで easy PAGE では、

• デザイン設計済みのベースサイトを作成
• HTMLやCSSを使った調整は代行
• 初心者向けに操作方法をレクチャー
• 保守・修正サポートも可能

といった形で、
“自分で更新できるホームページ” を提供しています。

「分からない部分だけ頼みたい」
「ここをこう直したい」
「もっと綺麗に見せたい」

などのご希望があれば、
お気軽にeasy PAGEへご相談ください。

ご相談はいつでも無料にて受け付けております。