2021.08.25
こんにちは。
アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、
誠にありがとうございます。
今回は、ホームページ制作には必ず必要となってくる画像やPDFなどの「ファイルの拡張子」についてご紹介します。
拡張子とは、パソコンやスマートフォンなどで扱うファイルの種類を識別するためにファイル名末尾の「.(ピリオド)」以降につけられる3文字前後の文字列のことを指します。
例：
「aaaa.jpg」 →拡張子は「.jpg」
「bbbb..txt」 →拡張子は「.txt」
拡張子がついているファイルはそのファイルが何のファイルであるのかを判別し、ファイルをクリックすると対応したアプリケーションで開くことができます。
※対応したアプリケーションプログラムがダウンロードされていない場合は開くことができません。
拡張子は数多く存在し、ファイルによって特徴があり、それぞれの特徴や用途によって使い分けが必要となります。
また、拡張子によっては拡張子を変更すると開けなくなるものや自分が思っているかたちで表示されないもの、
ファイル自体が拡張子の違いによって壊れてしまうものもあるので注意が必要です。
| .jpg（.jpeg） | .gif | .png | |
|---|---|---|---|
| 色数 | フルカラー1670万色 | 256色 | フルカラー1670万色 |
| 圧縮形式 | 非可逆圧縮形式 →上書き保存で画像が劣化してしまう | 可逆圧縮形式（ロスレス圧縮） | 可逆圧縮形式（ロスレス圧縮） |
| 背景の透過 | ✕ | 〇 | 〇 |
| 容量 | 小さくできる | 軽め | フルカラーにすると.jpgよりも重くなる |
| アニメーション | ✕ | 〇 | ✕ |
| おすすめ用途 | 写真 | ロゴ・ボタン・アイコン・イラスト | 写真・イラスト |
「.heic」はApple社がiOS11から採用したオリジナルの拡張子です。
特徴としては、【高画質・容量が軽い（JPEGの半分くらいの容量）】があげられます。
iPhoneで使用する分には問題ありませんが、Windowsのパソコンで開く場合この拡張子に対応していない場合があります。
WEB上で「.heic」の画像を表示させたい場合には拡張子変換が必須となります。
iPhoneの【設定】アプリ→【カメラ】を選択→【フォーマット】を選択→【互換性優先】を選択
iPhoneのカメラで撮影する写真は「.jpg」形式で保存されるようになります。
| .wav | .mp3 | |
|---|---|---|
| 特徴 |
|
|
| .wmv | .avi | .mpeg（.mpg） | |
|---|---|---|---|
| 特徴 |
|
|
|
| 拡張子名 | 形式 |
|---|---|
| .tiff／.tif | 画像ファイル |
| .bmp | 画像ファイル |
| .txt | テキストファイル |
| .csv | テキストファイル |
| PDFファイル | |
| .html／.htm | HTMLファイル |
| .xml | XMLファイル |
| .css | スタイルシート |
| .js | JavaScriptファイル |
| .zip | 圧縮ファイル |
Windows10のデフォルトの設定で拡張子が非表示になっていますが、設定で変更することが可能です。
Windows10に標準搭載されている「ペイント」では、画像や写真のファイル形式を変更して保存することができます。
形式変更できるファイルの拡張子
変更方法
ant2 CMSではサーバーブラウザーで各種ファイルを管理しており、サイトで使用する画像や各種ファイルは、サーバーブラウザーにアップロードする必要があります。
アップロードできるファイル拡張子は下記となります。
| 拡張子 | 3fr、ai、arw、bmp、cr2、crw、dcs、dcr、dng、eps、erf、gif、jpg、jpeg、kdc、mef、mos、mrw、nef、nrw、orf、pef、png、psd、r3d、raf、rw2、rwl、sketch、sr2、xd、svg、svgz、tif、tiff、x3f、3gp、3gpp、3gpp2、asf、avi、dv、flv、m2t、m4v、mkv、mov、mp4、mpeg、mpg、mts、oggtheora、ogv、rm、ts、vob、webm、wmv、swf、jpg、gif、jpeg、png、tiff、tif、swf、fla、flv、zip、txt |
|---|---|
| 上限 | 32MB |
| 拡張子 | csv、doc、csv、doc、docm、docx、ods、odt、otf、pdf、ps、rtf、ttf、xls、xlsm、xlsx、odp、pps、ppsm、ppsx、ppt、pptm、pptx、3fr、ai、arw、bmp、cr2、crw、dcs、dcr、dng、eps、erf、gif、heic、jpg、jpeg、kdc、mef、mos、mrw、nef、nrw、orf、pef、png、psd、r3d、raf、rw2、rwl、sketch、sr2、xd、svg、svgz、tif、tiff、x3f、3gp、3gpp、3gpp2、asf、avi、dv、flv、m2t、m4v、mkv、mov、mp4、mpeg、mpg、mts、oggtheora、ogv、rm、ts、vob、webm、wmv、swf、aac、m4a、mp3、oga、wav、as、as3、asm、cpp、cs、css、cxx、diff、erb、erl、groovy、gvy、h、haml、hh、hxx、js、json、jsx、less、lst、markdown、md、mdown、mkdn、ml、mm、out、plist、properties、sass、scm、script、scss、sml、sql、txt、vb、vi、vim、xhtml、xml、xsd、xsl、yaml、yml、htm、html、lzh、zip、tar、gz、7z、rar |
|---|---|
| 上限 | 32MB |
今回は拡張子についてご紹介いたしました。
拡張子の種類や違いを理解し、より適したファイルを使用することでユーザーファーストなホームページを制作することができます。
また、拡張子を見える設定にすることでよりスムーズな制作ができるかと思います。
ant2 CMSは主要なファイルは勿論その他のファイルもアップロード可能となっておりますので
是非、この機会に拡張子による見え方の違いなどをお試しください。
