Language
日本語
English

Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

  1. Home
  2. HTML5Beginner - Setting Up Your Environment: File Extensions

Setting Up Your Environment: File Extensions - Japanese Only

みなさまどうもこんにちは。続きましてウェブサイトを作る前の環境構築とかもろもろやっていきましょう。まずは『拡張子』(かくちょうし)です。

もうすでに『拡張子』を表示しており、かつ『拡張子』の概要をご存じの方はご遠慮なく次の記事へと進んでしまってください。

ではやっていきましょう。

まずは「拡張子ってなんなんだぜぇ」ってお話なんですが、拡張子とはファイル名の中のピリオドで区切られた文末の部分の事を指します。『hoge.txt』というファイル名ならば『.txt』が拡張子になりますね。拡張子で有名どころだと『.jpg』や『.txt』といかがあります。どこかで一度は見たことあるのではないでしょうか。拡張子が『.jpg』ならば画像ファイルで『.txt』ならばテキストファイルといった具合です。

一般的なパソコンはこの拡張子を使って「これは画像ファイルだ!」とか「これはテキスト文章だ!」とかを判別し、そのファイルを処理するソフトウェアを自動で立ち上げるという構造になっています。これは元祖オペレーションシステムであるunixの名残で、今現在もこの形式が採用されています。

ちなみに少々ややこしいのがWindowsOSとMacOSで初期設定のままだとファイル名の拡張子は表示されないようになっています。HTMLに限らずプログラミングやデザイン、動画編集等の作業において拡張子は必ず使う項目なので、今現在「拡張子が表示されてないっぽいぞ」という方は拡張子を表示させる設定に変更しましょう。

表示させる方法ですがWindowsOSとMacOSで大分違いがあるのでみなさんお使いのパソコンに合わせて設定を進めて下さい。では以下からどうぞ。

WindowsOSの拡張子表示手順

WindowsOSの方、いらっしゃいませ。
というわけでみなさんのデスクトップのカドに注目してください。こんなマークありますでしょうか。

見つけたらこのマークをクリックして

赤枠のコントロールパネルというところをクリックします。そしたら

右上赤枠の検索フォームから『フォルダ』と検索してください。そうすると

出てくる項目のなかで、『すべてのファイルとフォルダーを表示』というのが見つかると思うのでそれをクリック。

この赤枠の詳細設定の中をスライドして『登録されている拡張子は表示しない』のチェックを外して下さい。これで拡張子が表示されるようになります。

それと同時に今後の事を考えて『隠しファイル、隠しフォルダー、および隠しドライブを表示する』というラジオボタンにチェックを入れたほうがいいかもしれません。プログラミング等をしているとソフトウェアの設定変更等で隠しファイルの変更をする場合が結構あります。

WindowsOSの方は以上で設定は終了です。

MacOSの拡張子表示手順

MacOSの方、いらっしゃいませ。
まずは『Finder』をクリックして下さい。こいつです。

『Finder』のアイコンは下あたりからにょっきりでてくる『Dock』あたりにいるかと思います。そしたら画面左上のメニューバーから『Finder > 環境設定』と進んで、その中の『詳細』をクリックして下さい。すると以下の画面が出てくるかと思います。

そしたら上記の画像のように『すべてのファイル名拡張子を表示』にチェックを入れます。これで拡張子が表示されるようになります。ついでにその下の『拡張子を変更する前に警告を表示』のチェックを外して下さい。こうすることで拡張子を変更する度に出てくるアラートがでなくなりますのでオススメです。

MacOSの方は以上で設定は終了です

WindowsOSの方もMacOSの方も設定が完了しましたでしょうか。適当にフォルダを開いてファイル名に拡張子が表示されていればOKです。

さて、みなさんがこれから作成するHTMLファイルの拡張子は『.html』です。テキストファイルを作成し、その拡張子を『.txt』から『.html』と変更すればHTMLファイルとして扱われます。この作業についての詳しい内容は先の記事でやっていきますね。

拡張子については以上です。次の環境構築に進みます。次は『テキストエディタ』です。引き続き頑張っていきましょうね。ではではー。

This article was written by Sakurama.

Author's beloved small mammal

桜舞 春人 Sakurama Haruto

A Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him.

If you find any errors or copyright issues, please .