Webデザインを始める人が知るべきHTMLキホンのコト【Webデザイン】【超初心者向け】

Dr.マッシュ

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

ユウ

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

Webデザイナーを目指したい
ブログを自分好みにデザインしたい
という方は、デザインの勉強をするかHTML、CSSなどのコーディングの勉強をするか迷うと思います。

僕の主観的な意見ですが、コーディングは最低限サクッと身につけてデザインの勉強なりブログ記事を作成する方に時間を割いた方が良いです。

ということで、今回はWebデザインをするために最低限知っておく知識として、HTMLの基本についてお話しします。

当記事はWebサイトをデザインしたいという方向けにザックリとお話ししています。

Webコーダーになりたい、キチンと理解したいという方は専門書などでしっかりと学ぶことをオススメします。

HTMLって何？
- CSSとの関係性
- PHPとの違いについて
Webデザインする上で必要な知識
- デザインするためのHTMLのキホン
- HTMLを書くときの流れ
HTMLを学ぶのにオススメな書籍
まとめ

HTMLって何？

「HTML」というのはWebサイトの土台となるファイルを作成するマークアップ言語です。
「見出し」や「テキスト」、「画像」などの位置を書いていくだけなので、初心者でも理解しやすい言語です。

今はWordPressやSTUDIOなどのツールを使えばHTMLを知らなくてもサイトが作れてしまうので、変則的なデザインを実装したい人やSEOを意識してサイトをコードから作り込みたい人などでない限り詳しく知る必要はないでしょう。

CSSとの関係性

HTMLは位置だけしか書けないので、そのままだと見出しも本文も同じ大きさや色で画像はそのままのサイズで表示されてしまいます。

それを解決するのがCSSで、色をつけたりフォントサイズを変えたりデザイン的なことはなんでもやってくれます。

HTMLが鉛筆（黒）だとしたら、CSSは色鉛筆や絵の具みたいなものだと思っておくと良いでしょう。

CSSのキホンはこちらの記事をお読みください。

PHPとの違いについて

HTMLは位置だけしか書けないので、動きや条件をつけて分岐などはできません。

例えば「記事Aをトップに表示する」ならできますが、
「最新の記事をトップに表示する」はできません。
※最新の記事は更新する度に変わるので

そういった「機能」を追加するのがPHPでHTMLの中に書いていきます。

先ほどの例でいくとPHPはハサミやノリ、ホッチキスなどの文房具でしょうか。

Webデザインする上で必要な知識

実際にWebサイトをデザインするのであれば、HTML（と少しのPHP）を調べれば読める程度の知識があれば十分です。

デザインはCSSで行っていく訳ですが、CSSはHTMLに対応してデザイン要素をつけていくので、デザインしたい場所がどこなのか、分かる必要があります。

何も知らないと「１箇所変えるつもりが数十箇所変わってしまった！」
なんてミスもしてしまうので、覚えておきましょう。

デザインするためのHTMLのキホン

ということで、デザインをするためのHTMLの基本的なことを以下に挙げておきます。
覚えるのが嫌いな人でも最低限これは覚えておきましょう。

HTMLは「<」「>」で作る「タグ」と言う文字列で囲んで書いていく
<h1>見出し</h1>といったように同じタグ内に表示したい内容を書いて終わりのタグには「/」(スラッシュ)が入る
<a>はリンク<p>はテキストといったようにタグは目的によって使い分ける必要がある
<a style=”クラス”>といったようにタグに対してCSS用のクラスを名付ける

タグの種類は調べれば出てきますし、よく出てくるタグは実際に作業していると勝手に覚えるのでタグっていうものがあるんだくらいで大丈夫です。

HTMLを書くときの流れ

まだイケる！っていう人はHTMLを書く時の流れも知っておくと、
サイトのコードの全容がなんとなく分かるようになるので、もっと読むのが楽になります。

「もう無理！」って人は読み飛ばしちゃってください。

<!DOCTYPE html>でこのファイルはHTMLです！と宣言する
<head>タグを作りサイトのタイトルやCSSファイルの読み込みなどをする
<body>タグを作りサイトの中身を作っていく
実際に表示されるヘッダー、メイン、フッターの順に書いていく

どんなサイトもこんな感じで書かれています。

それぞれの詳しい説明は省略しますが、知りたい人は下記の記事が参考になると思います。

HTMLテンプレートの基本的な書き方＆おすすめを紹介！ | ポテパンスタイル

目次1 HTMLテンプレートとは？2 HTMLテンプレートで基本的な書き方（雛形コード）3 テンプレートを選ぶ際のポイント4 HTMLテンプレートのおすすめをタ...

HTMLを学ぶのにオススメな書籍

最低限、この記事に書いてあることを知っておけばWordPressのサイトを見ながらCSSを変えるくらいのことはできると思います。

実際にやってみて興味が出たならHTMLとCSSの書籍を一冊読んでみるとよいでしょう。
HTMLは簡単なので、サクッと読んで理解できると思います。

初心者向けの書籍なら正直なんでも良いとは思いますが、以下の書籍は読みやすくて理解もしやすいのでオススメです。

リンク

まとめ

Webデザインをしてみたい方向けにHTMLの基本的なことをお話ししました。

今はWordPressやSTUDIOなどでサイトが作れてしまうので、必要なのか迷ってしまいますよね。

ですが、本格的なサイトを作るには必須の知識なので最初に学んでおくのが一番良いと思います。
あとはトライアンドエラーで実際に作業しつつ覚えていきましょう。

HTMLはテキストや図の位置を書いていくマークアップ言語
デザインはCSS、機能はPHPを使って書く必要がある
WebデザインがしたいならHTMLを調べて読めるくらいを目指そう