とにかく作ってみよう
目次
Webページを作成するには
Webサイト/Webページを作成するには次のような方法があります。
- Webサイト作成業者に依頼する
- 有料でWebサイト作成を代行する多くの業者があります。会社のWebサイトを作成する場合など、下手に自分や社員で作成するよりもプロに依頼したほうが安上がりな場合もあります。ただし、作成後の保守や改版についての取り決めを明確にしておくことをお勧めします。
- Webサイト作成サイトを利用する
- Wix.com や Jimdo など無料でWebページを作成できるサービスもあります。ただし、無料の枠内では広告が入るものも多いようです。
- Webページ作成ソフトで作成する
- Webページを作成支援するソフトが各社から発売されています。フリーのものやシェアウェアなどもあります。
- テキストエディタで作成する
- Webページは HTML という言語を用いて記述しますが、それほど難しいものではありません。
ここでは、最後のHTMLを理解してテキストエディタで作成するための手順を紹介します。
ホームページを作成するための準備
Webページを作成するには、最低限下記のものが必要です。
- ブラウザ
- ブラウザは、あなたがこのページを見ている時に使用しているソフトウェアです。Internet Explorer(IE)、Microsoft Edge、Google Chrome、Firefox、Safari などのブラウザがよく使用されています。
- テキストエディタ
- Windows の場合は標準添付の メモ帳、TeraPad、サクラエディタ、秀丸エディタ、Mery など、Mac の場合は mi、CotEditor、Windows/Mac 両方で利用できるものとしては Visual Studio Code、Sublime Text などがあります。Mac の標準エディタである テキストエディット を使用する場合は HTML ファイルを保存する時にリッチテキストに変換してしまうので [フォーマット]-[標準テキストにする] を設定する必要があります。
これ以降の説明では、「Windows 11」で「Google Chrome」と「メモ帳」を用いた例を示します。他のOSやブラウザの場合、メニューの名前が若干異なる（例えば [上書き保存] が単なる [保存] であるなど）場合がありますが、適切に読み替えてください。
まず、フォルダを作ろう
まず、今から作成する各種ファイルを格納するためのフォルダを作成します。例えば、[ドキュメント] の下に WebPages という名前のフォルダを作成するには次のようにします。
- [スタート] ボタンをクリックして検索から [エクスプローラー] を検索して起動してください。
- 左のツリーから [ドキュメント] を右クリックし、[新規作成]-[フォルダー] を実行してください。右側に [新しいフォルダー] が作成されます。
- [新しいフォルダー] を右クリックし [名前の変更] でフォルダ名を WebPages に変更してください。
拡張子を表示しておこう
Webページの作成において、拡張子（ファイル名末尾の .txt や .html などの文字）は非常に重要です。下記の手順で拡張子を表示するモードに変更しておくことを強く推奨します。
- エクスプローラの [表示]-[表示]-[ファイル名拡張子] のチェックを ON にしてください。
テキストエディタでHTMLを書いてみよう
メモ帳などのテキストエディタで HTML 文書を作成します。テキストエディタであれば [メモ帳] 以外でも構いません。
- エクスプローラーで [WebPages] フォルダを開いてください。
- 右ペインで右クリックから [新規作成]→[テキストドキュメント] を実行してください。[新規 テキスト ドキュメント.txt] が作成されます。
- [新規 テキスト ドキュメント.txt] をマウスで右クリックして [名前の変更] で [新しいテキスト ドキュメント.txt] を [test.html] に変更してください。「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか？」と聞かれますが、[はい] と答えてください。
- [test.html] ファイルをマウスで右クリックし、[送る]→[メモ帳] を実行してください。テキストエディタであるメモ帳が起動します。
- メモ帳で、下記の文章を入力してください。
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTMLの練習</title>
</head>
<body>
初めてのWebページです。
</body>
</html>
- 入力が完了したら、メモ帳のメニューから [ファイル]→[保存] で入力した内容をファイルに保存してください。
ファイル名に関する注意
ホームページで作成する HTML文書や画像ファイルのファイル名は、以下の点に注意してください。
- 基本的には半角英数字と一部の記号文字のみを用いてください。
- 使用可能な記号はドット(.)、ハイフン(-)、アンダーバー(_)程度に留めておくのが無難です。
- スペース文字を含んだファイル名は使用しないでください。
- アルファベットの大文字・小文字は使い分けてください。Windows では test.html も TEST.html も同じファイルとみなされますが、サーバーにアップロードすると別のファイルとして扱われることがあります。
- 拡張子(ファイル名の最後のドット(.)から後ろの部分)は .html としてください。昔は .htm も用いられていましたが、今では .html が主流です。
○ test.html
○ test-page.html
× test&page.html ← 記号(&)は用いない
× テスト.html ← 基本的には日本語は用いない
× Test Page.html ← スペースを含んだファイル名にはしない
ブラウザで表示してみよう
今作成した test.html をブラウザで表示してみましょう。
- エクスプローラーから test.html ファイルをダブルクリックしてください。ブラウザが起動し、「初めてのWebページです。」と表示されれば成功です。
■テキストエディタ
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTMLの練習</title>
</head>
<body>
初めてのWebページです。
</body>
</html>
修正してみよう
「初めてのWebページです。」という文章を修正してみましょう。
- メモ帳で、「初めてのWebページです。」を、「私の初めてのWebページです。」に変更してください。
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTMLの練習</title>
</head>
<body>
私の初めてのWebページです。
</body>
</html>
- メモ帳で、[ファイル]→[保存] で保存してください。
- ブラウザで、[再読み込み] のアイコンをクリックするか、Ctrl キーを押しながら R キーを押すと再読み込みが行われます。メモ帳で修正した内容が、ブラウザに反映されれば成功です。
改行してみよう
「私の」と「初めてのWebページです」の間に改行を入れてみましょう。
test.html
私の
初めてのWebページです。
ところが、これをブラウザで再表示（[最新の情報に更新]）しても、うまく改行できていません。まったく改行されないか、ブラウザによっては、「私の 初めてのWebページです。」のように多少の隙間があくだけです。改行を行うには次のように修正して保存、再表示してください。
test.html
私の<br>初めてのWebページです。
今度はちゃんと改行されるはずです。<br> は break の略で、改行しろという命令のようなものです。
太字にしてみよう
今度は「Webページ」を太字にしてみましょう。下記の様に修正することで、文字を太字(bold)にすることができます(※)。
test.html
私の初めての<b>Webページ</b>です。
下記の様に修正すると、文字を斜体(itaric)にすることができます(※)。
test.html
私の初めての<i>Webページ</i>です。
※ 以前は、<b> は太字(bold)、<i> は斜体(itaric)を意味していましたが、現在では太字、斜体、色などの見栄えはすべて スタイルシート(CSS) で記述することになり、<b> は「注意を引きつける箇所」、<i> は「通常の文章とは性質の異なる箇所」と意味が変更されました。ブラウザによっては、<b>～</b> や <i>～</i> を、太字や斜体とは異なった見栄えで表示することがあります。
Copyright (C) 1997-2024 杜甫々
初版：1997年3月30日、最終更新：2024年11月17日
http://www.tohoho-web.com/wwwbeg1.htm