今さら人に聞けないホームページ制作で必須の知識とは？

今日では、老若男女、さまざま年代層の人々がホームページを見ています。しかしながら、いざホームページを制作し公開する側になると、今まで意識しなかった、内部の仕組みを意識しなければなりません。

ホームページは一見すると、Word文書などのようにワープロ感覚でページを制作出来るように見えますが、実はそう単純ではありません。

ホームページを制作するためには、いくつかの要素に分けてページを制作していく必要があります。

まず、ホームページの内容に関しては、HTML (HyperText Markup Language) という言語で内容を書いていかなければなりません。ワープロソフトのように、ただ文章を打っていくだけではなく、「ここはタイトル」だとか、「ここは本文の段落」などと、タグを使って定義していかなければなりません。

そして、文字の大きさを変えたり、文字色を変えるには、ワープロソフトのように「文字をマウスで選択して、好きな色をパレットから選んで」というふうに手軽にできるものでもありません。それらを装飾するためにCSS (Cascading Style Sheets) という言語で、色の設定を記述する必要があります。

そして、HTMLやCSSだけでは、紙の上の文章のように「静止」しているので、PHP (Hypertext Preprocessor) やJavaScriptなどのスクリプト言語を利用して、動きのある「動的」なホームページにしてきます。

最近では、無料ブログやオンラインで自動でホームページを制作するツールも発達してきたので、あまりそういったところを意識せずともホームページは立ち上げることができるようになっています。

しかし、ある程度思い通りにホームページを作ったり、仕組みを理解したうえで高度な活用をしたい場合は、このような仕組みの予備知識を持っていると有利に働くでしょう。

 

ホームページの制作はHTMLで書く

では、HTMLは具体的にどのような役割があるのでしょうか。それは、ホームページの内容を書いていくときに、HTMLが必要になります。

Word文書やワープロなどでいうと、デザインを除いた、中身(コンテンツ)を書いていきます。

例えば、Wordで文章を書いていくとき、まずはタイトルが必要になります。この場合、Wordであれば、文章のトップにタイトルを書いて、マウスなどでフォントの大きさを大きめに指定すれば、タイトルを書いたことになります。

ところが、HTMLでホームページを制作するには、そう単純にはいきません。タイトルとするテキストを、h1タグというタグでタイトルテキストを囲むことで、タイトルとして表示させることができます。

例えば、この記事のように「今さら人に聞けないホームページの仕組み」という文章をタイトルとして認識させたければ、「<h1>今さら人に聞けないホームページの仕組み</h1>」というように、タグで囲んでいけばいいわけです。

つまり、文章の中で「ここがタイトルですよ」だとか、「ここがタイトルの中身ですよ」などと、HTMLで設定してページを制作していくわけです。

こうすることにより、ブラウザでタイトルの部分が大きく太く表示されたり、タイトル以外のところの文字がふつうの大きさで表示されたりして、文章の構成がわかりやすく表示されるようになります。

また、titleタグを利用することで、ブラウザの最上部に表示される、ページのタイトルを表示することも可能です。

このように、HTML言語を利用してホームページを制作することで、ただのプレーンなテキストで書かれたような文章が、Wordなどで書かれたような洗練された文書として表現することが可能になります。

これは、人間には大変面倒くさく、わかりにくいのですが、コンピュータには非常に効率的でわかりやすいので、このように書いて制作していく必要があるわけです。

 

HTMLで制作されたものをCSSで装飾する

一方でCSSは、HTMLで制作されたホームページの内容に対して、デザインを整えていく役割があります。

具体的に言うと、CSSによってテキストの色、フォントの大きさ、段落やテーブルの余白、ページの背景色や文字間隔など、ホームページのデザインに関わることを具体的に定義してページを制作していきます。

例えば、タイトルの色を赤に変えたいとしましょう。この場合、タイトルのタグであるh1タグにHTMLで「赤ですよ」という意味のことを書くのではなく、HTMLで書いたものとは別に、CSSで色を指定するようにします。

実は、HTML言語自体は、CSSを使わなくても、タイトルを赤にするとか、ページの背景色を青にするなどということを定義してページを制作することができます。しかしわざわざ内容はHTML、デザインはCSSと分けられています。それはなぜでしょうか？

それは、ひとつはごちゃごちゃしてわかりにくくなるからです。ホームページが、1つのページで構成されており、A4用紙一枚くらいの内容だったら、そんなことに気を使う必要もないでしょう。

ところが、ホームページは膨大なページ数になることも珍しくありません。小規模なホームページでも数ページ、大企業や研究機関などのホームページとなると、それこそ数千から数万ページ制作する必要が出てきます。

