拡張子を表示しよう | Webクラブ

ホームページ作りのイメージ図

拡張子って何?

自分

HTMLファイルを作るときに必要な「拡張子」について説明するね!
とっても簡単だから安心してね (^o^)

拡張子(かくちょうし)とは、ファイル名の最後に付いている「.」(ドット)から後ろの部分のことです。

例えば...

test.html

photo.jpg

music.mp3

拡張子の役割

拡張子は「このファイルは何のファイルか?」をコンピュータに教えてあげる目印です。

.html → ホームページのファイル

.jpg → 写真のファイル

.mp3 → 音楽のファイル

.txt → 文章のファイル

拡張子が表示されないのはなぜ?

パソコンは初期設定で「拡張子を隠す」設定になっていることが多いです。これは初心者が間違って拡張子を消してしまわないための安全機能です。

でも、ホームページを作るときは拡張子が見えないと困るので、表示する設定に変更しましょう!

Windowsで拡張子を表示する方法

拡張子の表示手順図

ステップ1:エクスプローラーを開く

画面の下にある「フォルダのマーク」をクリックします。
または、キーボードの「Windowsキー + E」を同時に押します。

ステップ2:「表示」をクリック

エクスプローラーの上の方にある「表示」というメニューをクリックします。

ステップ3:「ファイル名拡張子」にチェック

「ファイル名拡張子」という項目にチェックを入れます。
これで拡張子が表示されるようになります!

Windows 10の場合

エクスプローラーを開く → 上のメニューの「表示」タブ → 「ファイル名拡張子」にチェック

Windows 11の場合

エクスプローラーを開く → 上のメニューの「表示」 → 「表示」→「ファイル名拡張子」にチェック

Macで拡張子を表示する方法

ステップ1:Finderを開く

デスクトップの何もないところをクリックして、Finderを選択します。

ステップ2:「環境設定」を開く

画面の一番上のメニューバーから「Finder」→「環境設定」をクリックします。
(または、キーボードの「command + ,」を同時に押します)

ステップ3:「詳細」タブをクリック

環境設定の画面が開いたら、「詳細」というタブをクリックします。

ステップ4:「すべてのファイル名拡張子を表示」にチェック

「すべてのファイル名拡張子を表示」という項目にチェックを入れます。
これで拡張子が表示されるようになります!

確認してみよう

設定が終わったら、メモ帳やテキストエディットで「test.html」というファイルを作って保存してみましょう。

ファイル名が「test.html」と表示されていればOKです!
もし「test」だけしか見えない場合は、もう一度設定を確認してみてください。

ポイント

拡張子が表示されるようになったら、HTMLファイルを作るときに必ず「.html」を付けることを忘れないでね!拡張子がないと、ブラウザでホームページとして開けません。

自分

これで拡張子が見えるようになったね!
ただし、間違った拡張子を付けるとファイルが壊れるから注意してね。