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では、個人サイト制作を頑張るみなさんを応援しています

この記事を書いた人

ガタガタ

このサイトと、このサイトの掲載記事のほとんどと、このサイトで配布しているプログラムやテンプレートのすべてを作った人。絵を描いたり、文章を書いたりして暮らしています。

関連記事

WordPressサイトに必要なメンテナンスって?やるべきことや放置のリスクを初心者向けに解説!
folder基本を知りたい favorite 8

WordPressサイトに必要なメンテナンスって?やるべきことや放置のリスクを初心者向けに解説!

【簡単インストール】WordPressでの創作・同人サイト制作におススメのサーバー6選【コスパ良し】
folder基本を知りたい favorite 34

【簡単インストール】WordPressでの創作・同人サイト制作におススメのサーバー6選【コスパ良し】

創作・同人系個人サイトを訪問するときに気を付けたいこと
folder基本を知りたい favorite 227

創作・同人系個人サイトを訪問するときに気を付けたいこと

個人サイトを作りたい!HTMLテンプレートとWordPress、どっちで作ればいい?
folder基本を知りたい favorite 28

個人サイトを作りたい!HTMLテンプレートとWordPress、どっちで作ればいい?

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

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

個人サイトって何?令和の個人サイトは進化している!SNSに依存しないネット上の居場所を作ろう
folder基本を知りたい favorite 203

個人サイトって何?令和の個人サイトは進化している!SNSに依存しないネット上の居場所を作ろう