ホームページの作り方

前回ご紹介したように、ホームページのデータを保管しておく場所がサーバーです。

ホームページは、HTMLやCSS（スタイルシート）で作成したファイルをサーバーに転送することで、誰でも見ることが出来る状態になります。サーバーはクライアントPCからの要求に応えて、データの受け渡しを行う役割を担います。

［データセンターとは？］
データセンターとは、顧客のサーバーを預かり、インターネットへの接続回線や保守・運用サービスなどを提供する施設のこと。サーバーを預かってインターネット回線やメンテナンスを提供するサービスを「コロケーションサービス」、「サーバーハウジングサービス」と呼びます。

［データセンターの魅力］
データセンターは耐震性に優れたビルに高速な通信回線を引き込んだ施設のことで、自家発電設備や高度な空調設備を備え、IDカードによる入退室管理やカメラによる24時間監視などでセキュリティが確保されています。基本的にはサーバの運用は顧客自身が行ないますが、サーバー監視サービスや、定期バックアップなどの付加サービスを提供しているデータセンターもあります。

サーバーは自分で構築することも出来ますが、24時間電源供給や不具合が出た場合の保守などは個人では大変な作業となります。そこでサーバーレンタルという選択肢もあるのですが、自前のサーバーを使いたいというニーズも多くあります。そこで利用したいのが、コロケーションサービスやサーバーハウジングサービスと呼ばれるものです。

今回取り上げるホームページの作り方として、必要となる『サーバー』についてです。以前にもご紹介しましたが、サーバーとはホームページのデータを置いておく場所のことです。

ホームページは、HTMLやCSS（スタイルシート）で作成したファイルをサーバーに転送することで、誰でも見ることの出来ます。ホームページの構成データをサーバーへ転送することを、「アップロード」といいます。

サーバーは、自分でサーバーを購入して独自運用することも可能ですが、高度な専門知識を要すため、初心者に限らず多くの方がサーバー会社と契約してスペースを確保することが一般的です。サーバーサービスは、サーバー専門業者、プロバイダーが契約会員向けに提供するサービス、インターネット関連の企業が幅広く提供するもの、また、サーバーサービスには有料サービス、無料サービスが存在します。

ホームページの作り方のうち、ブログサービスで作成する場合はサービス会社から提供されている「サービス型」（レンタルサービス型）であれば、そもそもサーバーを用意する必要はありません。最近は多くのブログサービスが無料で始められるようになっているので、初期費用が掛からないのが一般的になりつつあります。

レンタルサービス型のCMSやブログの場合は、そのサービスを提供している会社のサーバーを借りてCMSやブログを運用することになります。それ故、別途サーバー会社と契約する必要はありません。

今回はホームページの作り方として、技術的なことから離れて『コンテンツ』のことについて考察してみましょう。

まずコンテンツとは、中味のこと。伝えたいこと、メッセージ、イメージなど。
ホームページを通して、アクセスしてきた人に「何を伝えたいのか」ということを整理しておきましょう。

その際に難しいことは考えなくてもいいです。例えば、自分の趣味のことだったり、興味のあることだったり、なんでもOK。
ただし、趣味のものだったり、興味のあることをホームページで広く一般に公開するわけですから、何か「メッセージ」が必要です。

なんのメッセージもなくただ「集めたもの」を整理して公開しているだけ……というのはどうでしょうか。

最初はそうだったとしても、ホームページとして創り上げていく中で、何か伝えたいポイントが見えてくると思います。それがメッセージです。やはり、メッセージを明確にしておくことが大切です。

次に、そのメッセージを如何に伝えるか。

人間は「ストーリー」が好きです。「なぜそうなったのか」「誰がどうしたのか」「どんな思いがあるのか」「サイドストーリー（裏話）」など。是非、ホームページのコンテンツ作成に際してはストーリーを意識しましょう。

最後の課題として挙げておきたいのが『コンテクスト』です。日本語にすると、文脈とか行間、前後関係、背景などといわれるものです。ストーリーを支える重要な要素ですが、このコンテクストがしっかりしているかどうかが重要です。

ホームページの作り方で無視できないのが、テキストエディタです。ほとんどのパソコンには最初からテキストエディタやメモ帳ソフトが入っていますが、必要最低限の機能しか備わっていないため、使いにくい面があります。

HTMLやスタイルシート（CSS）、JavaScriptなどを直接編集するなら、「タグ」や「プロパティ」の色分け表示可能で、さらに高度な編集機能を搭載したテキストエディタを使ったほうがいいと思います。色分け表示ができるテキストエディタには、タグと文章の違いが一目で分かる、記述ミス・スペルミスがすぐに分かる、有効・無効が分かりやすいといったメリットがあります。

