【初心者向け】HTMLの基本を理解して応用させていこう｜フロントサイドの知識

こんにちは、こがたです。
ぼくは商品・サービスをURLベースで紹介できるサービス「Goorec」を運営しています。

WEBアプリにはサイトを表示するフロントサイドとデータを管理するサーバサイドがあります。

この記事ではプログラミングをやったことがない方でもHTML(フロントサイド)の基本を理解して、自分で応用できるように説明していきます。

対象読者

WEBアプリを開発したい
ブログをカスタマイズしたい
フロントサイドの基本的に知識を習得したい
HTMLについて理解したい

初めにHTMLの役割について説明します。
どこで使われるものなのか理解してもらえたら嬉しいです。

次に具体的な書き方をサンプルふまえて解説していきます。

WEBアプリの全体構造については↓↓↓をご覧ください。

【ネットワークとは】サーバ・システムの仕組みがわかる｜アプリ開発したい方必見

WEB・スマホアプリを開発する方はもちろん、技術者以外でもネットワークの知識が必要な時代です！この記事ではインターネットの仕組みやWEBアプリ、スマホアプリがどのように動いているのか説明しています。システウの動く仕組みを理解することができたら、開発はもちろんブログなど多くのことに活用することができます。

HTMLの役割

HTMLは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、フロントエンドの１つです。

フロントエンドはクライアント(ユーザ)のPC、スマホで動き表示することができます。

フロントエンドの要素

HTML：表示する内容
CSS：表示するものをどう見せるか
JavaScript：表示するものに動きをつける

この記事では表示内容であるHTMLにフォーカスして解説していきます。

HTMLの学習準備(なにを学べばよいのか)

これから実際にHTMLの書き方について学んでいきましょう。

そこで重要なのが「何ができるのか、何ができそうなのか」を理解することです。

HTMLの要素は100以上もあり、全て覚える必要はありません。
それよりも、状況に合わせて必要なものを調べるスキルを身につけるようにしてください。

こがた

「○○みたいに表示したいけど、できるかな〜」という思いから、調べて実装するスキルが大切です！

こちらがサンプルページのHTMLです。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLテストページ</title>
</head>

<body>
<h1>テストページ</h1>
<p>これからタグの使用例を表示していきます</p>

<br>
<h2>リンク</h2>
<div>
	<a href="https://kgt-blog.com/">こがたぶろぐトップページへリンク</a>
</div>
<br>
<h2>リスト</h2>
<div>
	<ul>
		<li>1つ目</li>
		<li>2つ目</li>
		<li>3つ目</li>
	</ul>

	<ol>
		<li>1つ目</li>
		<li>2つ目</li>
		<li>3つ目</li>
	</ol>
</div>
<br>
<h2>テーブル</h2>
<div>
	<table>
		<tr>
			<th>見出し1</th>
			<th>見出し2</th>
		</tr>
		<tr>
			<td>セル要素1</td>
			<td>セル要素2</td>
		<tr>
	</table>
</div>
<br>
<h2>画像</h2>
<div>
	<img alt="代替文" src="https://kgt-blog.com/wp-content/uploads/2020/10/kgt-circle.png">
</div>
</body>
</html>

これをコピーして、新規ファイルに貼り付けてください(ファイル名は「sample.html」)。
そのファイルをブラウザにドラッグ&ドロップすると以下のようなページが表示されます。

なんか淡白なページだね、、、

こがた

HTMLは表示内容だけで、色をつけたりするのはCSSの担当なんだよ。

これからHTML具体的な書き方と意味を説明していくね。

HTMLの書き方

HTMLは「タグ」を利用することで、表示内容に意味を持たせています。

このように「<○○>内容</○○>」という形になります。
※タグによっては「<〇〇>」という書き方もあります。

タグ間に改行・空白を入れてもページは変わらないので、コードが見やすいように整形しています。

こがた

まだイメージがつかないと思うので、これから具体的に書き方をみていきましょう！

タグ一覧はこちらを参考にしてください。

DOCTYPE宣言

１行目の以下の部分が「DOCTYPE宣言」です。

<!DOCTYPE HTML>

これを記載することで「これからHTMLを書いていきますよ〜」と合図することができます。

サンプルではHTML5を使用していますが、書き方によりバージョンが異なります。

htmlタグ

HTMLの内容を書いていくための一番外側のタグになります。

<html lang="ja">
〜〜〜
〜〜〜
〜〜〜
</html>

「lang=”ja”」の箇所で日本語のページであることを明示しています。
英語の場合は「lang=”en”」となります。

