ホームページ作成の基本

ホームページの作成は、主に2通りの方法があります。

HTMLファイルを作成してアップロードする方法とWordpressを使う方法です。

HTMLファイルの作成は、最も一般的で従来からある方法になります。一方、Wordpressを使うというのは、近年急速に普及している方法になります。他に オンラインのホームページ作成ツールを利用する方法があります。

このページでは、HTMLファイル・CSSファイルの作成、リンクや参照、テンプレート、レスポンシブなど関連する用語について解説しています。

Webページの概念

ホームページは、サーバー上に HTMLとCSSというファイルがあり、それをブラウザがアクセスし読み込んで表示しています。

Webページの概念

  1. ブラウザに URL・ドメインを入力
  2. Webサーバーへアクセス
  3. Webサーバー上のファイルをブラウザが読み込み表示

ホームページは、ドメインWebサーバーHTMLとCSSが基本ということになります。

HTMLファイル

Webサイト・Webページのアドレスの末尾は .htmlとなっていることが多くなっています。これは、HTMLファイルがサーバーにおかれているということです。

HTMLファイルというのは、ブラウザを起動させて見ることができるファイルです。このHTMLファイルの作成がホームページ作成への第一歩になります。

Windowsのメモ帳で作成することができます。拡張子は .txtです。

メモ帳のファイル

このテキストファイルを「名前を付けて保存」とし、メモ帳なら拡張子を .htmlに変更します。拡張子 .htmlのファイルができます。

HTMLファイル

このファイルをクリックすると、ブラウザが起動して開けるようになっています。

ブラウザが起動

このHTMLファイルがサーバーにアップロードされて閲覧されていることになります。内容を編集する場合は、作成したHTMLファイルを右クリック→メモ帳などで開いて行います。

実際のホームページ作成においては、HTML言語を用いて記述します。文書を構造化して示す タグの使用が基本となります。

HTMLファイルへの記述

またメモ帳はやや機能が不足しているため、テキストエディタが使われるのが一般的です。

CSSファイル

HTMLファイルは、文書を構造化しコンテンツを表示させる役割があります。一方 CSSファイルは、HTMLファイルに対して装飾やレイアウトを規定する役割があります。

CSSファイルもメモ帳で作成することができます。スタイルシート言語を用いて記述します。HTMLファイルのそれぞれのタグに対応させるのが基本となります。

CSSファイルへの記述

このテキストファイルを「名前を付けて保存」とし、メモ帳なら拡張子を .cssに変更します。

CSSファイル

次に、HTMLファイルとCSSファイルの関連付けを行います。

HTMLファイルの<head>~</head>タグ内で、<link>タグを使います。この例では、<head>の下に記述しています。右端のダブルクォーテーション内にCSSのファイル名を指定します。

linkタグの記述

HTMLファイルを確認すると、CSSの設定が反映されます。

CSSの反映

CSSファイルも、テキストエディタが使われるのが一般的です。

フォルダ・階層

一般的にホームページは、複数のHTMLファイルや素材などで構成されます。そのため 実際にホームページを作成する場合は フォルダを作成し一元的に管理を行います。

まずフォルダを作成します。ディレクトリともいいます。自分で分かるように適当に名前を付けます。

フォルダ

一般的なホームページは、以下のような構成になります。test1やtest2というフォルダに、sample1.html、sanmple2.htmlがあるとします。

フォルダの中

  • images・・・ホームページで掲載する写真素材など
  • index.html・・トップページになるファイル
  • sample.html・・・それぞれトップページ以外のページになるファイル
  • style.css・・・CSSファイル
  • test1・test2・・・フォルダ、カテゴリーで分ける場合に作成します。

この中で、index.htmlは基本的に名称を変えることはできません。index.htmlは、そのホームページやカテゴリーのトップページになるファイルで、そういうページは原則として index.htmlになっていなければなりません。

他のフォルダやファイル 例えば imagesをimage、test1をcategory1、sample1をpage1のように変更はできます。

またimagesなど素材のフォルダは、test1やtest2などのカテゴリーのフォルダ内においてカテゴリー別に管理するということもできます。CSSファイルは、一般的に1つあり すべてのHTMLファイルから読み込みの設定を行います。CSSファイルは複数あり、フォルダにまとめられていることもあります。

例えば、AAA.comというドメインを使用し このフォルダ内のファイル・フォルダをサーバーにアップロードした場合、以下のようになります。

  • index.html・・http://www.AAA.com/
  • sample1.html・・http://www.AAA.com/sample1.html
  • test1のsample1.html・・http://www.AAA.com/test/sample1.html

index.htmlは、省略されて表示されることあれば、省略されずにURLに表示されることもあります。基本的にあまり違いはありません。

パソコンのフォルダ・ディレクトリの階層は、そのままドメイン・URLの階層となります。

どのような階層をもたせて、ホームページを作成するかというのは人によって多少異なってきます。ただホームページのひな形であるテンプレートなどを使用すると、概ねフォルダの中に上記のようなファイル・フォルダが予め格納されています。

ホームページの作成では、ブラウザでプレビューができるので、実際にドメインやサーバーがなくても アップロードした場合の状態を確認することができます。

リンク・参照

ホームページ作成で、重要な項目のひとつにリンクの設定があります。リンクは <a>タグを使います。例えば、<a href="sample1.html">sample1のページ</a>のように記述します。

ホームページ内部でのリンクを内部リンク、ホームページ外部へのリンクを外部リンク、あるいは単にリンクといいます。内部リンクでは相対パス、外部リンクでは絶対パス(ホームページのアドレス)を使います。

フォルダ内でのリンク

