HTMLってなに?WEBデザインを始める人向けに解説

WEBページを制作するには、まずHTMLという言語で全体的な構造を構成していくところから始まります。 このWEBページの構造を構成していく作業をマークアップと呼び、文章を入力したり、画像を挿入したり、リンクをつけたりすることができます。

でもいきなりHTMLという言語を使ってWEBページの構成をしていくと言われてもどういうことやら見当も付きませんよね。それでは実際にHTMLがどういう風にWEBページを構成していくか、簡単な例を見ていきましょう。

見慣れぬコードに拒否反応を起こさないで!


<body>
  <div>
    <h1>hタグの中には見出しを入力します。</h1>
    <p>pタグの中には文章を入力します。</p>
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ul>
  </div>
</body>

これがHTMLの構文になります。最初は「なんじゃこりゃ?pとかdivとか訳が分からん!」ってなっちゃうかもしれませんが、最初はわからなくて当然です!HTMLもマークアップ言語と呼ばれ、一つの言語なのです。IQが300ある人だって、勉強したことがない言語を最初に見たときはわかるわけがありません。少しずつ徐々に勉強して使っていくことで身に付いていくものなので、今はわからなくても何も気にすることはありません!


ただ、特に理由もなくこのような黒い画面に訳が分からないアルファベットが並んでいるだけで拒否反応を起こしてしまう方が多いです。「私には無理だ」と食わず嫌いのように諦めてしまうのではなく、少しでもプログラミングを覚えたいという意思がある方には是非一度はチャレンジしてもらいたいです!少なくとも、このブログを読めるくらい日本語を理解できているアナタなら大丈夫!日本語より100万倍簡単ですよ(笑)

HTMLのコードが何を意味しているのか解説

それでは先ほどのコードが何を意味しているのか分かりやすく解説していきます。
まず、<body>や<div>や<p>などをタグ(開始タグ)と呼び、終了するときは”/”を付けることで終了タグとなります。

  <p>テキスト</p>
  

つまり、このコードは”テキスト”という文字列をpタグで囲っているということになります。
HTMLで用いられるタグにはたくさんの種類があり、それぞれ開始タグと終了タグに囲まれた文字列に何らかの意味を与えます。

よく使われるタグの一例

タグ 説明
<body> ブラウザの中に表示させる部分全体を表すタグ
<p> 一つの段落であることを表すタグ
<h1> 見出しであることを表すタグ
hの後の数字が大きくなるほど下位の見出しとなる。
<h1>が最も大見出し。<h6>が最も小見出し。
<div> 一つのかたまり(ブロック)であることを表すタグ
<ul> リスト(順序なし)を表示するためのタグ
<li> リストの内容を表示するためのタグ

上記を参考に先ほどのコードをもう一度見てみましょう。


<body>
  <div>
    <h1>hタグの中には見出しを入力します。</h1>
    <p>pタグの中には文章を入力します。</p>
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ul>
  </div>
  <div>
    <h2>初心者でもプログラミングは出来る</h2>
    <p>1日1時間の勉強からでもしっかり勉強すればプログラミングは出来るようになります!</p>
  </div>
</body>

  1. 1行目:<body>で表示させる部分であることを示し、15行目の</body>で終了。
  2. 2行目:<div>で10行目の</div>までが一つのブロックであることを示す。
  3. 3行目:見出しとなる文章を<h1>で囲う。
  4. 4行目:コンテンツとなる段落(文章)を<p>で囲う。
  5. 5行目:<ul>でリスト(箇条書き)が始まることを示す。
  6. 6行目~8行目:<li>でリストの項目を囲う。
  7. 11行目:<div>で14行目までが二つ目のブロックであることを示す。
  8. 12行目:<h2>で<h1>より少し小さな見出しであることを示す。
  9. 13行目:12行目の見出しに対する文章を示す。

一行ずつ説明していきましたが、なんとなくでもご理解いただけましたでしょうか?
そしてこのコードを実際にブラウザで表示させるとこんな感じになります。

まだまだウェブページと呼ぶには程遠い感じになっていますが、HTMLのコードだけで表示させると、だいたいどのサイトもこんな感じです。この状態からCSSという言語を使って全体のレイアウトを整えていくと、あっという間に良い感じのウェブページに仕上がりますので、HTMLの言語に慣れてきたらCSSを少しずつ覚えていきましょう!基本的にHTMLはCSSとセットになってウェブページのレイアウトを作ります。

まとめ

いかがでしたでしょうか?めちゃくちゃ簡単にではありましたが、HTMLの意味や書き方を少しはご理解いただけましたでしょうか?HTMLのタグはまだまだたくさんあり、改訂される度に新しいものが次々に増えたりと学習しても学習してもキリがないのですが、よく使うものはかなり絞られるので新しい技を覚えるゲーム感覚で楽しみながらやっていきましょう(^^)

カテゴリーHTML

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です