HTMLタグ内部には何らかの色が付けられ、それ以外の文章は黒色で表示されるため、タグと文章の違いが一目で分かるだけで、ホームページの作り方がグッと楽になります。

HTMLタグは「<」記号で始めて、必ず「>」記号で閉じなければなりません。また、属性値は「”」記号で始めて、終わりにも「”」記号を書かなければなりません。これらの対応を忘れると、意図通りには表示されなくなります。ソースが色分け表示されていれば記述ミスを見つけやすくなります。

その他、「メモ帳」のようなテキストエディタではなく、高機能なテキストエディタを使うメリットとして、タブ・全角空白・半角空白の区別ができる、様々な文字コードが扱える、矩形選択や一括インデントなどの編集機能が使える、ブラウザを直接呼び出して表示確認できるなどのメリットが挙げられます。

ホームページの作り方で注目されている考え方が「WEBアクセシビリティ」というものです。まずは、アクセシビリティについてご紹介します。

アクセシビリティ（accessibility）とは、情報やサービス、ソフトウェアなどが、健常者だけでなく高齢者の方や障害を持つ方にとっても使いやすい、扱いやすいかどうかという意味で使われることが多くなっています。「accessibility」とは、「access+ability」と分解され、「近づきやすさ」「接近容易性」といった意味の英単語のことです。

いくつか例を挙げると、手を使えない人のためにマウス操舵だけでなく、キーボードでの操作が可能かどうか。弱視や老眼の人のためにフォントサイズや配色がカスタマイズ可能かどうか。視覚障害の人は読み上げソフトウェアを使用するので、それに適した記述方法が用意されているかどうか。

ホームページの作り方でも、このアクセシビリティという考え方が求められるようになってきています。それが一般に「WEBアクセシビリティ」と呼ばれるものです。具体的には、画像や音声などには代替テキストによる注釈をつけること、すべての要素をキーボードで指定できるようにすること、情報内容と構造、および表現を分離できるようにする（HTML文書とスタイルシートの使用）などの方針が定められています。このような作り方の根本には、「ユニバーサルデザイン」という考え方があり、万人が使用できる環境を作るという思想が必要とされています。

今回、ホームページの作り方の基本として学ぶのは、「スタイルシート」です。ホームページをブラウザに表示する際に必要になるものですが、スタイルシート単体ではあまり意味がありません。HTML文書とセットで初めて機能するものなのですが、今回はHPの作り方としてスタイルシートのことを勉強しましょう。

そもそもスタイルシートとは、ワープロソフトなどで、フォントの種類や文字の大きさ、色、行間の幅、修飾など、文書の見栄えに関する情報をひとまとめにした、文書の雛形のことを指しました。あらかじめ複数のスタイルシートを用意しておくことにより、簡単に文書作成することができるというものです。伝票作成などの定型文書を作成する際に、スタイルシートを利用することで見栄えを統一することができる便利なものです。

このスタイルシートという考え方はサイト制作でも利用されるようになり、現在では「スタイルシート」の意味はむしろホームページの作り方のほうが主流となっています。

HTML文書にスタイルシートを適用することで、複数のページの見栄えを統一することができます。また、HTML文書からレイアウトに関する情報などを分離し、文書の構造だけを記述することが可能になるので、HTML文書の論理的な構造が把握しやすくなるほか、メンテナンスがずっと容易になるというメリットがあります。

また、HTML文書がキレイになるため、検索エンジンのクローラーにも読みやすい構造になるため、SEO的にもいいとされています。

ホームページの作り方というと、技術的な作り方とコンテンツ（内容）の作り方と大きく2つあります。どうしてもホームページの作り方と聞くと、技術的なことばかりがクローズアップされますが、なんと云ってもホームページの作り方で重要になるのはコンテンツの作り方になります。

ホームページの技術的な作り方にばかり気をつけてしまうと、中身のないホームページが出来上がってしまうこともしばしば。ホームページの作り方で本当に気をつけなければならないのは、コンテンツの作り方なんです。

内容さえしっかりしていれば、技術的なことはあとからなんとでも修正がききますが、コンテンツがスカスカというのはなかなか修正がききません。ホームページの作り方で重要なのはコンテンツ（中身）だということです。でも、どうしても技術的な作り方を知らないと、ホームページなんて作れないんじゃないかと思う人が少なくありません。技術的な作り方のほうが順序だてて勉強できますし、すぐに形に表れるので学びやすいというのもあります。

でも本当にしっかりと練らないといけないのは、ホームページの中身の作り方なのです。コンテンツの作り方さえしっかりとしていれば、作り方なんてなんとかなるものです。「何を伝えたいのか」「何が重要なことなのか」ということを見失わないでホームページの作り方を勉強していきましょう。

