とにかく作ってみよう

トップ > ホームページ入門 > とにかく作ってみよう
目次
ホームページを作成するには

ホームページを作成するには次のような方法があります。

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

ホームページを作成するのに多くのものは要りません。ちょっとした勇気と下記の2つのツールです。

  1. ブラウザ
    Internet Explorer などのブラウザを用意してください。以降の説明では、Internet Explorer のことを IE と表記します。
  2. テキストエディタ
    Windows の場合はメモ帳([スタート]→[プログラム]→[アクセサリ]→[メモ帳])、Macintosh の場合は SimpleText があれば充分です。

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

まず、フォルダを作ろう

まず、今から作成する各種ファイルを格納するためのフォルダを作成します。例えば、C: ドライブの直下に HomePage という名前のフォルダ(C:\HomePage)を作成するには次のようにします。

  1. [スタート]→[プログラム]→[エクスプローラ] または [スタート]→[すべてのプログラム]→[アクセサリ]→[エクスプローラ] でエクスプローラを起動してください。
  2. 左側のツリーで、[マイコンピュータ] の中の [ローカルディスク (C:)] を選択してください。
  3. エクスプローラのメニューから [ファイル]→[新規作成]→[フォルダ] を実行してください。
  4. [新しいフォルダ] が作成されます。[ファイル]→[名前の変更] で、フォルダの名前を HomePage に変更してください。
拡張子を表示しておこう

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

  1. エクスプローラの [ツール]→[フォルダオプション] を実行してください。
  2. [表示] タブの中の [登録されている(ファイルの)拡張子は表示しない] をオフにして [OK] ボタンを押してください。
テキストエディタでHTMLを書いてみよう

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

  1. [スタート]→[プログラム]→[アクセサリ]→[メモ帳] を起動してください。
  2. メモ帳に次の文章を入力してください。
    <html>
    <head>
    <title>ホームページの練習</title>
    </head>
    <body>
    初めてのホームページです。
    </body>
    </html>
    

これを、C:\HomePage フォルダに test.htm という名前で保存します。

  1. メモ帳の [ファイル]→[名前を付けて保存] を実行してください。
  2. ファイル選択ダイアログが表示されるので、目的のフォルダ(C:\HomePage )に移動してください。
  3. [ファイル名] に test.htm と入力し、[保存] ボタンを押してください。

ファイル名が test.htm.txt になってしまう場合は、メモ帳の [名前を付けて保存] で、"test.htm" のように、ファイル名を "..." で囲んでみてください。

ファイル名に関する注意

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

○ test.html
○ test-page.html
× test&page.html
× テスト.html
× Test Page.html

Windows で作成しているときは test.html も TEST.html も同じファイルとみなされますが、サーバーにアップロードすると別のファイルとして扱われることがあります。大文字と小文字の使い分け に注意しましょう。

拡張子に関する注意

HTML 文書の拡張子は通常 .html なのですが、Windows 3.1 など古いシステムで拡張子に 3文字しか使用できなかったことから、未だに、Windows では .htm とするケースが多いようです。基本的には .htm でも .html でもどちらでも構いません。

○ test.htm
○ test.html
ブラウザで表示してみよう

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

  1. ブラウザ(IE6.0 とします)を起動してください。
  2. [ファイル]→[開く]→[参照] で、目的のフォルダに移動して、test.htm を選択して [開く] ボタンを押してください。
メモ帳
ファイル(F) 編集(E)...
<html>
<head>
<title>ホームページの練習</title>
</head>
<body>
初めてのホームページです。
</body>
</html>
      
Internet Explorer
ファイル(F) 編集(E) 表示(V) ...
← → × ○ □ ...
初めてのホームページです。

「初めてのホームページです。」という文章が表示されていると思います。これで、とりあえずは、初めてのホームページの完成です。

修正してみよう

「初めてのホームページです。」という文章を修正してみましょう。test.htm のファイルをダブルクリックするとブラウザが起動しますが、修正はブラウザではなく、[メモ帳] などのテキストエディタで行います。test.htm のファイルをメモ帳で開くには次のような方法があります。

  1. メモ帳を起動しておいて、そこに test.htm ファイルをドラッグ&ドロップする。
  2. メモ帳を起動し、[ファイル]→[開く] で [ファイルの種類] を [すべてのファイル] または [すべて(*.*)]に変更して、test.htm ファイルを選択して開く。
  3. [スタート]→[プログラム]→[アクセサリ]→[エクスプローラ]で test.htm ファイルをマウスで右クリックし、ポップアップメニューから [送る]→[メモ帳] で開いて編集する。

メモ帳で test.htm を開くことができたら、次のようにして内容を修正してください。

  1. メモ帳で、文章を次のように修正する。
    <html>
    <head>
    <title>ホームページの練習</title>
    </head>
    <body>
    私の初めてのホームページです。
    </body>
    </html>
    
  2. 修正したテキストを、[ファイル]→[上書き保存] で保存する。
  3. ブラウザで再度 test.htm を表示してみましょう。すでに表示したままだったら、ブラウザのメニューから [表示]→[最新の情報に更新] を実行してください。

メモ帳で修正した内容が、ブラウザに反映されていれば OK です。

改行してみよう

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

私の
初めてのホームページです。

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

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

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

太字にしてみよう

今度は「ホームページ」を太字にしてみましょう。

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

ブラウザで再表示すると、「ホームページ」が太字で表示されます。<b> は bold の略で、<b>〜</b> までを太字にしろという命令です。同様に、<i>〜</i> で囲めば斜体文字(Italic)になります。

色を変えてみよう

今度は「ホームページ」を赤色にしてみましょう。

私の初めての<font color=red>ホームページ</font>です。

ブラウザで再表示すると、「ホームページ」が赤字で表示されます。

<< PAGE TOP >>

BACK UP 初心者でホームページを考えてられてる方へ

独自ネットショップや楽天ショップ・YAHOOショップ運営される初心者の方も、無料で、親切にアドバイスいたします。
SEO・月次更新・リニュアルetc

ホームページ制作の事なら

何でもお問合せください。
お問合せフォームはこちらから

ホームページ作成は京都のリュウム株式会社

京都市中京区橋弁慶町222番地
ヒライビル3階

TEL 075-257-4588
営業時間 AM10:00-PM7:00

ホームページ制作のことなら、格安で成功するSEO対策に強い京都のホームページ作成 リュウムへ

無料お見積はこちらから

TEL : 075-257-4588
京都市中京区橋弁慶町222番地 ヒライビル3階


無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00〜PM7:00
| ホーム |
| 無料ホームページ作成講座 | ホームページ作成辞典|田中茂(代表取締役社長)経歴|



CSS
Ryuumu