ホームページ作成の基本

ホームページには、大きくふたつに分けることができます。

一般的なホームページは、静的ページといわれるもので、htmlファイルにより構成されています。一方、動的ページといわれるものは、条件によってページの内容がその都度切り替わるようなページです。動的ページは、プログラミング言語などが関わってきます。

通常、ホームページの作り方を学ぶというのは、静的ページのことです。

このページでは、ホームページはどのように作られて 公開されているのか?またホームページの作り方の基本について解説しています。

Webページの概念

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

概念図

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

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

htmlファイル

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

このhtmlファイルの作成がホームページ作成への第一歩になります。

htmlファイルというのは、ブラウザを起動させて見ることができるファイルです。パソコンを使用しているとしばしば見るファイルになります。

たとえばメモ帳のファイルがあるとします。拡張子は .txtです。

テキストファイル

このテキストファイルを「名前を付けて保存」とし、メモ帳なら拡張子を .htmlに変更、テキストエディタならファイルの種類で HTMLを選びます。

HTMLファイルで保存

するとこのように 拡張子 htmlのファイルができます。

htmlファイル

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

ブラウザが起動

このhtmlファイルがサーバーにアップロードされて閲覧されていることになります。

作成

ホームページは、パソコン上で作成します。

ブラウザでプレビューもできるので、実際にドメインやサーバーがなくても ホームページの作成はできます。

まずフォルダがあります。自分で分かるように適当に名前を付けます。

フォルダ

このフォルダの中はこのようになっています。

フォルダの中

  • images・・・ここにはホームページで掲載する写真素材など
  • index.html・・トップページになるファイル
  • sample.html・・・それぞれトップページ以外のページになるファイル
  • style.css・・・htmlファイルをどのように表示するか スタイルシートともいいます

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

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

例えば AAA.comというドメインなら、

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

のようになります。index.htmlは省略されて URLに表示されることもあります。

テキストエディタ

ホームページの元にもなる HTMLファイルはHTML言語で書かれています。HTMLファイルの元となっているため、ソース、あるいはソースコードともいいます。

ホームページを作ったり編集したりするときは、このHTMLファイルを開いて行います。

HTMLファイルはメモ帳でも開くことができますが、通常は テキストエディタというソフトが使われます。

HTMLファイル上で右クリック→プログラムから開く→メモ帳

HTMLファイルを開く

HTML言語+文字や文章のコンテンツという構成です。編集する際などは 文字や文章を書き足したり変更したりします。

テンプレート

HTMLやCSSを記述するとなると、ホームページの公開までどれほどの時間がかかるか分かりません。

多くのホームページを持っている人が実際に行う方法、これからホームページを作成したいという方にとって最適な方法は、すでにある程度出来上がっているホームページのテンプレートを使用するということです。

フォルダの中にある index.html、sample1.html、style.cssなど必要なものが入っていて、HTMLファイルにはすでにHTML言語が書かれています。またCSSの参照場所を指定したり、ページとページをリンクさせる相対パスなどもすでに設定済みになっています。

つまり、文字や文章、写真を変更したり追加していけば、比較的早い段階で公開できる状態にもっていくことができます。

テンプレートを使用するというのは、何度も使っているうちに自然とHTML言語や仕組みが身に付いてくるというのもあります。仮に公開する予定がなくても、練習・学習目的として使うことができます。

インターネットで検索すると、無料や有料のテンプレートを見つけることができます。

タグ

HTML言語の基本となっているものが、タグになります。

例えば、基本的なタグには以下のようなものがあります。タグはすべて半角を用います。

  • <h1>・・・見出しタグ </h1>で閉じます。h1~h4など複数使えます
  • <p>・・・段落・文章 </p>で閉じます
  • <a>・・・リンク </a>で閉じます
  • <br />・・・改行
  • <img>・・・画像
  • <ul>・・・箇条書き </ul>で閉じます

他にもたくさんあるのですが、使っているうちに覚えていくことができます。書籍などを平行して読んだり、講座やeラーニングを活用すると早く上達するでしょう。

レスポンシブ

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

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

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

アップロード

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

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

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

テキストエディタなどで作成した場合は、ファイルをアップロードするために 別途ソフトを使用します。

アップロード用のソフトで代表的なものに、FFFTPというフリーのソフトがあります。

FFFTP

パソコンにダウンロード・インストールして使うことができます。FFFTPの設定の箇所にレンタルサーバーのアカウントやパスワードなどを入力して使用します。

アップロードすれば それで公開になります。ブラウザのURLに使用しているドメインを入力すれば、アップロードした index.htmlのファイルがブラウザに表示されます。