HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎4. ファイル名、フォルダ名のルール

      2017/07/11

ファイル名につける拡張子

拡張子とはファイルの種類を識別するためにつける文字のことです。拡張子はファイル名のドット(.)から続く文字列のことです。拡張子を省略してはいけません。省略した場合、OSからファイルの種類が識別できなくなり、ダブルクリックでファイルを開くことができなくなります。またファイルの種類と違う拡張子に変更するとデータが破損する場合があるので注意してください。

  • HTMLファイルの拡張子は「.html」
  • CSSファイルの拡張子は「.css」
  • 画像ファイルの拡張子は「.jpg」「.png」「.gif」

windowsは初期状態だと拡張子が非表示になっています。

ファイル名、フォルダ名に使用する文字

使用できる文字の種類

  • 半角英数の小文字
  • 記号の -(ハイフン)
  • 記号 _(アンダースコア)

良い例として下記があります。

  • index.html
  • page-1.html
  • page_2.html

注意点として先頭に「数字」を使用しないことです。HTMLでは問題ありませんがプログラム(Javascript, PHP)では数字を先頭にしたファイル名は使ってはいけない決まりになっています。先頭に数字を使わない習慣にしましょう。

使ってはいけない文字

  • 全角文字(日本語、英語)
  • 半角・全角スペース
  • ハイフンとアンダースコア以外の記号
  • 機種依存文字

悪い例として下記があります。

  • トップ.html
  • PAGE.html
  • page 1.html
  • 2017/4/1.html
  • page*10.html

使用してはいけない文字を使用したファイル名、フォルダ名はWEBサーバで正しく認識されずブラウザで表示されない場合もあります。自分のパソコン上では表示されるのでWEBサーバにアップするまで気づかないことがあります。注意してください。

機種依存文字

機種依存文字は自分のパソコンで入力した文字が他のOSで表示した時に文字化けが発生する文字のことです。WEBサーバはLinuxという種類のOSが一般的でwindowsではありません。機種依存文字を使うと文字化けをおこしファイル名が読み取れなくなります。

  • Windows → Mac
  • Mac → Windows
  • Windows → Linux
  • Mac → Linux

下記は機種依存文字の一部を紹介しています。普段から下記の記号や文字を利用する人は注意して下さい。
機種依存文字の一例

「index.html」というファイル名について

今まで「index.html」というファイルを編集してきましたが「index.html」とは何でしょう。index.htmlというファイルは、WEBサーバではトップページとして自動的に表示するようになっています。
そのためアドレスに
https://www.yahoo.co.jp/ndex.html
と書かなくても
https://www.yahoo.co.jp/
でアクセスできます。
トップページは、必ず「index.html」にしましょう。

まとめ

  • ファイル名やフォルダ名に使える文字は、半角英数の小文字、ハイフン、アンダースコアのみ
  • 使ってはいけない文字でファイル名やフォルダ名に使用するとブラウザに表示されない場合がある。
  • トップページのファイル名は必ず「index.html」

 - HTML・CSS