ホームページの作り方を勉強するに当たって、本当に大事なことは技術的な作り方を学ぶことではなくて、コンテンツの作り方をしっかりとすることだということを今回はお伝えしました。

今回はHPの作り方の基本として、HTMLの基本についてご紹介しましょう。
初回の今日は、HTMLのタグについて簡単な説明を行っていきます。まだまだ、HPの作り方といえる段階ではありませんが、HTMLの構造やルールを覚えることが、HPの作り方の基本になりますのでしっかりと覚えていきましょう。

HP（ホームページ）は、HTML（Hyper Text Markup Language；ハイパーテキストマークアップランゲージ）というマークアップ言語を使って作られています。タグというマーク（命令）を使って、HTML文書の構造を指定したり、文字の大きさや色を変えるといったことなどが出来ます。HTMLを使ってHPを作る場合、メモ帳などのテキストエディタを使ってタグを記入していきますが、それをHTMLファイルとして保存しブラウザで開くと、タグの指定されたとおりにブラウザに表示されることになります。

HPの作り方の基本として、タグとは<タグ名>の記号で囲まれた半角の英数字のことです。試しにどのホームページでも構わないので、ホームページ上で右クリックして、「ソースの表示」を選択してみて下さい。メモ帳が立ち上がってたくさんの<　>で囲まれた文字が表示されると思います。この<>で囲まれているのがタグです。

メモ帳に表示されている文字は、同じ大きさで色もついていませんが、このタグを使って書かれたHTML文書をブラウザで表示すると、タグで指定された通りに文字の大きさや色を変えて表示されることになります。

【メモ帳、またはテキストエディタ】
ホームページは、主に以下のファイルから構成されています。
◎HTML文書／HTML（エイチティーエムエル）、またはHTM（エイチティーエム)
◎画像（グラフィックデータ）／GIF（ジフ）、JPG（ジェイペグ）、PNG（ピング）、BMP（ビットマップ）
◎その他／CSS（カスケーディングスタイルシート）、JS（ジャバスクリプト）etc.
このようなものからホームページのファイルは構成されています。
HTML文書（テキストファイル）は、文字が打てるものがあればＯＫです。
ホームページビルダーなどのソフトを使用しなくてもメモ帳で充分できるんです。
でも、その場合はＨＴＭＬの記述を知っていないとできません。
メモ帳はWindowsの「スタート」→「プログラム」→「アクセサリ」の中に入っています。
メモ帳よりもHTMLを記述するのに向いているのがテキストエディタ。
テキストエディタはたくさんのフリーソフトがありますので、検索して自分好みのものをゲットしましょう。
私は秀丸を使用しています。

【ホームページ作成ソフト】
ある程度、ホームページの作り方やホームページのタグをご存知の方なら、メモ帳、またはテキストエディタで充分でしょう。
しかし、ホームページのタグ？って方には厳しいでしょう。
ある程度の知識があっても皆さん、作成ソフトは何かしら持ってらっしゃると思います。
有名なのはホームページビルダーやドリームウィーバー(Dreamwever)です。

【サーバースペース】
ホームページを公開するためには、前にも少しお話しましたがサーバーが必要です。
サーバーを借りるサービスのことを「レンタルサーバー」っていいます。
個人の方はら、レンタルサーバーで充分でしょう。
容量もいろいろですが、自分のしたいことを充分考えて選んでみましょう。
◎初心者さん向きレンタルサーバーはいろいろありますが、サーバースペースを無料で提供してくれる所もたくさんありますので検討してみてください。
自分の使用しているプロバイダも所有しているところがあるかもしれません。
Yahoo!ジオシティーズやinfoseek、などなどたくさんあります。
でも無料のところはほとんどの場合は広告が入ります。
広告が入ってもかまわないという方はどんどん利用させていただくといいですね。

【FTP 転送ソフトウェア】
FTP って聞いたこはありますか？
自分のパソコンで作成したホームページのデータを、電話回線や光回線を通してネットワーク上のホームページを置く場所（ホームページスペース）に転送するソフトです。
このFTPソフトはFFFTPという超有名なフリー（無料）ソフトがあります。とても使いやすく初心者さんにおすすめでーす。フリーのソフトもこれが無料で使えるの？ってくらいすごいものたくさんありますよね・・・
私は自宅ではDVDのダビングソフトやら、音楽ソフトやら、家計簿にいたるまで、なんでもフリーのソフトを使っています。
あなたもどんどん活用してみてくださいね。

またFTPソフトはホームページビルダー（IBM）やドリームウィーバー（Macromedia）などのホームページ作成ソフトにも、内蔵されていますからご安心を！