おしえて！HTMLの書き方

calendar_today 2021/06/29 29 6月, 2021

「Web制作の基本。どうやって作るの？」でWebはHTMLというプログラミング言語で作られているとお伝えしました。


ここでは、HTMLの基本的な書き方について簡単に紹介しようと思います。

HTMLの基本形

まずはお決まりの形があります。

以下を基本形と思ってください。

HTML


<html>
   <head>
   </head>
   <body>
      テストです
   </body>
</html>

まず、HTMLは<html>と</html>で囲みます。

このように「<」と「>」で囲まれた部分をタグといいます。

<html>はhtmlタグと呼ばれます。

以降、HTMLに関してタグと出てきたら「<」と「>」で囲まれたやつだなと思い出してください。

最初に出てくる<html>のほうを開始タグといい、後ろの</html>を終了タグといいます。

終了タグは開始タグ名の先頭に「/」をつけます。

終了タグがいらないタグもありますが、開始タグと終了タグで囲むものが多いです。


次にhtmlタグの中にheadタグとbodyタグを用意します。

タグで囲った中に何か書く時は通常、キーボードのタブキーなどを使ってインデント（字下げ）します。

（しなくても動きますが、見やすくするためにそういう慣習があります。）

headタグとはwebページに関する情報を書く場所です。

例えばタイトルとか説明文とかそのページで使われるCSSやJavascriptとかです。

また、タイトルに関してはインターネットブラウザのタブに表示されますが、基本的にheadタグに書かれた情報はwebページ上に表示されるものではありません。

表示されるのはbodyタグに書かれる内容です。

ということで、表示したい内容をbodyタグに書くのですが、ここでも様々なタグを使うことになります。

(タグを使わなくても書かれた文章は表示されます。)

パソコンをお使いの方は適当にテキストファイルを作って上記のように書いてみてください。

保存したらインターネットブラウザを開いてそこにドラッグ＆ドロップしてみてください。

以下のように表示されるはずです。

MacのSafariで開いた場合はもしかしたら文字化けしてるかもしれません。

その場合はheadタグの中にWebページの文字コードを指定する一文を追加してください。

HTML


<html>
   <head>
      <meta charset="utf-8">　←これを追加してください
   </head>


余談ですけど、プログラミングを始めたばかりの頃に自分で作ったソースコードがこうやってブラウザに表示された時、ちょっと感動しました。

質素なページですけど、普段は見る側だったのに実際に作ることができたんだなって。

いろんなタグを使ってみよう

HTMLには様々なタグが用意されており、Webページはそれらを駆使して作られます。

タグはWebページがどういう情報を持っているのかを相手（Googleさんとかチームで開発してる場合は別のエンジニアさんとか）に伝えます。

正しく使い分けることを心掛けましょう！

ここから代表的なタグを紹介します。

サンプルコードも載せますので、bodyタグの開始タグと終了タグの間に書いてみてください。

h1タグ

HTML


<h1>記事のタイトル</h1>

見出し用のタグです。

見出しはh1タグの他にh2からh6まであります。

数字が上がれば上がるほど重要度が低くなります。

例えばこのページを例にすると、記事タイトル「おしえて！HTMLの書き方」は一番重要な内容なのでh1タグで書いています。

その中のサブタイトルとして、「いろんなタグを使ってみよう」はh2、「h1タグ」はh3を使っています。

一般的にどのタグを使うかで文字の大きさが変わります。

h1タグが一番大きくてh6タグが一番小さいです。

ただし、文字の大きさでタグを選んではいけません。

文字のサイズを変えたい場合はCSSで調整できます。

あくまでWebページの中での重要度、つまり伝えたい内容のレベルに応じてh1から順番に使ってください。

pタグ

HTML


<p>これはpタグです。</p>

段落を意味します。

記事とかを書いていると多分一番よく使われるタグだと思います。

aタグ

HTML


<a href="https://google.co.jp">Googleを開きます</a>
<a href="https://google.co.jp" target="_blank">別タブでGoogleを開きます</a>

リンク用のタグです。

aタグで囲まれた文字をクリックすると指定されたページに移動することができます。

タグの中にhref=と書かれていますね。

こういうのを属性と呼びます。

属性はタグに付け加えるオプション的なものだと思ってもらっていいと思います。

例えばaタグのhref属性にはリンク先のURLを指定します。

上記の場合、「Googleを開きます」という文字をクリックするとGoogleのページに移動します。

また、上記のようにtarget属性に「_blank」を指定すると今開いているページをそのままにしておいて、別タブでリンク先を開くことができます。

Webページの中身の本流とはちょっと違うけど、補足情報を紹介したい場合などに別タブで開かせることがあります。

リンクの開かせ方は用途に応じて使い分けてください。

ol/ulタグ

HTML


<ol>
   <li>鍋に2ℓの水お湯を入れ、沸騰させます。</li>
   <li>待っている間にネギをみじん切りにします。</li>
   <li>沸騰したら麺を入れます。</li>
</ol>

<ul>
   <li>olタグは順番を意識します。</li>
   <li>ulタグは順番を意識しません。</li>
   <li>上記どちらのタグも中にliタグを使います。</li>
</ul>

箇条書き用のタグです。

olタグは順番が必要な場合に使います。

何かの手順を示す時などに使うといいと思います。

一方、ulタグは順番がない箇条書きの場合に使います。

箇条書きの内容はolタグulタグともにliタグを使います。

上記のように書くとブラウザ上では以下のように表示されます。

ご覧のとおり、olタグを使うと自動で数字が付番され、ulタグは黒丸になっています。

imgタグ

HTML


<img src="./image/test.png">

画像を表示するタグです。

src属性に画像ファイルパスを書きます。

