はじめてのホームページ作成方法

はじめてのホームページ作成

投稿日 更新日

by Chiharu Morita

このページは自分でホームページを作ってみたい初心者の方を対象とした記事になります。

目次

  1. 初心者が一番はじめに押さえておきたい３つの事
  2. 自分で作る時に必要なツール
  3. ホームページ制作に必要なパソコンの設定
  4. パスの書き方について
  5. ホームページをインターネットに公開するには

ホームページ作成の初心者が一番はじめに押さえておきたい３つの事

1.インターネットとは

皆様の目的はご自分のホームページをインターネットに掲載して情報を発信することかと思います。 まず、インターネットについて知りましょう。簡単にいえば、情報をやり取りできる世界規模のネットワークのことです。 もともとは米国防総省の技術でしたが、民間での利用が許可され現在の通信網となりました。

この世界規模のネットワークは、誰かが統括しているわけではなく、個々のサーバと呼ばれるコンピュータが互いに接続されていることで成り立っています。そして、TCP/IPという通信手段によって情報のやり取りがなされるというわけです。

通常、個人がインターネットに接続するには、プロバイダという接続代行サービスを提供している企業 との契約が必要となります。プロバイダと契約するインターネットに、自分のパソコンを接続しホームページを閲覧することができます。

2.サーバとは

皆様はホームページを普段から閲覧されていると思いますが、24時間見ることができますよね。理由をご存知でしょうか？答えは！24時間動いているコンピュータがあるからです。これをWWWサーバ（World Wide Web サーバ）と呼びます。

このようにいうと、ご自分のパソコンをつけたままにしなければならないのかと 思われた方もいるかもしれませんが、そんなことはありませんので、安心してください。個人でサーバをつくる方もいますが、一般的ではありません。

通常はサーバをレンタルしてくれる企業がありますので、 こちらの企業と契約をし、自分のスペースを借りてホームページをインターネットに掲載することになります。料金は月額数百円～数千円です、スペース容量やサービス内容によって、値段が違います。

3.ドメインとは

○○.comとか○○.jpなどの表記をご存知かと思います。これをドメインと呼びます。コンピュータにはIPアドレスという識別番号が1台につき1番号ついています。この番号が認識されることによって、ネットワーク上の通信が可能になっているのです。しかしこの番号は数字の羅列の為、 人間にはわかりにくいものです。

そこで、IPアドレスを人間にわかりやすいものに変換したものをドメインといいます。ドメインはインターネット上のコンピュータを識別する住所のようなものです。これはDNS(ドメインネームサーバ)によって識別、割り当てがされます。 （IPアドレス1つに複数のドメインの割り当てができるので、複数のホームページを運用できます。）

そこで、皆様に気をつけてほしいことは必ず独自ドメインの取得ができるレンタルサーバやホームページ作成サービスの会社と契約することです。独自ドメインがあればレンタルサーバが万が一サービスを停止してしまった場合・ホームページ作成サービスがサービスの停止となってしまった場合でも、ドメインはそのままに他社に移動することができるからです。

もし、皆様が無料の独自ドメイン発行のないサービスでホームページを運営していたとします。 そこで、事業者のサービスが停止してしまったら・・・ホームページの住所がなくなり行方不明になってしまいます。

これだけは本当気をつけて頂きたいと思います、せっかくの努力が水の泡になってしまいますので。

ムームドメインなどのドメイン取得・管理会社で取得して、そこに保管しておくのがベストかと思います。

もっと詳しくはこちらの記事をご覧ください。ドメインとは

ホームページ作成に必要なソフトを紹介します

テキストエディタ

皆様はこれからご自分のホームページを作るためにHTMLとCSSを学んでいくわけですが、プログラムを記述するにはテキストエディタに書いていきます。

テキストエディタとはWindowsの場合「メモ帳」、Mac osの場合「SimpleText」が付属でついていますが、 あまりお勧めできません。もっと使いやすいテキストエディタを使いましょう、以下掲載の無料テキストエディタをダウンロードしましょう。特に「メモ帳」は絶対に使わないでください。

お勧めの無料テキストエディタ

  1. Bracketsホームページ制作にはこちらがおすすめです。
  2. Atomエディター
  3. Terapad for Windows
  4. mi for Mac

そのほかのテキストエディタのまとめページです。参考にしてください。
webオーサリング

入力時の注意点として、必ず’半角’で入力してください。文字コードをUTF-8（BOMなし）を選択します。テキストエディタの基本（環境）設定の画面から指定しておきます。文字コードは必ずUTF-8のBOMなしのものを選択します。詳しい説明はしませんが、BOMつきは不具合が発生しますので、BOMなしを選択してください。

ホームページ制作に必要なパソコンの設定

※これから作るファイルとフォルダにつける名前は必ず半角ローマ字表記にしてください。

拡張子を表示する設定をします

拡張子とは、ファイル名の末尾についている「.jpg」「.html」などをさし、ファイルの種類を表すものです。 たとえば、「.xls」はエクセルファイル、「.txt」はテキストファイルになります。デフォルトでは非表示になっているはずです。

Windows表示方法・・・

  1. 任意のフォルダを開く
  2. ツールバーのツールを選択
  3. フォルダオプションを選択
  4. 表示タブを選択
  5. 詳細設定ないの”登録されている拡張子は表示しない”のチェックをはずす

ホームページを作るには「.html」もしくは「.htm」という拡張子をつけてファイルを保存することになります。こうすることで、ホームページとしてブラウザ(インターネットエクスプローラーなど)でファイルを開くことができます。

index.htmlという名前を付けてファイルを保存

※世界共通ルール、として一番最初のページに相当するhtmlファイルの名前は必ず『index』とつけてください。

