今はほとんどの会社やお店が、Facebookやインスタグラムを含め、何らかの形でホームページを持っています。
また、新たに起業した方やお店を開店した方にとっては、広く認知してもらうため必須のものです。
実は、ホームページを作ることは、そんなに難しいことではありません。
手元にあるアプリで、または無料のツールで、誰でもホームページを作ることができます。
そのことを、これから複数回に分けて紹介していこうと思います。
未経験でも始められるホームページ作り
筆者は、いわゆる「プログラマー」や「ウェブデザイナー」ではありません。
旅行会社として独立起業して約20年、その間、一貫してネット上で旅行商品を案内し販売してきた「旅行屋」です。
カウンターで旅行を案内する対面スタイルをやめて、全てホームページで旅行申込みを受け付ける、いわゆるネット旅行会社をやってきました。
旅行会社がホームページを作成することは、一見畑違いのように思うかもしれません。しかし、ネット旅行会社であれば、その基盤となるものは会社のホームページです。それを自分で作成することは、ごくごく自然なことでした。
ちなみに、当社のホームページは以下からご覧になれます。
最新のWebデザインと比べれば、素人感のあるホームページかもしれませんが、SEO対策はできているようで、例えば当社の商品をGoogleで検索すると、だいたい1ページ目の上位に表示されます。
開業以来、「自分でできることは自分で」をモットーに会社を運営してきたので、ホームページも一から十まで、独学で作成してきました。
特別なプログラミングを覚える必要がなく、後述のHTMLとCSSが何たるかを理解できれば、誰でもホームページを作ることができます。
これは、約20年独学でやってきた筆者が実感していることです。
そして、「これなら、専門業者に依頼することなく自分でホームページを作れる！」と思っていただけたら嬉しいです。
ワードプレスでも必要なHTML+CSS
最近は、ワードプレス（WordPress）というツールを使って、ホームページを作成している人や企業が数多くあります。
ワードプレスは、CMS（コンテンツ・マネージメント・システム）といい、原則HTML+CSSを知らなくてもホームページ作りができるという、大変便利なものです。また、あらかじめデザインが施されたテンプレート（テーマ）が豊富なので、これを利用すれば、最初から美しいサイト作りができるでしょう。
CMSは、主にアクセスしたユーザーの時間や場所といった、さまざまな条件に応じて情報を提供する「動的ページ」を作成することに適しています。また、ブログに代表される動的ページは、コメントを書いたり、それに返信できるといった、相互間のコミュニケーションが可能です。
一方、さまざまな情報を網羅しているため、ページ表示が遅くなりがちで、SEOにも影響しやすいのが欠点です。
HTML+CSSは、アクセスしたユーザーの条件に関係なく、常に同じ情報を提供する「静的ページ」を作成します。
企業やお店の情報といった、不変的な情報を案内することに適していて、情報伝達は一方向のみです。マークアップ言語を正しく記載し、容量を抑えた画像を使用すれば、ページ表示は動的ページより格段に早くなります。
ワードプレスは簡単にホームページを作成できる、便利なツールです。しかし、よりニーズにあったホームページにカスタマイズしようとすると、どうしてもHTML+CSSの知識が必要になってきます。
さらに、上述の動的サイトの要素をカスタマイズしようとすると、HTML+CSS意外にPHPというプログラミング言語を理解しなければなりません。
あらかじめセッティングされたテンプレートではなく、オリジナルのホームページを作成するなら、やはりHTML+CSSの理解は欠かせません。
ホームページ作成に必要なツールはパソコンとテキストエディタ
冒頭で触れた通り、手元にパソコンがあり、その中にテキストエディタという無料のアプリケーションがあれば、すぐにホームページ作りを始めることができます。
極端な話、テキストエディタがなくても、オフィスソフトのWordでホームページを作ることができます。保存するときに、文書名の後につく拡張子（Wordなら「.docx」）を「.html」にするだけで、その文書をブラウザで表示することができます。
試しに、何か文書を作成して「.html」形式で保存してみましょう。そして、保存したファイルを右クリックしてブラウザを指定して開けば、パソコンのブラウザにその文書が表示されます。ですが、サーバーにアップロードしていないので、インターネット上には表示されません。
実際のところ、Wordは細かい設定ができないので、テキストエディタを用意すると良いでしょう。
テキストエディタは、プログラミングや、ホームページ作成のようなHTML+CSSコーディングを行うためのアプリケーションのこと。
ホームページは、上述のマークアップ言語を使いながら作成するもので、その作業に適しているのが、テキストエディタということです。
Windowsならメモ帳、Macならテキストエディットといった、パソコンに最初から入っているアプリケーションもありますので、これを使っても原則問題ありません。
ですが、よりお勧めのテキストエディタは、MicrosoftがリリースしているVisual Studio Codeです。
Microsoft製でありながらオープンソースソフトウェアのため、無料で使うことができ、Windows、Mac、Linuxいずれでも使うことができます。また、ホームページ作成以外のさまざまなプログラミングでも使うことができます。
Visual Studio Codeより軽量でシンプルなものとしては、
があり、どれも無料で使うことができます。
まずは、自身が使いやすいテキストエディタを用意して、ホームページ作成の準備をしましょう。
HTML文書はウェブページの設計書
テキストエディタを用意したら、さっそくホームページを構成するHTML文書を書いてみましょう。
HTML文書は、ブラウザに表示させたい文章や画像やイラストなどを、「タグ」という文字列で囲みながら書いていきます。タグ自身は、ブラウザに表示されません。
タグは、ウェブページに表示させる情報を指定するもので、用途によって様々な種類があります。タグで囲むことによって、文章や画像やイラストを、タグが持つ情報を指定する内容に沿ってブラウザに表示させることができます。
では、例をひとつ用意したので、以下をご覧ください。
See the Pen
basic-html by Kazy (@uraflt)
on CodePen.
これは、テキストエディタとブラウザを、一つに表示させるCodePenというウェブ上のアプリで作成しています。
左側またはHTMLタブで表示されているのはテキストエディタ、右側またはResultタブで表示されているのはブラウザに表示されたウェブページ、つまりネット上の表示になっています。
さらに、左側上の「CSS」タブをクリックすると、ブラウザに表示されている文字の装飾の指示内容が書かれています。
h1タグは、ページのタイトルを示すタグ。ここで、フォントの色を青に指定しているので、ブラウザ上の「タイトル」という文字が青色になっています。
h2タグは、各段落の見出しを示すタグ。ここで、フォントをイタリックに指定しているので、ブラウザ上の「見出し１」「見出し２」の文字が斜めになっています。
CSSは、一般的に「スタイルシート」といい、文字通りHTMLのスタイルを指示する（装飾する）ものです。
こう考えると、
- HTMLはウェブページの「設計書」
- CSSはホームページを装飾する「指示書」
であることがわかると思います。
HTML文書の基本構造
では、上記に表示したCodePen中のテキストエディタ側に書かれたHTML文書を、上から順に説明します。
ドキュメントタイプ
HTMLでは、1行目に必ず「ドキュメントタイプ」を書きます。＜!doctype html＞と書いておくことで、この文書がHTML文書であることを宣言しています。
別名は、「DOCTYPE宣言」または「文書型宣言」といいます。
＜＞で囲まれたものが「タグ」で、必ず終了タグ＜/＞で閉じられるのが原則です。しかし、ドキュメントタイプのように、終了タグが存在しないタグのことを「void要素」といいます。
htmlタグ
2行目は、htmlタグといいます。
このタグで囲った箇所がHTML文書であることを示し、さらにlang属性で、「要素の中で使用する言語の種類」を明示しています。
つまり、
「このHTML文書は日本語で書かれています」
と説明しています。
これは、ホームページを見る人（人間）に対してだけではなく、検索エンジン（機械）にもわかるように書いています。また、自動翻訳にも役立ちます。
そして、htmlタグは、必ず文末に終了タグがあります（テキストエディタ側最終行の＜/html＞）。
headタグ
3行目は、headタグ。
HTML文書のヘッド部分を指定するタグで、ここにtitleタグ、metaタグ、linkタグなど、HTMLに必要な情報を書いておくところです。ブラウザ上には表示されませんが、htmlタグ同様、検索エンジンが読む時に必要な情報です。
CSS（スタイルシート、HTML文書を装飾する役目です：後述）の外部ファイルも、情報のひとつとして、ここに外部ファイルからのリンクを書くことで読み込ませます。
4行目、6行目はmetaタグと言って、文書の情報を検索エンジンに伝える情報を記載するもの。headタグ内に記載します。
4行目は、「charset属性」で、文字エンコーディングを決めています。日本人には「Shift-JIS」に馴染みがあるかもしれませんが、HTML文書は「UTF-8」という文字エンコーディングで書くようにしましょう。
文字エンコーディングについては、後述をご参照ください。
6行目は、「name属性」の”discription”を記載しています。「メタ・ディスクリプション」という言葉を聞いたことはないでしょうか？
いわゆる、そのページの概要を書いておくところで、検索の上位に表示されるかどうかの大事な要素です。概要には、ヒットさせたい検索ワード（キーワード）を散りばめておきましょう。５行目のタイトルと同じキーワードを使うのが、一般的です。
bodyタグ
bodyダグで囲まれた部分は、Webページの本文で、実際にブラウザに表示されるところです。
bodyタグ内にあるh1, h2といったタグは、見出し（heading）タグのこと。h1〜h6まであり、数字が小さいほど文字フォントが大きくなります。
ここにも検索ワードを入れることが大切で、検索にも重要なタグであることをお忘れなく。
このように、HTML文書は上から、
- ドキュメントタイプ
- htmlタグ
- headタグ
- bodyタグ
の4つで、構成されています。
これ以外の多くのタグ・文章・画像などは、上記2〜4のいずれかのタグ内に追加して記載され、訪れた人が見やすいウェブページになります。
文字エンコーディング
上述の文字エンコーディングについて、補足説明をしておきます。これについては、何となくこんな感じという程度に捉えていただければ良いという程度で、詳しく覚える必要はありません。
普段、「文字エンコーディング」という言葉は意識していなくても、パソコンあるいはスマートフォンで、まれに「文字化け」した画面を見たことがあると思います。特に、受信メールでありがちですね。
文字化けは、コンピュータ上の文字コードが合っていないために起こります。
では、文字コードとは、そしてエンコーディングとは何でしょうか？
文字コードは、コンピュータ上の各文字に割り当てられるバイト表現のこと。と言われても、なんだかわかりにくいと思いますがが、
- Shift_JIS
- Unicode(UTF-8 / 16 / 32 etc)
- ISO-2022-JP
- EUC-JP
といった類なら、みたことはあると思います。Shift_JISは、日本語を含む文字列を表現する、日本独特の文字コードです。
「バイト表現」という言葉はわからなくても、文字コードを統一することで、「文字化け」していた文章が、自身の環境下（パソコンなど）で読めるようになります。
これはホームページでも同様で、世界的に標準の文字コードを使えば、例え日本語の文章であっても、世界中で作成した文書通りに表示されるということです。
そして、世界標準の文字コードは、当たり前ですがShift_JISではなく、UTF-8なのです。
ちなみに、エンコーディングとは、文字コード宣言のこと。文書の冒頭で、
「このHTML文書は、UTF-8で書いています」
と宣言しておくことで、どのパソコンで読んでも同じように表示されるというわけです。ホームページのソースコードを見ると、冒頭に必ず、
＜meta charset=”utf-8”＞
という表示があるのが、それです。
ここまでのまとめ
- 誰でも、プログラミングなど習ったことがない未経験の人でも、無料でホームページを作成することができます。
- 特別な道具は不要で、パソコンとテキストエディタがあれば、すぐに始めることができます。
- HTMLはホームページをインターネット上に表示させるための「設計書」、CSSはそのホームページを装飾する「指示書」のようなもので、タグで囲みながら文章を作成していきます。
これで、
「よし、私もホームページを自分で作成してみよう」
と思っていただければ幸いです。
コメント