folderサイト制作のいろは

zipって何?テンプレートファイルのダウンロードからHTML編集までの流れ【超初心者向け】

zipって何?テンプレートファイルのダウンロードからHTML編集までの流れ【超初心者向け】

zipって何?テンプレートファイルのダウンロードからHTML編集までの流れ【超初心者向け】 - https://do.gt-gt.org/start-download-zip/

初めてサイトを作るとき、多くのケースでテンプレートを利用することになります。当サイトでは、テンプレートを「zipファイル」にして配布しています。

しかし、zipファイルをいざダウンロードしてみても、その先どうすればいいのかわからない人も少なくないと思います

  • zipファイルってどういうもの?
  • 「zipを解凍する」ってどういうこと?
  • HTMLファイルが開けない!

この記事では、zipファイルやHTMLファイルを初めて扱う人向けの、テンプレート編集以前のファイルの扱い方を解説します。

この記事では、Windows10での操作を説明します。Macintoshなど別のOSだと必要な操作が異なる場合があります。

そもそもzipファイルとは

zipファイルとは、フォルダやファイルを圧縮し、一つのファイルにしたものです。

ファイルをメールで送信したり、ブラウザからダウンロードするとき、基本的には「1ファイル」ずつしか送受信することができません。そのため、一度に大量のファイルをやりとりする場合には、1つずつ送受信すると膨大な手間と時間がかかってしまいます。

「やりとりしたいファイルをひとつのフォルダにまとめて、フォルダごと送受信すればいいんじゃ?」と思われるかもしれませんが、「フォルダ」は「ファイル」ではないため、フォルダごと送受信することはできないのです。

そこで、複数のファイルを圧縮し、ひとつのzipファイルにすれば、zipファイルだけを送受信すればいいため、手間と時間を大幅に省くことができます

引っ越しの際に大量の荷物をひとつずつ運ぶのではなく、段ボールにまとめて運ぶのと同じです。やりとりしたいものを一つにまとめて、運びやすくするようなイメージですね。

zipファイルの特徴

zipファイルは、解凍(「展開」と呼ぶこともあります)することではじめて中に入っているファイルを扱えるようになります。おそらく、zipファイルを初めて扱うにあたり、多くの人がここでつまずくと思います。

zipファイルをダウンロードした後、どうすればいいか

zipファイルがどこに保存されたかを確認

「ファイルをダウンロード」ボタンをクリックすると、zipファイルのダウンロードがはじまります。ダウンロードしたファイルは、たいていの場合、エクスプローラーを開き「PC」の中の「ダウンロード」フォルダに保存されます。

保存したファイルのありか

もし、ダウンロードしたファイルがここにない場合でも、ブラウザのダウンロード履歴からどこに保存されたか確認できます。ダウンロード履歴の確認方法はブラウザによって違うので、「ブラウザ名 ダウンロード履歴」などの語句で、Googleなどで検索してみてください。

zipファイルを解凍(展開)する

ダウンロードしたzipファイルを右クリックすると、「すべて展開」という選択肢があります。

zipファイルの解凍

「すべて展開」をクリックすると、解凍したフォルダを保存したい場所を聞かれるので、保存場所を選択して、zipファイルを解凍(展開)します。

すると、選択した場所に、展開したzipファイルと同じ名前のフォルダが生成されます。

zipファイル展開後

このフォルダの中に、HTMLなどさまざまなファイルがまとめて入れられています。さらに、展開後のフォルダに入っているのは、圧縮されていない普通のファイルなので、自分で編集することができます。

テンプレートの編集方法については、こちらの記事で詳しく解説しているので、参考にしてください。

HTMLが開けない?

解凍してできたフォルダを開いてみると、HTMLファイルのアイコンがブラウザのマークになっている場合があります。

HTMLファイルのアイコンがブラウザマークになっている場合
HTMLファイルのアイコンがGoogle Chromeのアイコンになっている例

このような場合、HTMLファイルをダブルクリックして開いても、ブラウザが立ち上がるだけで、ファイルを編集することができません。

HTMLファイルを編集するには、アイコンを右クリックし、「プログラムから開く」から、利用したいテキストエディタを選択します。

HTMLファイルを開いて編集する

テキストエディタについては、メモ帳でも編集できなくはないのですが、上で紹介した記事の中でおススメのものをいくつか紹介しているので、自分に合うものを探してみてください。

最後に

初めてHTMLテンプレートを扱う場合は、馴染みのない言葉やツールが必要になるため、最初は大変だと思います。

しかし、今は検索エンジンでいろんなことが調べられる良い時代です。わからないことがあれば、その都度調べてみて少しずつ覚えていけば、きっと理想のサイトが作れるようになるはずです。

doでは、個人サイト制作を頑張るみなさんを応援しています

関連記事

創作・同人サイトのためのレンタルサーバーの選び方とおすすめサーバー比較
folderサイト制作のいろは favorite 50

創作・同人サイトのためのレンタルサーバーの選び方とおすすめサーバー比較

スマホだけで創作・同人系個人サイトは作れる?無料ホームページ作成サービスを比較
folderサイト制作のいろは favorite 27

スマホだけで創作・同人系個人サイトは作れる?無料ホームページ作成サービスを比較

令和の今だからこそ、個人の創作・同人サイト制作をおススメしたい8つの理由
folderサイト制作のいろは favorite 227

令和の今だからこそ、個人の創作・同人サイト制作をおススメしたい8つの理由

創作・同人サイトの作り方!サーバーのレンタルからサイト公開までの全手順
folderサイト制作のいろは favorite 40

創作・同人サイトの作り方!サーバーのレンタルからサイト公開までの全手順

PHP・MySQL・独自ドメイン…創作・同人サイトのためのサーバー機能用語解説
folderサイト制作のいろは favorite 34

PHP・MySQL・独自ドメイン…創作・同人サイトのためのサーバー機能用語解説

独自ドメインを個人の創作・同人サイトで使うメリットとオススメ取得サービス
folderサイト制作のいろは favorite 40

独自ドメインを個人の創作・同人サイトで使うメリットとオススメ取得サービス