このようにタグに属性を設定することで、特徴を表すことができます。

表示される箇所とページ情報をまとめた箇所

<html>タグ内にはページ情報をまとめた<head>タグと表示する<body>タグがあります。

<html lang="ja">
<head>
    ページ情報をまとめる
</head>

<body>
    表示する内容
</body>
</html>

headタグの内容はページに表示されることなく、SEOなどの裏側に影響します。

headタグ内

titleタグ：ページのタイトル
metaタグ：SEOに渡す情報
linkタグ：CSS、JavaScriptファイル等の読み込み

bodyタグにはページで表示される情報が入ります。
これから説明していく各種タグはbody内に記載するものになります。

領域

HTMLはこのように表示内容ごとに領域を作り、領域内に各コンテンツ(データ)を入れていきます。

領域を作るためのタグは数多くありますが、最も多く利用されるのは<div>タグです。

<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>HTMLテストページ</title>
</head>

<body>
    <div>
        ヘッダー内容
    </div>

    <div>
        <div>
            お知らせ内容
        </div>
        メインコンテンツ
    </div>

    <div>
        サイドメニュー内容
    </div>
</body>
</html>

divタグを入子のように利用することで階層的な領域を設けることができます。

見出し

WEBページにも書籍と同じように見出しがあります。

見出しタグ

<h1>〇〇</h1> : １番大きい見出し
<h2>〇〇</h2> : 2番大きい見出し
<h3>〇〇</h3> : 3番大きい見出し
<h4>〇〇</h4> : 4番目の見出し
<h5>〇〇</h5> : 5番目の見出し
<h6>〇〇</h6> : 6番目の見出し

基本的に<h1>タグは１回のみ利用します。
この記事の場合「【初心者向け】HTMLの基本を理解して応用させていこう｜フロントサイドの知識」で<h1>タグを利用しています。

階層的に見出しタグをつけて見やすいページにするとよいでしょう。

こがた

よほど情報量の多いページでない限り<h1>〜<h3>くらいまでしか使わないです。

※見出しタグによって文字サイズが変わりますが、CSSで設定することができます。

段落

段落の表示には<p>タグを利用します。

<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>HTMLテストページ</title>
</head>

<body>
    <div>
        <h1>見出し</h1>
        <p>段落の内容</p>
    </div>
</body>
</html>

pタグの利用頻度も高いので必ずおさえておいてください。

文字

文字を表示するタグは数多くあります。
ここでは一部の例を紹介します。

文字のタグ

<strong> : 強調
<b> : 太字
<i> : イタリック
<u> : 下線
<big> : 大きく
<small> : 小さく
<s> : 打ち消し線

その他のタグはこちらをご確認ください。

リンク

他ページへのリンクを作成するためには<a>タグを利用します。

「<a src=”〇〇”>表示されるリンク</a>」という形式でリンクが作成可能です。

新規タブで開くメリット・デメリット

メリット：ページの離脱率が下がる
デメリット：スマホの場合、ページに戻るのが手間になる

こがた

外部ページの場合には基本的に新規タブにすることをオススメします！

画像表示

画像表示には<img>タグを利用します。
※imgタグ以外でもCSSを利用して表示することも可能です。

「src属性」で画像のURL・パスを設定します。

「alt属性」は画像が表示されなかったときに、変わりに表示される文章です。
SEO対策でも有効なので、基本的に設定するようにしてください。

表(テーブル)表示

表は<table>タグを利用し、行<tr>タグ、見出し<th>タグ、セル<td>タグを利用します。

<table>
		<tr>
			<th>見出し1</th>
			<th>見出し2</th>
			<th>見出し3</th>
		</tr>
		<tr>
			<td>セル要素1-1</td>
			<td>セル要素2-1</td>
			<td>セル要素3-1</td>
		<tr>
		<tr>
			<td>セル要素1-2</td>
			<td>セル要素2-2</td>
			<td>セル要素3-2</td>
		<tr>
	</table>

tableタグ内に行の数だけtrタグを記入します。

各trタグ内に列の数だけ、見出し/セルであるth/tdタグがある方になります。

Excelのようにセルを結合することも可能です！

セルの結合

colspan属性：横方向の結合
rowspan属性：縦方向の結合

<table>
		<tr>
			<th>見出し1</th>
			<th>見出し2</th>
			<th>見出し3</th>
		</tr>
		<tr>
			<td colspan="2">横に２つ結合</td>
			<td　rowspan="2>縦に２つ結合</td>
		<tr>
		<tr>
			<td>セル要素1-2</td>
			<td>セル要素2-2</td>
		<tr>
	</table>