どうも！ニシドラ(@nishidorablog)です。
この記事ではHTMLファイルの作成方法について解説します。
記事の内容は、HTMLファイルの作成方法とHTMLファイルに名前を付けるときのルールを解説していきます。
HTMLファイルの作成方法
作成ソフト
HTMLやCSSファイルは、Windowsの場合は「メモ帳」であったり、Macの場合は「テキストエディット」などのアプリケーションで作成することが可能です。
しかし、多くのwebデザイナーは「テキストエディター」というものを使っています。
テキストエディターを使用してファイルを作成するメリットとして「補完機能」が備わっているからです。
どのような機能があるかというと、
- 予測入力
- ショートカット
- コードの色分け
以上の3つが挙げられます。
この補完機能のおかげで作業スピードのアップやコードの打ち間違えなどを防ぐことができます。
僕が普段使っているテキストエディターはGit Hubが作成した「Atom」というものです。
下の画像が実際にAtomの画面です。
シンプルなデザインで使いやすく、WindowsとMacどちらにも対応していていて無料です。
「パッケージ」という拡張機能もあり、自分の使いやすいカスタマイズにすることも可能です。
また、HTMLだけでなくCSS、JavaScript、PHPなど様々な言語に対応しています。
HTMLのファイルに名前を付けるときのルール
HTMLのファイル名にはいくつかのルールが存在します。
ルール通りに名前を付けないと、別のファイルと関連付けをする際にうまく表示されないことがあるので注意が必要です。
拡張子を付ける
HTMLファイルには拡張子をつけましょう。
拡張子とは、ファイルがどの種類や形式なのかを表すものです。
HTMLファイルには「.html」をファイル名の最後に書きましょう。
日本語は使わない
日本語(ひらがな、カタカナ、漢字)は使わないようにしましょう。
HTMLのファイル名には半角英数字しか付けることができません。
理由としては、ファイルを保存するサーバーが半角英数字以外には対応していないからです。
ファイルで使用する記号
HTMLファイルの名前に使用できない記号がいくつかあります。
| /(スラッシュ) | ＼(バックスラッシュ) | <(小なり) | >(大なり) | ;(セミコロン) |
| “(ダブルクォーテーション) | |(パイプライン) | *(アスタリスク) | :(コロン) |
上表にある、9つの記号は使えません。
加えて、ファイル名の中にスペース(空間)を入れることもできません。
ファイル名を区切る場合は「-(ハイフン)」か「_(アンダーバー)」を使いましょう。
小文字を使用する
HTMLのファイル名には小文字を使いましょう。
サイトを開くユーザーの環境によっては大文字と小文字を区別して、別のファイル判断されてしまう場合があります。
なので、ファイル名は小文字で統一しましょう。
ホームページには「index.html」と付ける
サイトを開いたときに一番初めに表示されるページには「index.html」という名前を付けるのが一般的です。
index.htmlというファイル名だった場合、URLの入力を省略することができます。
まとめ
今回の内容を簡単にまとめると以下の通りになります。
- メディアエディターを使用。おすすめは「Atom」
- 拡張子を付ける
- 半角英数字で付ける
- ファイル名に使用できない記号がある
- ファイル名を区切る場合は「-」と「_」を使用
- 小文字で統一する
- ホームページには「index.html」と付ける
今回解説したルールを守ってHTMLファイルを作成しましょう
次回は、「HTMLの基本的な文法」について解説します。
コメント