Webサイト制作のための「コンピューターファイル」
「コンピューターファイル」とは、「コンピューター」上にある「データ」の比喩的表現であり、ここでいうファイルとは、「パンチカード」に由来する表現である。
「コンピューターファイル」を大きく2つに分類すると、「バイナリファイル」と「テキストファイル」に分類できる。
「バイナリファイル」とは、主に「16進数」などで構成されている「コンピューターファイル」であり、編集するためにはそれ専用の「ソフトウェア」が必要となる。
「テキストファイル」とは、主に「テキスト」で構成されている「コンピューターファイル」であり、「テキストエディター」などで編集することができる。
| テキストエディター | |
|---|---|
参考：Level 5：Webサイト制作のための「開発ツール」 > テキストエディター(ソースコードエディター、IDE) |
1. 可読ファイル一覧
| コンピューターファイル(拡張子) | 公式サイト | 主な用途 |
|---|---|---|
| XML(.xml) | Extensible Markup Language (XML) 1.0 (Fifth Edition) | サイトマップなど |
| YAML(.yaml) | The Official YAML Web Site | 構成ファイルなど |
| JSON(.json) | JSON | 構成ファイルなど |
| Markdown(.md) | Daring Fireball: Markdown | READMEなど |
| CSV(.csv) | 参考：Comma-separated_values - Wikipedia | テーブルデータを"カンマ区切り"のテキストファイルとして格納 |
| TSV(.tsv) | 参考：Tab-separated values - Wikipedia | テーブルデータを"タブ区切り"のテキストファイルとして格納 |
| その他のコンピューターファイル | ||
| サイトマップ(Site map) | 参考：Site map - Wikipedia |
|---|---|
| 構成ファイル(configuration file) | 参考：Configuration file - Wikipedia |
| README | 参考：README - Wikipedia |
| テーブルデータを"カンマ区切り"のテキストファイルとして格納 | 参考：Delimiter-separated values - Wikipedia |
| テーブルデータを"タブ区切り"のテキストファイルとして格納 | 参考：Delimiter-separated values - Wikipedia |
2. イメージ(画像)ファイル一覧
| コンピューターファイル(拡張子) | 公式サイト | 備考 |
|---|---|---|
| PNG(.png) | 参考：Portable Network Graphics - Wikipedia | ラスターグラフィックス(raster graphics)：Raster graphics - Wikipedia |
| Animated PNG：APNG - Wikipedia | ||
| SVG(.svg) | 参考：Scalable Vector Graphics - Wikipedia | ベクターグラフィックス(vector graphics)：Vector graphics - Wikipedia |
| JPEG(.jpg, .jpeg) | 参考：JPEG - Wikipedia | ラスターグラフィックス(raster graphics)：Raster graphics - Wikipedia |
| GIF(.gif) | 参考：GIF - Wikipedia | アニメーションGIF：GIF - Wikipedia#Animated_GIF |
| ICO(.ico) | 参考：ICO (file_format) - Wikipedia | ファビコン(favicon)：Favicon - Wikipedia |
| WebP(.webp) | https://developers.google.com/speed/webp | Googleによって開発された |
| その他のコンピューターファイル | ||
3. オーディオ(音声)ファイル一覧
| コンピューターファイル(拡張子) | 参考サイト | 備考 |
|---|---|---|
| MP3(.mp3) | MP3 - Wikipedia | MPEG-1 Audio Layer-3(MP3) |
| WAV(.wav, .wave) | WAV - Wikipedia | Waveform Audio File Format(WAVE or WAV) |
| その他のコンピューターファイル | ||
4. ビデオ(動画)ファイル一覧
| コンピューターファイル(拡張子) | 参考サイト | 備考 |
|---|---|---|
| MPEG(.mpg, .mpeg) | Moving Picture Experts Group - Wikipedia | Moving Picture Experts Group (MPEG) |
| AVI(.avi) | Audio Video Interleave - Wikipedia | Audio Video Interleave (AVI) |
| その他のコンピューターファイル | ||
5. フォントファイル一覧
| コンピューターファイル(拡張子) | 参考サイト | 備考 |
|---|---|---|
| WOFF(.woff) | 参考：Web Open Font Format - Wikipedia | Web Open Font Format (WOFF) |
| その他のコンピューターファイル | ||
6. Webページを構成する基本的なファイル一覧
| コンピューターファイル(拡張子) | 公式サイト | KnotTextでの情報 |
|---|---|---|
| HTMLファイル(.html) | https://html.spec.whatwg.org/multipage/ | Level 5：コンピューター言語 > マークアップ言語 > HTML |
| CSSファイル(.css) | https://www.w3.org/Style/CSS/current-work | Level 5：コンピューター言語 > スタイルシート言語 > CSS |
| JavaScriptファイル(.js) | https://tc39.es/ecma262/multipage/ | Level 5：コンピューター言語 > コンピュータープログラミング言語 > JavaScript |
| その他のコンピューターファイル | ||
7. 設計ツール固有のファイル一覧
| コンピューターファイル(拡張子) | 公式サイト | その他の情報 |
|---|---|---|
| Adobe Photoshop(.psd) | https://www.adobe.com/products/photoshop.html | Level 5：設計ツール > 設計(デザイン)に関するツール(2D) > Adobe Photoshop |
| Adobe Illustrator(.ai) | https://www.adobe.com/jp/products/illustrator.html | Level 5：設計ツール > 設計(デザイン)に関するツール(2D) > Adobe Illustrator |
| Blender(.blend) | https://www.blender.org/ | Level 5：設計ツール > 設計(デザイン)に関するツール(3D) > Blender |
| その他のコンピューターファイル | ||