Home > 記事一覧 > 【初心者必見】HTMLの基本3〜ゼロから始めるウェブサイト〜
このエントリーをはてなブックマークに追加
ホームページ制作

【初心者必見】HTMLの基本3〜ゼロから始めるウェブサイト〜

クイックウェブの原田です。前々回ではHTMLとはどのようなものか、前回はHTMLを記述するにあたり頻出するであろうタグの解説をおこなってまいりました。 そんな今回の企画は、「【初心者必見】HTMLの基本3〜ゼロから始めるウェブサイト〜」と題しまして 前回に引き続き、HTMLのコードを記述するにあたって、頻出するであろうタグについてご説明いたします。 尚、今回の企画では前回のようにいくつかのタグをご紹介せず、テーブル組みに重きを置いてご紹介いたします。

今までのおさらい

本題に入る前に、前回、前々回のおさらいをしておきましょう。 まずはHTMLを記述する際に重要な部分を簡単におさらいしましょう。

HTMLのポイント

  • HTMLはウェブサイトの基礎を作る言語である
  • サイトデザインはCSSを使用する
  • 基本的にタグを使用し、タグに挟まれた文字は、そのタグに対応した効果が付与される
  • タグには基本的に開始タグと終了タグがあり、これらがセットとなっている

次に、前々回HTMLを記述する際に必ず必要になるとご説明いたしましたコードを ↓記入しておりますので、こちらを元におさらいしましょう。

	<!DOCTYPE html>
	<html>
	<head>
		<title></title>
	</head>
	<body>

	</body>
	</html>

上記のものが前々回にご説明いたしましたHTMLに必須のコードとなります。

HTMLコードのおさらい

	<!DOCTYPE html>

まずは「このファイルはHTMLのファイルだ」という宣言を行います。このタグに終了タグは存在しません。

	<html>~</html>

次にこのタグを記入しこの中にコードを記入していきます。

	<head>~</head>

このタグ内には「フォントの設定」や「CSSファイルの読み込み設定」などの設定を書き込みます。ウェブ上に表示されるものではありません。

	<title>~</title>

このタグに記入された文字は検索結果に表示されるページのタイトルや、ブラウザのタブに表示されるページ名も基本的にはtitleタグ内のものが使用されます。

	<body>~</body>

ウェブサイト上に表示されるものをこのタグの中に記述していきます。pタグなどがそれにあたります。

おさらいは以上となります。
それでは本題の方に入っていきましょう。

テーブル組み

冒頭にも申し上げました通り今回の企画では、前回のようにすぐに覚えてかけるようなタグではなく、少し説明が必要なもの、テーブル組みに重きを置いてご紹介していきます。

テーブル組みとは

皆さんはウェブサイトで表をご覧になることがあると思います。テーブル組みとはその表を作ることです。 実はこの表(テーブル)は、CSSではなくHTMLによって作られています。HTMLの中でも基本的なものとなるので、これを機に覚えておきましょう。

テーブルを構成する要素

それではまずテーブル内の要素についてをご説明いたします。 テーブル内には以下の3つの要素があり、これらを覚えておく必要があります。

  • 行(record):英語でrecord(レコード)ともいい、横一列のデータのことを指します。
  • 列(column):英語でcolumn(カラム)ともいい、縦一列のデータのことを指します。
  • セル(cell):各データを記述する1つ1つのマスのことを指します。

これら3つの要素が合わさることでテーブルを構成します。「行(record)、列(column)、セル(cell)」はExcelなどでも共通している概念なので、これを機に覚えておきましょう。これらの要素を念頭に置いてここからの解説をご覧ください。

テーブルに使用するタグ

テーブルを作成するときには、複数のタグを組み合わせます。これらのタグは必ず覚えておきましょう。

	<table>~</table>

表を作るタグです。このタグの中に記述されたものはテーブルの要素ということになります。

	<th>~</th>

このタグ内に記述されたものは、表の見出しとなるのでウェブ上では太字になります。

	<tr>~</tr>

このタグ内に記述されたものは横一列(行、あるいはカラム)であると判断されます。先ほどご紹介したthタグと組み合わせ、以下のようなコードがあったとします。

	<tr>
		<th>
			男
		</th>
		<th>
			女
		</th>
	</tr>

