HTMLの基本を徹底解説！超初心者でもわかるWebデザイン入門【Webデザイン】

Dr.マッシュ

Webデザイナーを目指したいんだけどHTMLの知識って必要なの？

ユウ

最低でも基本は知っておいた方が良いと思うよ！

「Webデザインを学びたい」「自分のブログをおしゃれにデザインしたい」
そんな方がまず迷うのが、デザインを学ぶべきか、HTMLやCSSなどのコーディングを学ぶべきかという点ではないでしょうか。

僕の考えでは、HTMLとCSSの基本をサクッと身につけてからデザイン学習に時間を使うのが効率的だと思います。

本記事ではWebデザインを始める人が最低限知っておくべきHTMLの基礎知識を、初心者にもわかりやすく解説していきます。

あくまでもザックリとした解説なので、本格的なコーディングやWeb制作職を目指す方は、専門書などでより深く学ぶと良いでしょう。

HTMLとは？
- HTMLとCSSの関係性
- HTMLとPHPの違い
Webデザインする上で必要な知識Webデザインに必要なHTMLの基本知識
- HTMLの基本構文
- HTMLを書くときの流れ
HTMLを学ぶのにオススメの書籍

HTMLとは？

HTMLとは、Webサイトの構造や内容を定義するマークアップ言語です。

Web上で「見出し」「本文」「画像」「リンク」などを配置するための「設計図」のような役割を持っています。

今ではWordPressやSTUDIOなどのツールを使えば、HTMLを直接書かなくてもWebサイトが作れるので、必要ないと思ってしまいがちです。

しかし、そもそも難しくない知識ですし、サイトの基本構造となる言語なので、しっかりと理解しておきましょう。

HTMLとCSSの関係性

HTMLはあくまで骨格や配置を作る言語で、デザイン（色・フォント・サイズなど）を担当するのはCSSです。

たとえば、HTMLが「鉛筆（黒）」だとしたら、CSSは「色鉛筆や絵の具」
HTMLだけでは地味なモノクロサイトですが、CSSで彩ることで魅力的なデザインに変わります。

CSSの基本については、別記事でも詳しく紹介しています。

HTMLとPHPの違い

HTMLは静的な情報しか扱えません。

そのため「記事Aをトップに表示する」ならできますが、「最新の記事をトップに表示する」といった動的な機能を実装するには別の言語が必要になります。

そこで登場するのがPHPです。

PHPはHTML内に埋め込むことで、ページを自動生成したり、条件分岐を行ったりできるプログラミング言語です。

それならPHPも知っておいた方が良いのか？と思うかもしれませんが、PHPはHTMLやCSSと比べると難しい言語なので、初心者の方にはあまりオススメしません。

静的なサイトが作れれば一旦は問題ないので、まずHTMLとCSSを理解すれば十分でしょう。

Webデザインする上で必要な知識Webデザインに必要なHTMLの基本知識

Webデザインで重要なのは、HTMLを「書ける」ことよりも「読める」こと。

CSSで自分がどの部分をデザインしているかを把握するために、HTMLの構造を理解しておく必要があります。

以下の基本だけでも覚えておきましょう。

HTMLの基本構文

HTMLは「タグ」と呼ばれる記述で構成されています。

タグは「<」と「>」で囲い、終わりのタグには「/」をつけます。

<h1>見出し</h1>
<p>これは本文テキストです。</p>
<a href="URL">リンク</a>

タグにはそれぞれ役割があり、

h1：見出し
p：段落（本文）
a：リンク

など、構造を明確にするために使い分けます。

タグの種類はたくさんありますが、よく使うものは実際に触っていると自然と覚えていきますし、分からなくてもすぐに調べられるので、無理に暗記する必要はありません。

また、CSSでデザインを適用したい場合は<a style=”クラス名”>といったようにタグにクラス（class）を設定します。

HTMLを書くときの流れ

HTMLファイルは、どのサイトでもほぼ同じ流れで構成されています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サイトのタイトル</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>ヘッダー</header>
    <main>メインコンテンツ</main>
    <footer>フッター</footer>
  </body>
</html>