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

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

初めてサイトを作るとき、多くのケースでテンプレートを利用することになります。当サイトでは、テンプレートを「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では、個人サイト制作を頑張るみなさんを応援しています

   【PR】HTML/CSSを基礎から勉強したい方へ

HTML/CSS初心者のための書籍を執筆しました

個人サイトを作ろう! テンプレートですぐできる!すぐに身につく!HTML&CSS

これから初めてHTML・CSSに触れる方や、過去に個人サイトを作ったことがあるけど、最新のHTML・CSSやウェブサイト制作を学び直したい!という方に向けた、創作・同人サイトを作るための本です。
書籍購入者には特典として、「do」でも配布していないオリジナルHTMLテンプレート3種が利用できます。本書では、このテンプレートを実際に自分で編集することでHTML・CSSを学んでいくため、初めての方でも理解しやすい内容に仕上がっています。
「do」では紹介しきれなかった、サイト制作の基礎の基礎から網羅した入門にオススメの書籍です。ぜひお手に取ってみてください!

Amazonで購入する