拡張子
パソコンのファイルやフォルダを操作する上で、拡張子やファイルパスについて知る必要があります。ここでは、Webで多く利用されるHTML/CSS/JSファイルについて解説します。
拡張子とは
拡張子はファイル名の最後に「.xxx」いう文字列で指定します。拡張子をつけておくとPCが自動的にファイルの種類を認識してくれます。
拡張子の例
HTML、CSS、JavaScrptの拡張子は以下のようになります。拡張子は小文字で指定するようにしてください。
| 種別 | 拡張子 | ファイル名の例 |
|---|---|---|
| HTML | .html | index.html |
| CSS | .css | style.css |
| JavaScript | .js | default.js |
拡張子を表示する方法
WindowsやMacではOSのバージョンによりますが、拡張子がデフォルト非表示となっています。非表示の場合は、OSの設定で拡張子を表示しておきましょう。
エクスプローラで設定（Windows）
Windowsの拡張子表示は、エクスプローラの表示タブを開き「ファイル名拡張子」にチェックをいれます。
Finder環境設定（Mac）
Macの拡張子表示は「Finder メニュー > 環境設定」で設定できます。
「すべてのファイル名拡張子を表示」にチェックを入れます。
ファイルパス
「ファイルパス」はファイルやフォルダの場所を文字で表記したもので、省略してパスともいいます。パスにはいくつかのルールがあります。
フォルダのパス表記「 / 」（Mac、Linux）
MacやLinuxのフォルダは 「 / 」（スラッシュ）で表記します。例えば「lesson1」フォルダにある「index.html」ファイルのファイルパス表記です。
lesson1/index.html
フォルダのパス表記「 ¥ 」（Windows）
Windows のフォルダは 「 ¥ 」で表記します。ただし、一般的なフォルダ表記は /（スラッシュ） を利用するので、Windows は特殊と考えた方がよいでしょう。
lesson1¥index.html
ルートディレクトリ
システム最上位ディレクトリのことをルートディレクトリ（ルートフォルダ） といいます。省略するとルートといいます。
Mac、Linux
MacやLinuxのルートディレクトリは「 / 」です。
/
Windows
Windowsは特殊で、例えばCドライブをルートディレクトリとすると「C:¥」で表記します。
C:¥
絶対パスと相対パス
絶対パス
現在位置とは関係なく、ルートから目的のファイルパスを絶対パスといいます。
ユーザホーム
PCセットアップ時に自分のユーザアカウントを作成すると同時に、フォルダも作成されますが、これをユーザホームといいます。以下は 「logicoya」というユーザホームの絶対パスです。
Mac
MacではUsers/ の中に作成されます。
/Users/logicoya/
Linux
Linuxではhome/ の中に作成されます。
/home/logicoya/
Windows
WindowsではC:¥Users の中に作成されます。
C:¥Users¥logicoya¥
相対パス
相対パスは、現在のフォルダからのパス表記をします。絶対パスはルートからのパスなので、ファイルパスが長くなることがあるので、相対パスを利用すると便利です。
ファイル構成
例えば以下のファイル構成があったとします。 ※「lesson1/」はどこにあっても構いません。
これをツリー構造で表記すると以下のようになります。
lesson1/
├── index.html
└── css/
└── style.css
相対パスの表記
これらフォルダやファイルを相対パスで表記してみます。
lesson1/
lesson1/index.html
lesson1/css/style.css
現在のフォルダを「 ./ 」で表示
現在のフォルダを「 ./ 」で表記することができます。現在のフォルダが「lesson1」のときの相対パスを表記してみます。
現在フォルダ「lesson1」
./
./index.html
./css/
./css/style.css
「 ./ 」は「lesson1」フォルダということに注意してください。
「 ../ 」で１つ上の階層
「 ../ 」は1つ上の階層を意味します。現在のフォルダが「css」のときの「index.html」の相対パスを表記してみます。
現在フォルダ「css」
../index.html
「 ../ 」は「lesson1」フォルダということに注意してください。 このように現在のフォルダによって相対パスは表記が変わります。
演習
問題1
HTMLファイルの拡張子は何でしょうか？
問題2
以下のファイル構成があります。
var/
└── www/
├── index.html
├── css/
└── style.css
└── js/
└── default.js
「index.html」「style.css」「default.js」を絶対パスで表記してみましょう。
問題3
問題２で、現在のパスが「projects/」とします。「index.html」「style.css」「default.js」を相対パスで表記してみましょう。