とにかく作ってみよう

トップ > Webページ作成入門 > とにかく作ってみよう

目次

Webページを作成するには

Webサイト/Webページを作成するには次のような方法があります。

  1. Webサイト作成業者に依頼する
    有料でWebサイト作成を代行する多くの業者があります。会社のWebサイトを作成する場合など、下手に自分や社員で作成するよりもプロに依頼したほうが安上がりな場合もあります。ただし、作成後の保守や改版についての取り決めを明確にしておくことをお勧めします。
  2. Webページ作成ソフトで作成する
    Webページを作成支援するソフトが各社から発売されています。フリーのものやシェアウェアなどもあります。「とほほの厳選ツール集(HTMLエディタ編)」を参照してください。
  3. テキストエディタで作成する
    Webページは HTML という言語を用いて記述しますが、それほど難しいものではありません。

ここでは、最後のHTMLを理解してテキストエディタで作成するための手順を紹介します。

ホームページを作成するための準備

Webページを作成するには、最低限下記のものが必要です。

  1. ブラウザ
    ブラウザは、あなたがこのページを見ている時に使用しているソフトウェアです。Internet Explorer(IE)、Microsoft Edge、Google Chrome、Firefox、Safari などのブラウザがよく使用されています。
  2. テキストエディタ
    Windows の場合はメモ帳、TeraPad、サクラエディタ、秀丸エディタ、Mac の場合は テキストエディット、mi などのテキストエディタを使用します。

これ以降の説明では、「Windows 10」で「Google Chrome」と「メモ帳」を用いた例を示します。他のOSやブラウザの場合、メニューの名前が若干異なる(例えば [上書き保存] が単なる [保存] であるなど)場合がありますが、適切に読み替えてください。

まず、フォルダを作ろう

まず、今から作成する各種ファイルを格納するためのフォルダを作成します。例えば、[ドキュメント] の下に WebPages という名前のフォルダを作成するには次のようにします。

  1. [スタート]→[すべてのアプリ]→[Windows システムツール]→[エクスプローラ] でエクスプローラを起動してください。インターネットエクスプローラとエクスプローラは別物です。インターネットエクスプローラはWebページを表示するツールです。エクスプローラはディスク上のファイルやフォルダを表示するツールです。
  2. 左側のツリーで [デスクトップ]→[PC]→[ドキュメント] を選択した状態で、右側のペインでマウスを右クリックし、[新規作成]→[フォルダ] を実行してください。[新しいフォルダー] が作成されます。
  3. [新しいフォルダー] をマウスで右クリックして [名前の変更] を実行し、フォルダ名を [新しいフォルダー] から [WebPages] に変更してください。

拡張子を表示しておこう

Webページの作成において、拡張子(ファイル名末尾の .txt や .html などの文字)は非常に重要です。下記の手順で拡張子を表示するモードに変更しておくことを強く推奨します。

  1. エクスプローラの [表示]→[ファイル名拡張子] のチェックボックスを ON にしてください。

テキストエディタでHTMLを書いてみよう

メモ帳などのテキストエディタで HTML 文書を作成します。テキストエディタであれば [メモ帳] 以外でも構いません。Word などのワープロを用いる場合は、保存時にテキストファイルとして保存する必要があります。

  1. エクスプローラーで [WebPages] を表示し、右ペインで右クリックから [新規作成]→[テキストドキュメント] を実行してください。[新しいテキスト ドキュメント.txt] が作成されます。
  2. [新しいテキスト ドキュメント.txt] をマウスで右クリックして [名前の変更] で [新しいテキスト ドキュメント.txt] を [test.html] に変更してください。「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか?」と聞かれますが、[はい] と答えてください。
  3. [test.html] ファイルをマウスで右クリックし、[送る]→[メモ帳] を実行してください。テキストエディタであるメモ帳が起動します。
  4. メモ帳で、下記の文章を入力してください。
    <!DOCTYPE html>
    <html>
    <head>
    <title>HTMLの練習</title>
    </head>
    <body>
    初めてのWebページです。
    </body>
    </html>
    
  5. 入力が完了したら、メモ帳のメニューから [ファイル]→[上書き保存] で入力した内容をファイルに保存してください。

ファイル名に関する注意

ホームページで作成する HTML文書や画像ファイルのファイル名は、以下の点に注意してください。

○ test.html
○ test-page.html
× test&page.html  ← 記号(&)は用いない
× テスト.html ← 基本的には日本語は用いない
× Test Page.html ← スペースを含んだファイル名にはしない

ブラウザで表示してみよう

今作成した test.html をブラウザで表示してみましょう。

  1. エクスプローラーから test.html ファイルをダブルクリックしてください。ブラウザが起動し、「初めてのWebページです。」と表示されれば成功です。
■メモ帳
ファイル(F) 編集(E)...
<!DOCTYPE html>
<html>
<head>
<title>HTMLの練習</title>
</head>
<body>
初めてのWebページです。
</body>
</html>
■ブラウザ
← → × ○ □ ...
初めてのWebページです。

修正してみよう

「初めてのWebページです。」という文章を修正してみましょう。

  1. メモ帳で、「初めてのWebページです。」を、「私の初めてのWebページです。」に変更してください。
    <!DOCTYPE html>
    <html>
    <head>
    <title>HTMLの練習</title>
    </head>
    <body>
    私の初めてのWebページです。
    </body>
    </html>
    
  2. メモ帳で、[ファイル]→[上書き保存] で保存してください。
  3. ブラウザで、[再読み込み] のアイコンをクリックするか、Ctrl キーを押しながら R キーを押すと再読み込みが行われます。メモ帳で修正した内容が、ブラウザに反映されれば成功です。

改行してみよう

「私の」と「初めてのWebページです」の間に改行を入れてみましょう。

私の
初めてのWebページです。

ところが、これをブラウザで再表示([最新の情報に更新])しても、うまく改行できていません。まったく改行されないか、ブラウザによっては、「私の 初めてのWebページです。」のように多少の隙間があくだけです。改行を行うには次のように修正して保存、再表示してください。

私の<br>初めてのWebページです。

今度はちゃんと改行されるはずです。<br> は break の略で、改行しろという命令のようなものです。

太字にしてみよう

今度は「Webページ」を太字にしてみましょう。下記の様に修正することで、文字を太字(bold)にすることができます(※)。

私の初めての<b>Webページ</b>です。

下記の様に修正すると、文字を斜体(itaric)にすることができます(※)。

私の初めての<i>Webページ</i>です。

※ 以前は、<b> は太字(bold)、<i> は斜体(itaric)を意味していましたが、現在では太字、斜体、色などの見栄えはすべて スタイルシート(CSS) で記述することになり、<b> は「注意を引きつける箇所」、<i> は「通常の文章とは性質の異なる箇所」と意味が変更されました。ブラウザによっては、<b>~</b> や <i>~</i> を、太字や斜体とは異なった見栄えで表示することがあります。


Copyright (C) 1997-2016 杜甫々
初版:1997年3月30日、最終更新:2016年5月1日
http://www.tohoho-web.com/wwwbeg1.htm