第2話

早速ギブアップ!?ホームページ制作はこれからだ、早すぎるぞ、うぇぶひこ!

Hello, HTML5

HTML(エイチティーエムエル)とは

よく来たな、うぇぶひこ。
どうやら、WEBデザイナーとしての腕もかなり磨いてきたようじゃの。

この日に向けて母さんにかなり鍛えられましたので…

お主がこの村に来てもう13年になるのか…月がたつのは早いものじゃの。

今世の中にはたくさんのWEBサイト、多くのWEBデザイナーがあふれておる。
世に出ていけばたくさんのクライアントと出会い、数多くの試練が待ち受けておるじゃろう。

ごくっ…

ときには、驚くような無茶ぶりもある。
お主はこの先を進む覚悟はあるかの?

無茶ぶり…
えぇ…やめとこかな…

いやいや、早っ。
そこは覚悟を持って望んでほしいところじゃぞ。
まだ物語は始まったばかりじゃ。

まぁ、僕がクライアントから依頼を受けるなんてまだ先の先でしょうし、
とりあえず頑張って力をつけていきます。

お主、歴代の中でもかなり頼りない感じじゃの…
まぁ良い、では早速基礎の基礎いってみるかの。
構えよ!

こなくそー!

うぇぶひこは激しくタイピングをし、HTMLを書き上げた…!

同時にHTMLを日本語に置き換えてみた…!

WEB DESIGN BATTLE

ホームページ制作で利用するHTMLとは

HTMLとはHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略称です。
文章(テキスト)に対して意味付け(マークアップ)できる書き方のルールです。

みなさんがブラウザーでホームページを閲覧している状況は、
サーバーに保存されたHTMLファイルをブラウザーが読み込んで表示しているのです。

ホームページは必ずHTMLだけで制作されているというわけではありませんが、
骨組みとして重要な役割を果たしているため、HTMLを使いこなすことがホームページ制作の第一歩です。

なお、HTMLはWEBの国際的な標準化を目指す非営利団体
W3C(World Wide Web Consortium)」によって策定されています。

うぇぶひこの冒険では現在主流となっているHTML5というルールに基づき物語を進めていきます。

HTMLの基本的な構成

うむ…なかなかやるではないか。

えへへ。

じゃが、まだまだ概要のみでは判断できんの。
構えよ!

押忍!

WEB DESIGN BATTLE

HTMLの基本的な構成はどのような内訳か

HTMLは「DOCTYPE」「html」「head」「body」の4つの要素で主に構成されます。
HTMLでページを作成する場合には、おまじないのように必ず含めると覚えておけば問題ありません。
概要は以下のとおりです。

<!DOCTYPE html>
(ドックタイプ エイチティーエムエル)
HTML5に基づき内容を書きますという宣言。
html
<html>から</html>の間はHTMLの内容で
記載している範囲であることを示す。
なお、lang=”ja”については、そのページが日本語で
書かれていることを示しています。
head
(ヘッド)
<head>から</head>の間はページの各種情報を
記載している範囲であることを示す。
このエリアに記載した内容はブラウザーの画面に
表示されない(例外はあり)。
body
(ボディー)
<body>から</body>の間は実際に表示するページの内容を
記載している範囲であることを示す。
このエリアに記載した内容がブラウザーに表示される。
(例外はあり)

HTMLの書き方(タグ)

はぁはぁはぁ…
立派に成長したの、うぇぶひこ。
これが最後じゃ、乗り越えてみよ!

うおぉぉぉーーーーー!

WEB DESIGN BATTLE

HTMLの書き方、タグとは

HTMLは<開始タグ></終了タグ>という書き方が基本です。
この「タグ」と呼ばれるものでテキストを囲むことで、
それぞれのテキストに意味をもたせていきます。

あらためてうぇぶひこの書いたHTMLを見てみましょう。

今回登場したそれぞれのタグの意味は以下のとおりです。

<meta charset=”utf-8″>
(メタ チャーセット ユーティーエフエイト)
文字コードとして世界中で主流になっているUTF-8を指定。
コンピューターが文字を読み取るときのルール。
他の文字コードにしなければいけない理由がない限りは基本的にUTF-8を指定。
<title>
(タイトル)
WEBページのタイトル。
ブラウザーのウィンドウ上部やタブにも表示する。
GoogleやYahoo!など検索エンジンでの
検索結果としても表示する。
<meta name=”description” content=””>
(メタ ネーム ディスクリプション コンテント)
WEBページの概要や説明。
title同様に検索エンジンの検索結果としても表示する。
<h1>
(エイチワン)

ページにとって最も重要な見出しで、
基本的にはページ内に1つのみ利用。
titleと重複は望ましくないが、比較的同じようなものになる。

h1からh6まであり、数字が増えるごとに
重要度が減り詳細度が増えていくイメージ。
(h1:料理のレシピ / h2:和食 / h3:魚料理 / h4:魚の煮付け)

※h1を複数利用するという考え方もHTML5にはあるため、
筆者としての見解。
※h2-h6については複数利用可能。
<nav>
(ナビ)
ページのナビゲーションメニューエリア。
主に各種ページへ移動するためのリンクメニューなどが記載される。
<ul>
(ユーエル)

関連性はあるが順番に優先順位はない
リストの範囲であることを示す。
なお、順番に優先順位がある場合は<ol>を利用。

※たとえば料理の手順は順番を守る必要があるのでolを利用、必要な材料の一覧を示すだけの場合は順番に優先順位はないのでulを利用。
<li>
(リスト)
ulやolにおけるリスト1つ1つを示す。
<a>
(アンカー)
他のページや他のWEBサイトへのリンク。
<a href=”https://colers.jp”>としておけば、
クリックをしたときにcolers.jpのWEBページへ
移動できる。
<main>
(メイン)
ページの主要なコンテンツが含まれる範囲であることを示す。
<section>
(セクション)
章という意味を持っており、関連する範囲を示す。
<p>
(パラグラフ)
段落であることを示す。
ここにテキストを入力する。
<small>
(スモール)
コピーライトなど著作権表記に利用。
<header>
(ヘッダー)
ページのヘッダー(基本的にページの上部)であることを示す。
<footer>
(フッター)
ページのフッター(基本的にページの下部)であることを示す。

HTMLのタグはたくさんありますが、
ホームページの制作にあたって存在するすべてのタグを利用する必要はありません
今後うぇぶひこの冒険の中で、代表的なタグについてご紹介していきます。

見事じゃ、うぇぶひこ!
お主をふぁいんだー村の正式なWEBデザイナーとして認めよう。

やった….。
ありがとうございます…。

かくして無事にWEBデザイナーとしての最初の一歩を踏み出すことになったうぇぶひこ。
この先、どんな試練が待ち受けているのかわからないが、不思議と気持ちはワクワクしているのであった。
ゆけ、うぇぶひこ。
戦え、うぇぶひこ。

今回のまとめ

  • ホームページの骨組みはHTMLを利用して制作
  • HTMLはタグを利用して意味をもたせながら制作する

前後の冒険はこちら

中の人からのお知らせ