ホームページ作成の基本

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

一般的なホームページは、静的ページといわれるもので、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は基本的に名称を変えることはできません。

他のフォルダやファイル 例えば imagesをimageやphoto、sample1をpage1とか style.cssを layout.cssとかに変更はできます。

index.htmlは、トップページになるファイルで そういうページは原則として index.htmlになっていなければなりません。

例えば 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言語が書かれています。

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

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

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

基本的なタグ

ホームページ作成で必要となってくる 基本的なタグには以下のようなものがあります。(タグはすべて半角を用います。)

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

他にもたくさんあるのですが、使っているうちに覚えていくことができます。

書籍などを平行して読んだり講座やeラーニングを活用すると早く上達するでしょう。

レスポンシブとは?

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

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

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

アップロード方法

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

アップロードには主に2つの方法があります。

1つはホームページ作成ソフトを使う方法、もう1つが FTPソフトを使う方法です。

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

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

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

FFFTP

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

アップロードすれば それで公開になります。

たとえば ブラウザのURLに取得したドメインを入力すれば アップロードしたindex.htmlのファイルがブラウザに表示されます。


関連情報