テンプレートを使い実践して学んでいく

ホームページにもいろいろなタイプのものがあります。

ただこれからはじめてホームページを作るという場合は まず基本を知っておく必要があります。

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

WEBページの概念

ホームページは そもそもどういう仕組みになっているか?といいますと、

サーバー上に HTMLとCSSで記述されたファイルがあり、ブラウザがアクセスし読み込んで 表示していることになります。

概念図

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

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

ホームページのファイルはどうなっているのか?

私達はブラウザで表示されているページを見ているのですが、これらはサーバーにおかれているファイルを見ていることになります。

ではサーバーにはどういうファイルがあるのか?

多くのWEBサイトのアドレスの末尾は .htmlとなっています。

拡張子 .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言語+文字や文章のコンテンツという構成です。

編集する際などは 文字や文章を書き足したり変更したりします。


はじめはテンプレートを使うのが近道になる

ところで フォルダの中に index.htmlやsample1.htmlを作ったり HTMLファイルにHTML言語を書いていったりという作業は、時間と手間が非常にかかります。

ファイルの作成なら簡単ですが、HTML言語を書いたり スタイルシートを書くとなると 専門的に勉強しないと ホームページの公開までどれほどの時間がかかるか分かりません。あまり現実的な話ではないのです。

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

つまりフォルダの中にある index.html、sample1.html、style.cssなど必要なものが入っていて なおかつ HTMLファイルにはすでにHTML言語が書かれています。

なのであとは文字や文章、写真を追加していけば オリジナルのホームページになっていきます。

テンプレートというのは デザインまで出来上がっているので あとは自分なりに編集すればすぐに公開できるものになります。

フリーで公開・提供されているテンプレートもたくさんあります。

検索して見つけることは簡単にできるでしょう。

またデザイナーやプロが作成したテンプレートは 商用・ビジネス用途としても十分使えるでしょう。

coolwebwindowCoolWebWindows

フリーテンプレート・レスポンシブテンプレート有り


INFOPLATE5 INFOPLATE 5

レスポンシブテンプレート有り。


賢威 賢威

レスポンシブテンプレート有り。


クラウドテンプレートクラウドテンプレート

フリーテンプレート・レスポンシブテンプレート有り。


Jimdo Jimdo

ジンドゥー。HTML・CSS入力ではないホームページ作成ツール。

無料プランは独自ドメインではありません。


このテンプレートを使用するというのは、文字や文章を書き込んでいくだけというメリットもあるのですが、何度も使っているうちに自然とHTML言語がHTMLのルールというが身に付いてくるというのもあります。

ホームページ作成の練習ができる

テンプレートは ダウンロードして編集することで ホームページ作成の練習を行うことができます。

ドメインやレンタルサーバーがなくても パソコンのブラウザで表示させることができるので、アップロードや公開をしなくても 実際に公開したらどのように表示されるか知ることができます。

自分のパソコンで ホームページ作成の練習ができるということです。

またHTMLファイルの編集だけでなく、スタイルやデザインに関する CSSの編集も行ってどのように表示されるかを実践することもできます。

基本的なタグ

テンプレートを使えば ホームページ作成で必要となってくる 基本的なタグがどういうものか自然と分かるようになってきます。

たとえば

  • <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のファイルがブラウザに表示されます。


関連情報