ブログにも役立つHTMLの話 その1～ウェブサイトはこんな風にできている

2018.04.11

ブログイメージ

SOHOで旅行会社を起業し営業のためホームページを作成してから15年、仕事の中心は旅行業というよりはホームページのクオリティをアップする作業のほうが多いような毎日を過ごしている。今や小規模の会社や店舗のホームページ（以後ウェブサイトと書くことにする）は、ブログやFacebookで充分代用できるほど充実してきた。
しかし、ブログもFacebookも、もとは同じhtmlという構文で成り立っている。このブログだってそうだ。だから自分のブログを修正したりするとき、htmlの知識が多少はあったほうがいい。独学でウェブサイトを制作してきたので正確な知識ではないかもしれないが、ブログを運営していくうえで必ず役に立つhtmlについて、自分の知っている言葉で少しずつ書いていこうと思う。

ウェブサイトがネット上にアップされるまで

例えば、A4サイズ1枚程度で何かを表現したい、それをネット上にアップしてパソコンやスマートフォンで世の中にアピールしたいとする。そのとき、htmlという構文でアピールしたいことを書いたファイルをネット上にアップロードする。これがウェブサイトだ。構文というとやたら難しく聞こえるが、たいしたことはない。

ウェブサイトを作成するのに、たいそうなパソコンや高価なソフトは必要ない。

  1. パソコン（これがなければ始まらない）
  2. メモ帳ソフト
  3. レンタル・サーバー
  4. FTPソフト（htmlで書いたファイルをネット上にアップロードするソフト、無料でいろいろある）

たったこれだけで、自分の表現したいことが自由にネット上に掲載できる。このうち1、2については誰もが説明は不要だと思うので割愛し、3と4について少し説明する。

FTPソフト

FTPソフトとは上記に書いた通り、作成したhtmlファイルをネット上にアップロードするためのソフトだ。そして無料でダウンロードできるものが多い。試しにGoogleで「FTPソフト　無料」と検索すると、たくさんのソフトが紹介されているので、その中から使いやすそうなものを選べばいい。代表的なものは「FFFTP」や「FileZilla」など。ダウンロードサイトだけではなく、その使い方まで様々な人がネット上に紹介してくれている。
ブログの場合、通常記事を書いたら「公開」または「アップロード」というボタンをクリックするだろう。これは、各ブログサービスがすでにFTPソフトを兼ねているといってもいい形だからだ。ましてやブログはすでにサーバー上でのサービスなので、自分でパソコンにファイルを保存してからアップロードする、という作業は不要である。

レンタル・サーバー

自分で作成したhtmlファイルは、ネット上のある決まった場所にアップロードしなければならない。その場所として申し込むところがレンタル・サーバーであり、いわゆるネット上の“住所またはマンションの一室（つまりアドレス）”だ。そしてレンタル・サーバーから指定された場所こそ、自分のウェブサイトのドメインになる。
一般的にはURLといわれるもの、例えばhttp://www.〇〇〇.com、または.netなど、サーバーによって最後の表示は違うが、これがネット上の住所になる。「http://」部分はすべて共通で、この後が個別の住所になる。
例えばこのブログはBloggerで書いている。すでに独自ドメインを取得しているので現在はオリジナル・ドメインのアドレスになるが、最初は

http://ura-no-ura.blogspot.com

というアドレスだった。このうち赤字の部分がサーバー（ブログの場合はブログサービス）から割り当てられた個別の住所（たいてい自由に設定できる）、そして青字の部分はその大元＝サーバー（ブログの場合はブログサービス）の住所で、ここは自分で変えることが出来ない。
実際の住所に置き換えてみると、「東京都〇〇区〇〇町1-2-3」のうち“東京都”や“○○区”、“〇〇町”は青字の部分、それ以下が赤字の部分と考えればいい。

少し話がそれたが、ネット上では個別のアドレスを借りるための様々なレンタル・サーバーが用意されているので、レンタル料やサーバーの特色を確認の上契約するといいだろう。よく使われているのは「ロリポップ」、「さくらインターネットのレンタルサーバー」、「エックスサーバー」などだ。

ウェブサイトの基本はHTML

ウェブサイトの1ページは、最もシンプルなもので以下のような構成になっている（html5の場合）。試しに自分のブログをパソコン画面に表示したら、キーボードのCtrlキーを押しながらUのキーを押してみると、ブログのhtml（ページのソースといわれる）を見ることが出来る。やたらアルファベットや数字が並んでいるが、構造上はほぼ下記と同じようなもので、自分自身が書いた記事の部分はほんの少しでしかない。

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="description" content="ディスクリプション＝ページの紹介文">
<meta name="keywords" content="キーワード">
<title>ページのタイトル</title>
～ ここにスタイルシート(CSS)やjavascriptを書く ～
</head>

<body>
<header>ページ上部に表示される（ウェブサイトのタイトルやロゴなど）</header>
<nav>ナビゲーションメニューなど</nav>
-- 以下が本文 --
<h1>この記事の表題</h1>
<h2>サブタイトル</h2>

<h3>小見出し 1</h3>
<p>段落 1</p>
<p>段落 2</p>

<h3>小見出し 2</h3>
<p>段落 1</p>
<p>段落 2</p>

<footer>フッター</footer>
</body>
</html>

本文の部分を除き、htmlは全てタグといわれる約束事で囲まれる。タグとは<html>や<head>など<>で表示されるものだ。始まりにはスラッシュはなく、終わりのタグは必ずスラッシュがついている。

上記例でいえば、実際にパソコン画面に表示されるのは10行目の<body>から23行目の</body>までに書かれたもので、その上や下のタグで囲まれた部分は画面上に表示されない。画面上に表示されない部分には、そのページの情報、ページの装飾の決め事（スタイルシートといわれる）、ページの動的作用（javascriptなど）を書いておく。

<body>から</body>の表示される部分に、さらに約束事としてタグで囲みながらページを構成していく。ページタイトル（又はウェブサイト名）は<header>から</header>で囲まれた部分に表示される。フッターといわれる部分（よくCopyright、サイトマップやプライバシーポリシーへのリンクなどがかかれているところ）は<footer>から</footer>で囲まれた部分というように…。
さらに本文は見出し、小見出し、そのまた小見出しをつけ、それぞれ役割として<h1>タグから<h6>タグまで使うことが出来る。
文章ごとに段落をつけたいなら、ひとくくりを<p></p>タグで囲む。

これらはすべてメモ帳ソフトで十分書ける。実際どのようにネット上に表示されるかを確認するには、メモ帳ソフトを右クリックして「プログラムから開く」→自分で使用しているブラウザー（ChromeやExplorerなど）で開くと見ることが出来る。

まとめ

ウェブサイトは何も特別な用意がなくても、メモ帳にタグという約束事で囲みながら書いたものをサーバー上にアップロードすれば出来るものだ。まずは「こんな簡単な構造からインターネット上のページが出来ているんだ」ということを知ってほしい。

そしてこの基本を知っていると、自分のブログがとても専門的で複雑なもののように感じられ、それでいて「自分は他の人よりウェブサイトのことをちょっとは知っているんだ」という優越感に浸ることが出来る。

一度に多くを書いてしまうと、読む人が混乱してしまうと思われるので、今日はここまで。

コメント