ファイルパスとはファイルがある場所のことです。

上記の場合はhtmlファイルと同じ階層にあるimageフォルダの中のtest.pngファイルを表示します。（最初の「.」は現在の階層、つまりこのhtmlファイルの場所を指します。）
このような書き方を相対パスといいます。

ファイルパスは「https://shitakke.com/image/test.png」のように指定することもできます。このようにhttpもしくはhttpsから始まる画像へのURLを指定する書き方を絶対パスといいます。

ちなみにimgタグはsrc属性で指定した画像を表示するだけなので、終了タグは不要です。

tableタグ

HTML


<table border="1">
   <thead>
      <tr>
         <th>No.</th>
         <th>名前</th>
         <th>出身地</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>佐藤　太郎</td>
         <td>北海道</td>
      </tr>
      <tr>
         <td>2</td>
         <td>山田　花子</td>
         <td>青森</td>
      </tr>
   </tbody>
</table>

表形式(テーブル)で表したい場合に使うタグです。

上記の場合は以下のように表示されます。

さて、tableタグの中にたくさんのタグがありますね。

ひとつずつ説明すると、
tableタグにborderという属性がついています。
つけなくてもいいのですが、つけないと線が表示されないので、便宜的につけています。
borderに1が設定されていますが、数字を大きくするほどに線が太くなります。


tableタグの子要素として、theadタグとtbodyタグがあります。

theadタグはテーブルの見出しとなる情報を書くためのタグです。
上記の場合、Noと名前と出身地を列挙したテーブルになりますので、これらが見出しになります。

tbodyタグは見出しに紐づくデータを書く場所で、
実質的なテーブルの中身になります。

thead、tbodyタグともに子要素としてtrタグがありますね。
trタグは表の1行分を表します。
上記の場合、見出しに1行、データ部分に2行、計3行で表が構成されています。

trタグの中にthタグとtdタグがありますね。
これらはセルと呼ばれ、Excelなどの表計算ソフトをお使いの方はイメージがつくかと思いますが、表上の1区画になります。

上記の場合、左から2列目は名前の列になりますので、1行目は見出し、2行目以降は実際の名前を表示しています。

thタグは見出しとして使われるので通常theadタグの中で使います。

tdタグはデータ用のセルになりますので、tbodyタグの中で使います。

1行分のthタグの数とtdタグの数は合わせましょう。
合わないとテーブルのレイアウトが崩れてしまいます。

divタグ

HTML


<div class="card1">
   <h2>記事1</h2>
</div>
<div class="card2">
   <h2>記事2</h2>
</div>

ここまではそれぞれ意味のあるタグが出てきましたが、divタグについては特に意味を持ちません。

何かをひとまとめにしたい時に使うタグなんですが、これだけだとピンときませんよね。

上記のサンプルコードでは記事1の見出しと記事2の見出しをそれぞれdivタグで囲っています。

これをブラウザで見ると以下のようになります。

これだけだとdivタグを書かないのと特に違いはありません。

しかしHTMLに以下のCSSを読み込ませると、以下のように表示されます。

CSS


.card1 {
   margin-bottom: 2rem;
   padding: 1rem;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
 .card2 {
   padding: 1rem;
   box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}

わかるでしょうか。

CSSについては「おしえて！CSSの書き方」で紹介しているので、そちらを参考にしていただきたいのですが、

1つ目のdivにcard1というクラス名を、2つ目のdivにcard2というクラス名をつけており、それぞれに対するスタイルを書きました。

周りに影をつけてカード風にしているのですが、1つ目より2つ目のほうが影が伸びていて浮いているように見えませんか。

このようにそれぞれをdivでまとめることで、別物として扱うことができ、それぞれに異なるスタイルを適用したりJavascriptで制御したりすることができます。

ちょっと話が逸れますが、HTMLにはインライン要素とブロック要素があります。

インライン要素は文字や画像など、Webページのコンテンツそのもののことで、aタグや強調表示に使われるstrongタグなどが該当します。

プロック要素はインライン要素をグループ化するものと考えてよろしいかと思います。pタグやtableタグ、ここでは紹介していませんがarticleタグやsectionタグなどがあります。

divタグはブロック要素に該当します。
pタグなどの意味のあるブロック要素に該当しないけどもひとまとめにしたい場合にdivタグは登場します。

divタグは便利なので深く考えず多用されがちなのですが、他に適したタグは無いのか考えながら作るのがベターです。

まとめ

全てのタグの説明をここではできないのでよく使われるものについて紹介しました。

これだけでも結構いろんなことができると思うので、お試しでいろいろ書いてみてください！

また、HTMLはあくまでどういうコンテンツをWebページに表示するかを書くもので、そのままだと思ったとおりの配置にならない可能性があります。

コンテンツの見せ方はCSSで調整できますので、CSSの書き方を知りたい場合は「おしえて！CSSの書き方」も併せてご確認ください。

したっけ！

  • HTMLはタグで囲めばOK！
  • h1〜h6は見出し
  • pタグは段落
  • aタグはリンク
  • ol/ulタグは箇条書き
  • imgタグは画像表示
  • tableタグは表
  • divタグは何かをグループ化したい時に
  • タグは正しく使い分けましょう

本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？

IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、 物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。

身につけた技術は一生モノです。

もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。

DMM WEBCAMP

転職を本気で考えている方向けのプログラミングスクールです。 転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです！

DMM WEBCAMPのサイトへ

TechAcademy

最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。

TechAcademyのサイトへ

Want to learn programming in earnest? Want to be an IT engineer?

The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere, so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread. The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.

The skills that you have acquired is something that will last a lifetime.

If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.

DMM WEBCAMP

This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!

move to DMM WEBCAMP

TechAcademy

It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.

move to TechAcademy