このような記述であれば、下記のように「男」という見出しと「女」という見出しが横一列並びます。

	<td>~</td>

このタグ内に記述されたものはテーブル内のデータ、いわば「セル」を意味します。
今回もサンプルコードをご用意しております。以下のコードを以前ご紹介した方法で表示してみてください。

	<!DOCTYPE html>
	<html>
	<head>
		<title>テーブル組み</title>
	</head>
	<body>
		<h2>テーブル組みに挑戦してみよう</h2>
		<table border>
			<tr>
				<th>男</th>
				<th>女</th>
			</tr>
			<tr>
				<td>1人</td>
				<td>2人</td>
			</tr>
		</table>
		<p>文字やテーブルを増やしてみましょう!!</p>
	</body>
	</html>

ちなみにですが、テーブル内に枠線が必要な場合は上記のようにtableタグ内に「border」と記述してください。 また、上記のコードはテーブルの中でもオーソドックスなものとなっております。ここからは応用編となりますのでここまでのご説明を十分ご理解いただいてからご覧ください。

テーブル組み〜応用編〜

それでは、ここからはさらにテーブル関連のタグをご紹介いたします。

	<thead>~</thead>

テーブル内でヘッダーを構成します。

	<tbody>~</tbody>

テーブル内でボディの部分を構成します。

	<tfoot>~</tfoot>

テーブル内でフッターを構成します。

colspan
セルを連結させる際に使用します。書き方は以下のようになっています。

	<td colspan="x">******</td>

このように記述するとtd(セル)をx個連結させるという意味になります。
それではサンプルコードを作成しましたのでコードを読みながらブラウザで表示させているものをゆっくり読み解いてみましょう。

	<!DOCTYPE html>
	<html>
	<head>
		<title>テーブル組み応用</title>
	</head>
	<body>
		<h2>さらにテーブル組みの理解を深めてみよう</h2>
	<table>
		<thead>
			<tr>
				<th>項目1</th>
				<th>項目2</th>
				<th>項目3</th>
			</tr>
		</thead>
			<tbody>
			<tr>
				<td>1-1</td>
				<td>1-2</td>
				<td>1-3</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
				<td>2-3</td>
			</tr>
			</tbody>
			<tfoot>
				<td>結合セル</td>
			</tfoot>
		</table>
		<p>文字やテーブルを増やしてみましょう!!</p>
	</body>
	</html>

一見複雑に見えますが、慣れてくると見やすくなると思います。 こればかりは慣れなので自分でもコードを1から書いて見たりして慣れていきましょう。

まとめ

いかがでしたか?今回はテーブル組みに特化した内容でした。しかし、1つの企画でこれだけの量の説明をするところからわかるように、テーブル組みはHTMLを学ぶにあたってとても重要なものになりますし、 おそらくここでつまづいてしまう方もいらっしゃるかと思います。わからない場合は本企画などを参考に理解できるまでなんどもコードを書き直していきましょう。 表を文字で表すということは好きし難しく感じるかもしれませんが慣れてしまうととても簡単ですしとても役に立つものなので是非とも覚えておきましょう。

クイックウェブのレンタルホームページは充実のサポート対応

レンタルホームページ、クイックウェブならサーバーやドメインの取得といった面倒な手続きは一切不要です。簡単、低価格であなたのホームページを作成することができます。基本プランでは、ドメインは「.com/.net/.org/.biz/.info」の中からお選び頂けます。また、ホームページの活用方法や集客方法などは、専門のスタッフもいるのでサポートやアフターフォローもついています。もしあなたが、経営者・個人事業主・ウェブ担当者でこれからホームページを作成しようと思っているなら、簡単、低価格であなたのホームページを作成することができる、レンタルホームページ、クイックウェブを検討してみてください。   ちなみに、当社では本格的なホームページを月々5,000円から利用できるレンタルホームページというサービスを行なっていますが、はじめから美しいデザインになるように計算されたホームページのテンプレートがあります。もしあなたが、これから何かしらのテーマのホームページを作ろうとされている方なら、ぜひ一度覗いてみてください。

このエントリーをはてなブックマークに追加

最近書いた関連記事