HTMLタグを手打ちしての作り方

パソコン上でホームページを作成する際は何らかのソフトを使用するのが一般的です。当サイト運営者はAdobe社の「Dreamweaver」を使用していますが、他にもホームページ・ビルダーなどのホームページ作成ソフトが無数にあります。

けれども、これらのソフトを持っていない場合でも、htmlタグの知識があれば、Windows付属のメモ帳などでタグを手打ちしながら作ることができます。

Windows付属のメモ帳で作る方法

メモ帳を使用する場合、以下の手順で作成していくとよいでしょう。

①フォルダの作成

まず、「右クリック - 新規作成 - フォルダー」でパソコン上に「フォルダ」を作成します。

フォルダ作成

後々サーバーにファイルをアップロードする際、このフォルダの中身のみをアップロードすることになるため、このフォルダ名は任意で何でもかまいません。概ね、サイト名やドメイン名などの分かりやすい名前を付けておくことをおすすめします。

この作成したフォルダ内にHTMLファイルCSSファイルを作成していくことになります。

②HTMLファイルやCSSファイルを作成

次に、メモ帳を開いてHTMLタグを打ち込んでいき、トップページのindex.htmlファイルを作成します。

タグを手打ち

このHTMLファイルをまったくのゼロから作成するのは難しいと思いますので、テンプレートのサンプルなどを参考にして作成していくとよいでしょう。

完成したら「ファイル - 名前を付けて保存」を選択します。

UTF-8で保存

ファイル名を「index.html」と入力し、ファイルの種類で「すべてのファイル」を選択、文字コードで「UTF-8」を指定して①で作成したフォルダ内に「保存」します。このUTF8にはBOM付きもありますが、ウェブ作成では「BOMなし」を選択するのが一般的です。

同様に、拡張子「小文字英数.css」でスタイルシートも作成します。

サイト作成完了

このスタイルシートも「UTF-8」で保存しておきましょう。

画像も使用する際は別途に「image」や「img」などのフォルダも作成し、画像関係はまとめてそちらのフォルダに入れておきます。

取りあえずはこれで完成ですが、パソコン上で作成しただけではネット上で表示されません。実際にウェブ上でサイトを表示させるには、ネット上の無料ホームページスペースレンタルサーバーにこれらのファイルを転送する必要があります。

ホームページファイルの転送とサイト表示の確認

パソコン上でサイトが完成したら、ホームページスペースやレンタルサーバーのpublic_htmlフォルダに、これらのファイルをFTP接続などでアップロードします。アップロードする際は①のフォルダごとではなく、「中身のファイルとフォルダ」のみをアップロードします。

あるいは、ホームページスペース側からパソコン内のファイルを指定してアップロードするのでも同じことです。もしくは、パソコン上で作成するのではなく、レンタルサーバー側のファイルマネージャーでこれらのファイルを直接作成してしまうのもよいかと思います。

いずれにしましても、ウェブ上のホームページスペースにファイルがありさえすればよいです。

  • ウェブ上のファイル → 実際に表示されるファイル
  • パソコン上のファイル → 実際のサイトの表示には無関係

あとはホームページのURLにアクセスし、サイトが表示されるのを確認しましょう。

この作成したファイルを修正する際は、メモ帳の「ファイル - 開く」、「ファイルの種類 - すべてのファイル」を選択し、文字コードを「自動検出」や「UTF-8」に指定して修正することができます。

この場合でも、パソコン上のファイルを修正しただけでは実際の表示には反映されないため、必ず上書きアップロードしてウェブ上のファイルを更新する必要があります。

ホームページ作成ソフトを利用する場合、これらのファイルの保存や管理、アップロード、表示の確認などがしやすくはなりますが、上記の手順でもほぼ同じように作成することができます。

無料のテキストエディタを使っての作り方

上記のように、Windows付属のメモ帳でもホームページは作成することができますが、メモ帳は基本的に「.txt」のテキストファイルを作成するためのツールのため、HTMLファイルやCSSファイルの作成にはあまり向いていません。

古いホームページなどでよく使われている「euc-jp」の文字コードが使えませんし、ちょっとしたミスで文字化けしてしまうことが多いです。また「右端で折り返す」にチェックを入れながら作成していると変なところで改行が入ってしまうこともあります。

そのような意味で、Windows付属のメモ帳で作るのはあまりお勧めはできないです。

そのため、メモ帳ではなく、無料のテキストエディタを使うと便利です。

このテキストエディタにもいろいろありますが、「TeraPad」や「Brackets」、「Crescent Eve」などの無料のテキストエディタが使いやすいと思います。

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

何らかのテキストエディタを使う場合でも作成する手順については同じです。

テキストエディタでは保存できる文字コードの種類が多いですが、たいていは「UTF-8」で保存しておけば間違いありません。このUTF-8で保存する場合、「UTF-8」や「UTF-8N」などの種類がありますが、「UTF-8N」を選ぶとよいでしょう。

UTF-8N

ちなみに、この「UTF-8」と「UTF-8N」の違いについてですが、「N」が付く方がBOMなしです。

  • UTF-8 → BOMあり
  • UTF-8N → BOMなし

BOM(ボム)は「byte order mark」のことで、Unicodeで記述されているかを判別するための先頭につける数バイトのデータのことですが、ウェブ作成の際はBOMなしの「UTF-8N」を選択されることをおすすめします。