保存の方法・・・テキストエディタに記入した内容を保存します。実際にやってみましょう。
kakucyousi

↓ファイルを選択し名前をつけて保存を選択します。
kakucyousi2

↓ファイル名をindexとして、ファイルの種類をHTMLファイルを選択します。
kakucyousi4

index.htmlというファイルが完成します！
faile

index.htmlファイルを保存するためのフォルダを作ってください。その中に保管して管理します。フォルダ名は必ずローマ字表記で作成！

テキストエディタで保存したファイルを編集するには

  1. 保存したファイルをテキストエディタのショートカットにドラッグ＆ドロップする。
  2. 保存したファイルを右クリックしプログラムから開くを選択する。

パスの書き方について

ホームページの作成上、とても大事なところです。すぐにわからなくても何度も確認してください。※これから作るファイルとフォルダにつける名前は、必ずローマ字表記にしてください。

パスについて

パスとは、ファイルやフォルダの位置を表した文字のことです。パソコンの中やインターネット上には、必ず場所を表す記述があります。 人間に置き換えると”住所”と考えるとわかり易いかもしれません。

例

”http://yahoo.co.jp”
→インターネット上のヤフーの位置を表しています。

”home/top/index.html”
→homeフォルダ内にあるtopフォルダ内にあるindex.htmlファイルという意味です。

絶対パス

絶対パスとは、ホームページの住所だと思えばわかりやすいです。上の例の”http://yahoo.co.jp”のことです。

相対パス

相対パスとは、ある場所からある場所を指定した際の経路を表します。AファイルからBファイルを指定した際の経路のことです。

”home/top/index.html”が相対パスです。

ホームページを作る際に、相対パスは頻繁に使います。皆様はよくホームページを閲覧されると思いますが、ある場所をクリックしたら次のページに進んだり、最初のページに戻ったりなどの経験をされているかと思います。

詳しくは『HTMLのタグ集』に記載してありますが、これを「リンク」といいます。リンクを設定しなければどこにも移動できないホームページになりますよね。つまり、リンクを設定する際の移動経路となる”相対パス”の記述が、非常に重要になりますので、しっかりと書き方を学びましょう！

ホームページ作成の基本ディレクトリ構造

ホームページを作るには、ファイルをフォルダにいれて管理します。この構造のことをディレクトリ構造といいます。 下の図は3階層になっています。1階層は「hpフォルダ」、2階層は「imageフォルダ」「Aフォルダ」、3階層は「Bフォルダ」です。

pass

☆図の説明

  1. 「hpフォルダ」の中に「Aフォルダ」「imageフォルダ」「index.html」ファイルが入っています。
  2. 「imageフォルダ」の中に「foto.jpg」ファイルが入っています。
  3. 「Aフォルダ」の中に「Bフォルダ」「abc.html」ファイルが入っています。
  4. 「Bフォルダ」の中に「abc2.html」ファイルが入っています。

相対パスの記述ルール

１階層下がるときは「/」、1階層あがるときは「../」同階層の時は何も書かない。覚えることはこれだけです。下記の問題をやりながら練習しましょう！リンクの設定をする際のパスの記述についてです。

問題１：abc2.htmlからabc.htmlへのパスを記述してください。

答え：「../abc.html」

問題２：index.htmlからabc2.htmlへのパスを記述してください。

答え：「A/B/abc2.html」

問題３：abc2.htmlからfoto.jpgへのパスを記述してください。

答え：「../../image/foto.jpg」

問題４：index.htmlからfoto.jpgへのパスを記述してください。

答え：「image/foto.jpg」

問題５：abc.htmlからfoto.jpgへのパスを記述してください。

答え：「../image/foto.jpg」

ホームページをインターネットに公開するには

FTP・FTPS・SFTPソフトを使って、レンタルサーバーに作ったファイルを転送します。

  1. FTP(File Transfer Protocol)—もっとも広く利用されている通信手段によりファイルを転送する。しかし、セキュリティに弱く悪意のあるものに内容を傍受される恐れがある。
  2. FTPS(File Transfer Protocol SSL)—SSLで暗号化された通信路を利用し、セキュリティが強化されている。
  3. SFTP(SSH File Transfer Protocol)—SSHで暗号化された通信路を利用し、セキュリティが強化されている。

Windows向け

・FFFTP—FTPに対応・WinSCP—FTP・FTPS・SFTP・SCPに対応・Cyberduck—FTP・FTPSに対応

Mac向け

・Cyberduck—FTP・FTPSに対応※高いセキュリティを望むなら、FTPS・SFTPソフトを使いましょう。また、対応しているソフトも異なるので、レンタルサーバを決めてからダウンロードするのがいいでしょう。FTPソフトの設定方法は、レンタルサーバ内のマニュアルなどを参照してください。たいてい用意されています。

おすすめのFTPソフトは、高速で安全性の高いFileZillaです。レンタルサーバーとの接続方法については下の記事をチェックしてください。
FTPソフト FileZillaの設定方法

レンタルサーバーをご検討の方は下のページをご覧ください。
初心者対応で高性能なレンタルサーバー

まとめ

いかがでしたか。ホームページを自分で作る際に最低限必要となる知識を紹介しました。ホームページを作ることは創造力を活かすことができ、そして反映させることができる。とても面白い遊びです。アクセス解析を設置して、誰かが見てくれていると思うととても嬉しい気持ちになります。

ホームページ作成についてもっと知りたい方は下記のページも参考にしてください。このページはホームページを作るときに参考になる重要なページへのリンク集です。
はじめてのホームページ作成ガイド

カテゴリー ホームページ作成の基本知識