Webエンジニア学習日記 HTML編 #04 「ファイルの種類と拡張子」

エンジニア学習は、多くの人が短期間で効率よく学習したがりますが、周辺学習というのが非常に重要です。 HTMLを覚える時に、インターネットブラウザや、ネットワークがどういう風な仕組みなのかを知ることで、より効率的なHTMLタグが書けたりもします。 とはいえ、膨大なテクノロジーの事を隅から隅まで学習するのは、なかなかしんどいものですよね。 ということで、今回は、HTMLにまつわる、ファイルの種類についての学習をしたいと思います。

ファイルの種類について

HTMLに関連するファイルは、思いの外たくさんあります。 HTMLタグをコーディングして保存するファイルは、HTMLファイルですが、画像を表示する時には、それぞれの画像ファイル。 動画を表示したければ、動画ファイル。 たまに、仕事用ページでしようとしてのPDFなどのデータファイル扱う時もあります。 音声や音楽などのオーディオファイルなども、扱うケースもあるでしょう。 これから先に学習する、CSSやJavascriptなどのプログラムファイルも必要になります。 プログラムファイルは、PHPやPython、Perl、Ruby、Java、・・・という感じで、プログラム言語毎にファイルの種類やそれぞれのファイルのルールが存在するのですが、それらはそのプログラム言語を学習する時に覚えればいいので、今のところは、そういうのがあるという程度に頭にとどめておいて下さい。

拡張子について

たくさんファイルの種類があるという事が分かったところで、それらを見分ける手段として拡張子という言葉を覚えておきましょう。 拡張子というのは、そのファイルの種類を表す起動です。 HTMLは、index.htmlのように「.html」というのがファイル名の後ろについているはずです。 インターネットで、https://example.com/index.html、と言うふうにURLが表示されているので、表示しているのがHTMLファイルだというのが分かります。 ※URLについては、もっと複雑な学習ポイントがあるので、別のネットワーク学習の際に学ぶので今はそこまで深く考えなくて大丈夫です。

拡張子が表示されないケースがある

MacやWindowsでは、拡張子を表示しないという設定があるので、その設定になっている場合、ファイルを見ても拡張子が表示されていない場合があります。 パソコンに保存されているファイルに、ファイル名.拡張子と言うふうに、.（ドット）の後ろに文字が表示されていない場合は、拡張子が非表示に設定されている可能性が高いです。 これからプログラミングの学習をする人は、拡張子を表示するように設定を切り替えておきましょう。 設定は、使用しているOSやそのバージョンごとに異なるので、「mac　拡張子　表示」という風にググって調べて、拡張子を表示する設定に切り替えておきましょう。

拡張子の種類

環境設定が整ったところで、拡張子の種類について理解しましょう。 ※太字の項目はHTML学習に関連するファイルです。

プログラミングファイル

.html : HTMLのコードを書き込むファイル .css : スタイルシート(css)を書き込むファイル .js : Javascriptを書き込むファイル .php : PHPのプログラムを書き込むファイル .py : Pythonのプログラムを書くファイル .pl : Perlのプログラムを書くファイル .rb : Rubyのプログラムを書くファイル .java : Javaのプログラムを書くファイル go : Go言語のプログラムを書くファイル

画像ファイル

.jpeg , .jpg : Jpegフォーマットの画像データファイル .png : PNGフォーマットの画像データファイル .gif : GIFフォーマットの画像データファイル .svg : SVGフォーマットのの画像データファイル（テキストファイル） .webp : Webpフォーマットの画像データファイル .bmp : 非圧縮ビットマップであるBMPファオーマットの画像データファイル .tiff : 高画質などで使われるTiffフォーマットの画像データファイル .pdf : フォトショップデータ .ai : イラストレータデータ

音楽ファイル

.mp3 : 圧縮音声データのMP3フォーマットの音声ファイル .wav : 非圧縮データのWavフォーマットの音声ファイル .wma : WMAフォーマットの音声ファイル .aac : AACフォーマットの音声ファイル .aiff : AIFFフォーマットの音声ファイル

動画ファイル

.mp4 : 圧縮動画のMP4フォーマットの動画ファイル .mov : Mac標準の動画フォーマットで .wmv : Windowsの標準動画フォーマット .avi : 非圧縮の動画フォーマット .flv : Flash動画のフォーマットファイル .webm : 圧縮率が高くWebで使うことを前提とされた動画フォーマット

データ（資料）ファイル

.pdf : PDFデータ .xml : 数値や項目解説などを便利に格納できる、HTML拡張のXMLデータ .json : APIなどで利用されるデータフィアル .xlsx : Officeのエクセルファイル .docx : Officeのワードファイル .ppt : Officeのパワーポイントファイル

テキストファイル

.txt : テキストファイル .md : MarkDownデータファイル

拡張子アイコンについて

上記以外にもパソコンで扱う全てのファイルには拡張子が存在します。 見たことのない拡張子があれば、ネットで調べてみるのもいいでしょう。 そもそも、拡張子ってなんで存在するのかというと、どのアプリケーションでファイルを開いて操作をするかという意味があり、 多くの場合、拡張子はそれを扱うアプリのアイコンが表示されています。 使っているパソコンにインストールされていないアプリの拡張子がるファイルを開こうとすると、エラーが表示されたりもします。 ファイル名には、.（ドット）を含む文字を入れると、アプリケーションが誤作動するという場合もあるので、通常パソコンのファイル名には拡張子以外には.（ドット）を使わないという裏ルールもあるんですね。 2023.4.23.txtこんなファイル名はあまり使わないほうがいいという事です。

• HTML事始め
• HTMLタグの種類
• HTMLドリル（初級）
• ファイルの種類と拡張子