なので、内容とデザインはできるだけ分けて、それぞれを管理した方がいいと考えるようになったわけです。

特に、ホームページの制作が10ページを超えると、すべてのページのデザインを変えるのは一苦労です。

例えば、自分のホームページ内で、各ページの各タイトルの文字フォント、色、大きさを変えたいとします。この場合、ページが10ページあった場合、CSSを使用していなければ、一ページずつタイトルの設定を変えていかなければなりません。

ところが、CSSを使用すれば、自分のホームページのデザインを定義するCSSファイルに、タイトルのデザインを定義するh1タグの共通設定を変更してしまえば、一気にページ内のh1タグを使用するタイトルを変更することができるわけです。

これは、まだ10ページくらいならいいのですが、100ページ、1000ページともなると、CSSを使わない限り、ホームページのデザイン管理は難しくなります。

極端な話になると、世界最大のショッピングサイトであるAmazonは、2018年1月時点で5億6000万の商品を販売しているとのことです。つまり、単純に考えると、何億ページを管理する必要が出てくるわけです。
(参考記事: Scrape hero 「How Many Products Does Amazon Sell? – April 2019」)

とくに、現在ホームページを制作する場合、一ページ一ページ人がHTMLエディタを使って書いていく方法もありますが、データベースから勝手にプログラムがページを生成することも当たり前になっています。

例えば、Amazonやトヨタ、ユニクロなど、数万、数億の商品を取り扱っていて、一つ一つの商品の情報量が非常に多い場合には、各商品ページは、プログラムがデータベースにアクセスして、勝手に生成していく方法がとられます。

そうした場合に、内容(コンテンツ)はHTMLで記述して、デザインはCSSを利用して設定していくというふうにした方が、保守管理がはるかに楽で効率的になります。

 

スクリプト言語を利用して制作したホームページの内容を「動かす」

HTMLとCSSを利用することにより、制作したホームページを、Word文書のようにカラフルで分かりやすくレイアウトされたものとして表示できることがわかりました。

しかし、これだけでは、基本的には紙に書かれたチラシのように、ページの内容が「動く」ことはありません。

最近では、ホームページにアクセスすると、ゲームができたり、現在の時刻を表示したりします。また、ショッピングサイトではその人に応じておすすめの商品が表示されたり、ニュースサイトでは興味のありそうな記事まで表示してくれます。これは、スクリプト言語なしでは成立しません。

ホームページ制作に関わるとよく耳にするPHPやJavascriptなどがスクリプト言語です。あのWordPressも、スクリプト言語であるPHPで書かれています。

このように、従来の紙媒体とホームページとでは、スクリプト言語によって決定的な差が出ると言っても過言ではありません。

これは、もっと根本的なことを言うと、PHPやJavaScriptなどのスクリプト言語は「プログラミング言語」だということです。一方で、HTMLとCSSはプログラミング言語ではありません。

PHPやJavaScriptなどのスクリプト言語は、掛け算や引き算などを含めた複雑な計算をすることが可能です。また、条件に応じて処理を制御することも可能です。

それに比べて、HTMLやCSSは、高度な計算をしたり、条件によって複雑に処理を変えたりすることは基本的にはできません。

最近のホームページは、一昔とは違って、ただの紙媒体の延長線上ではなく、ページが一つのアプリケーションソフトのような感覚になっているといえます。

このような理由から、ホームページ制作を学習していく上では、HTMLやCSSだけではなく、PHPやJavaScriptなどのスクリプト言語の予備知識を持っていた方が、最新のIT関連の情報を読み解くうえで助けになるといえます。

 

まとめ

ホームページを制作していくうえで欠かせない要素が、HTML、CSS、そしてスクリプト言語であることを説明してまいりました。

まだ、インターネットが民間に普及したばかりの1990年代ならば、HTMLの知識だけで充分最先端のホームページ制作できたとお思います。しかしながら、PCやスマホなども含めて、ソフトウェアやハードウェア、ネットワーク技術が大変複雑になっています。

ホームページのデザインも一昔前はHTMLだけで充分でした。しかし、技術がどんどんと向上するにつれ、まともなホームページを制作するにはHTMLだけでは不十分となり、CSSでデザインして、スクリプト言語でもっと便利なサイトを作ることが当たり前となってきました。

このような状況から、ホームページを制作するにあたっては、これらの知識についてある程度理解を深めることをおすすめします。そうすることで、最新の技術に対応したホームページを制作して、その効能を十分に享受することが可能になります。