例えば、index.htmlから同じフォルダ内にある sample1.htmlへのリンクは sample1.htmlというファイル名、test1内のsample1へは test1/sample1.html、一方 sample1からindex.htmlへは index.htmlというファイル名、test1内のsample1からトップのindex.htmlへは ../index.htmlとなります。

また前述のCSSの参照の設定は、test2.cssというファイル名ですが、これはHTMLファイルと同じ階層にあるためです。そのため、test1内のsample1.htmlからトップのCSSファイルを参照する場合は、../style.cssのようになります。

リンクの他に、画像を表示させる <img>タグも相対パスを使います。例えば、<img src="images/test.jpg" alt="テキスト" />のように記述します。

例えば、index.htmlやsample1からimages内のtest.jpgを指定する場合は、images/test.jpg、test1内のsample1.htmlからは ../images/test.jpgとなります。

alt="テキスト"の部分は、必須ではありませんが、画像を説明する単語や簡潔な文を記述することがあります。代替テキストといいます。

テンプレート

このようにホームページ作成では、HTML・CSS、階層、リンク・参照などが基本的な項目となってきます。

その上で、HTML・CSSの多様なタグや記述方法を覚えていくことになります。HTMLはタグにidやclassという属性を加えることで、CSSで細かくコントロールすることができます。またCSSは、HTMLファイルに対して 単純なものから複雑なものまで 様々な値を設定することができます。

一般的にホームページには、ひな形であるテンプレートがあります。テンプレートには無料・有料のものや、書籍を購入するとインターネットでダウンロードして演習できるようになっているものもあります。

テンプレートを使用すると、HTMLのタブの種類や使い方、CSSの記述方法、相対パスなどの仕組みが自然と身に付いてくる傾向があります。仮にホームページを公開する予定がなくても、学習・練習目的として使うこともできます。

ホームページを実際に公開するという場合も、やはりテンプレートの使用が多くなっています。

HTMLやCSSを記述することから学習して、ホームページを公開するとなると時間がかかる可能性があります。

テンプレートは、ある程度デザインが出来上がっており相対パスなども設定済になっているため、文字や文章、写真を変更したり追加していけば、比較的早い段階で公開できる状態にもっていくことができます。また後でデザインなどを変更する場合は、該当のHTMLファイルやCSSファイルに修正を加えるということもできます。

レスポンシブ

レスポンシブとは、パソコン・タブレット・スマートフォンなど画面のサイズが異なるどのデバイスで見ても、自動で適切に表示サイズや文字サイズが調整されることをいいます。

このようなテンプレートを、レスポンシブテンプレートといいます。

近年はパソコンからのみならず、スマートフォンやタブレットでの検索や閲覧も多くなっています。今後ホームページを作成・運営していくうえでは、レスポンシブ対応かどうかは検討すべき要素といえます。

アップロード

HTMLファイルを編集し、ブラウザで確認という作業を繰り返せば、ホームページが出来上がってきます。

アップロードには主に2つの方法があります。1つはホームページ作成ソフトを使う方法、もう1つが FTPソフトを使う方法です。

ファイルをサーバーに転送する機能のことを FTP機能といいます。一般的にホームページビルダーやAdobe Dreamweaverなどのホームページ作成ソフトというのは、このFTP機能を有しています。

テキストエディタなどで作成した場合は、ファイルをアップロードするために 別途ソフトを使用します。代表的なものに、FFFTPというフリーのソフトウェアがあります。

FTPソフト

パソコンにダウンロード・インストールして使うことができます。FFFTPの設定の箇所にレンタルサーバーのアカウントやパスワードなどを入力して使用します。FFFTPの設定方法は、レンタルサーバーなどで公開されていることがあります。(例:さくらインターネット

アップロードする場所は、レンタルサーバーによって決まっており オンラインマニュアルなどに記載されています。アップロード後、ブラウザのURLに使用しているドメインを入力すれば、アップロードした index.htmlのファイル、つまりホームページのTOPページが表示されます。

ホームページが表示されたのを確認したあとは、HTTPからHTTPSへの移行を行うのが一般的です。HTTPSへの移行は基本的にサーバーの設定で行うことができます。

Wordpress

WordPressとは、サーバーにインストールして ホームページやブログを作成することができるソフトウェアです。インストール後に、ログインしてページの新規作成や編集を行います。

プログラミング言語であるPHPとデータベースによって動作していますが、PHPやデータベース、またHTML・CSSの知識などがなくてもコンテンツを作成・公開することができます。

HTML・CSSによるホームページ作成がパソコンで行うのに対して、WordPressは、サーバーのソフトウェア上で行うということになります。WordPressでホームページやブログを作成する場合も基本的にドメイン、Webサーバーは必要となります。

ホームページ作成ツール

オンライン上でホームページを作成できるサービスがあります。Wixやジンドゥーなどがあります。WordPressと同様、オンライン上でログインして ページの作成・編集を行います。

このようなサービスは、一般的に無料・有料のプランがあるのが特徴で、プランによってサービスの内容が多少異なっています。

テンプレートが予め用意されており、HTML・CSSの知識などがなくても ホームページの作成を行うことができます。

プランによっては、独自ドメインを使用したり、決済システムの導入やECサイトの構築ができるものもあります。

このようにホームページの作成というのは、HTML・CSSファイル、WordPress、ホームページ作成ツールに分かれます。どの方法で作成するにしても、HTML・CSS、サーバー、ドメインというのは基本的な項目となっており、言葉としては度々出てくることがあります。

法人・企業・事業所などでは、ホームページ作成を外部の制作会社に委託することも多くなっています。その場合もホームページ制作では、HTML・CSSファイル、WordPressのどちらかを使うのが一般的です。