
今回は、WEB制作で必要な知識を細かく説明していくシリーズ第1段として「HTML」について設営します。
インターネット上に存在するWEBサイトは誰かが手を動かして作成しています。日頃WEB制作に関わりの無い人から見ると魔法のような謎の技術を使って出来上がってるんだと思われがちですが、一つ一つを見ていくと実はそこまで大層なものではありません。
今後、デザイナーにしても、ライターにしてもWEBの活用は重要になるかと思います。少しでもWEBの知識を持っていればその後の展開を切り開く事が可能になるかも知れません。そんな方へ、この記事でざっくりとした概要を理解して頂けたら幸いです。
WEB制作で必要な知識と技術
WEB制作で必要な知識と技術はざっくりと言うと以下の6点です。
- マークアップ言語
- スタイルシート
- プログラミング言語
- ブラウザの知識
- サーバーの知識
- ライティングスキル
- デザインスキル
マークアップ言語
マークアップ言語(Markup language)とは、HTMLと言われるWEBサイトの情報を呼び出すコアになる言語です。
WEBサイトを開いた状態で、右クリックをして「ページのソースを表示」を押して下さい。

「ページのソースを表示」を押すとこんな画面が出てきます。これがHTMLです。

よくプログラミングと勘違いされますが、これはプログラミングではありません。
HTMLはタグと言われる要素で表示したい内容を囲ってWEBサイトに表示させたい内容をマークアップしていきます。
<p>段落を表すタグ</p>
<span>テキストを表すタグ</span>
<div>囲いを表すタグ</div>
<>の中に入った「p」や「div」などをタグ要素と言い、<>で囲ったものを「pタグ」や「divタグ」と言います。そして上記のタグで囲ったコードはWEB上では以下のように文字列として表示されます。
段落を表すタグ
テキストを表すタグ
囲いを表すタグ
HTMLのタグはその他にも何百種類とあります。代表的なものは以下です。
p | 段落 |
span | 文字列 |
div | 囲い |
img | 画像 |
title | タイトル |
h1 | 大見出し |
h2 | 見出し |
h3 | 中見出し |
h4 | 小見出し |
table | 表 |
ul | リスト形式 |
li | リスト |
その他沢山ありますが今はこのくらいにしておきます。気になる方は「HTML タグ一覧」などとググってこのようなサイトを参照して下さい。→http://www.htmq.com/html5/
本気で学ぶ必要性はない人も多くいると思いますが、少しでもWEBに関わるクリエイターであるならば、WEBサイトはHTMLと言われるもので出来ていて、タグで囲っていくんだな。と言った認識を持っておくだけで、これからの仕事がスムーズに進むかも知れません。
この記事のライター
KEITO
WEBディレクター。 WEB制作を主に、マーケティング・デザイン・コンサルティングなどWEBに関する業務。特にディレクションが最も得意。
