(初心者向け)html5upを使ってみる

[html5up](https://html5up.net/)のhtmlを使ってみます

#1. html5upから好きなhtmlを選びます
- [html5upのサイト](https://html5up.net/)を開きます
- 画面をスクロールし、各タイトルの「Live Demo」のボタンで画面を見てみます。「Free Download」の右側の数字はこれまでのダウンロードの数です。下の方へゆくと30万ダウンロード超などの人気のhtlが見つかります

![スクリーンショット 2017-06-03 17.23.47.png](https://qiita-image-store.s3.amazonaws.com/0/125842/0c1da10d-2a79-a1c0-d886-895276774210.png)

- 以下に自己紹介やマイサイトなどに使いやすいタイトルをいくつか選んでみました。使い方は当ページの最後に説明しています
    - (初心者向け)html5up - Dimensionを使ってみる
    - (初心者向け)html5up - Prologueを使ってみる
    - (初心者向け)html5up - Halcyonicを使ってみる
    - (初心者向け)html5up - Read Onlyを使ってみる
    - (初心者向け)html5up - Big Pictureを使ってみる
    - (初心者向け)html5up - Hyperspaceを使ってみる
    - (初心者向け)html5up - Highlightsを使ってみる

- 気に入ったものが見つかったら、「Free Download」ボタンでダウンロードします。MacbookであればDockの右端（ゴミ箱の左隣）の「ダウンロード」をクリックするダウンロードされたファイルの一覧が表示されるので、一番上の「Finderで開く」を選択してFinderで表示させます

<img width="297" alt="スクリーンショット 2017-06-03 21.17.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/92d571f9-9944-5c01-1db8-db9e99edbe76.png">

- このままだと作業がしにくいので、作業用のフォルダーを作成してそこへダウンロードしたzipファイルを移動させます。Finderの「Desktop」を選択し、右クリックで「新規フォルダ」を選択し、適当な名前（mysiteなど）を作成します。Finderを閉じてしまった場合は、Dockの左端からFinderを開きます

![スクリーンショット 2017-06-03 17.34.57.png](https://qiita-image-store.s3.amazonaws.com/0/125842/3729e892-568d-b924-b15f-499c9920e1f8.png)

- 先ほどダウンロードしたhtml5upのzipファイルを新たに作成したフォルダーへドラッグ＆ドロップで移動させます。ドラッグ＆ドロップが難しい場合、「ダウンロード」フォルダーで対象のzipファイルを二本指でタップし「（ファイル名.zip）をコピー」を選択し、「Desktop」▶「mysite」で二本指でタップして「項目をペースト」しても構いません

![スクリーンショット 2017-06-03 17.37.48.png](https://qiita-image-store.s3.amazonaws.com/0/125842/07e7ffa1-65ae-9703-40f7-4a030f0a9c72.png)

コピー（上図）して、対象フォルダーでペースト（下図）

![スクリーンショット 2017-06-03 17.40.55.png](https://qiita-image-store.s3.amazonaws.com/0/125842/013482fe-c5d8-adf6-6edf-f54c658c47f4.png)

- zipファイルをmysiteフォルダーへ置いたら、ダブルクリックでzipファイルを展開します
- ファイル名のフォルダーが展開され、その下に「index.html」が見つかるので、ダブルクリックするとブラウザで表示されます。写真を含まないhtml5upの画面が表示されます。ちょっと残念な感じですね。写真は著作権のため提供されないので、後続のステップで自分の好きな写真を入れていきます

![スクリーンショット 2017-06-03 17.44.23.png](https://qiita-image-store.s3.amazonaws.com/0/125842/6629b510-5c59-30a5-a21b-01b6da196ec8.png)

# 2. 編集用にatomをインストールします
- 写真の更新の前に、後続のステップで文字を編集するために使うAtomというツールをインストールしておきます
- [Atomのサイト](https://atom.io/)へアクセスし、「Download for Mac」を押してAtomをダウンロードします
![スクリーンショット 2017-06-03 20.37.53.png](https://qiita-image-store.s3.amazonaws.com/0/125842/15cfb85e-5bf9-422f-9b44-c1140c7f812d.png)
- 前項と同じようにダウンロードフォルダーに入るので、Finderで開きます

- Finderでatom-mac.zipをダブルクリックします。緑色のアイコンのAtomが現れるので、「アプリケーション」フォルダーへドラッグ＆ドロップします
![スクリーンショット 2017-06-03 20.42.33.png](https://qiita-image-store.s3.amazonaws.com/0/125842/d6899d38-85d3-6184-7ed4-99f929be45fe.png)

- Atomを起動してみます。アプリケーションフォルダーの「Atom」アイコンをクリックすると、Atom はインターネットからダウンロードされたアプリケーションです。開いてもよろしいですか？」というポップアップが表示されるので、「開く」をクリックします

![スクリーンショット 2017-06-03 20.43.04.png](https://qiita-image-store.s3.amazonaws.com/0/125842/f4a90948-f18f-1a49-8524-45ed90b8a87b.png)
![スクリーンショット 2017-06-03 20.43.29.png](https://qiita-image-store.s3.amazonaws.com/0/125842/9476319b-8607-92a2-da2c-61ee0af1716a.png)


#3. 自分のサイトを作ってみます

- ダウンロードしたファイルを編集して自分のサイトを作ってみます
- html5upは[Creative Commons cc3](https://html5up.net/license)で公開されているので、"html5up"の文字を残します
    - [(初心者向け)html5up - Dimensionを使ってみる](http://qiita.com/egplnt/items/ff1bfcb73383f6449dc8)
    - [(初心者向け)html5up - Prologueを使ってみる](http://qiita.com/egplnt/items/bafc51d838c91a90bbe1)
    - [(初心者向け)html5up - Halcyonicを使ってみる](http://qiita.com/egplnt/items/eef76dd1e4b7b39b7205)
    - [(初心者向け)html5up - Read Onlyを使ってみる](http://qiita.com/egplnt/items/4b1d864a025b5aa4c390)
    - [(初心者向け)html5up - Big Pictureを使ってみる](http://qiita.com/egplnt/items/b409bca3eaa2f5bb9433)
    - [(初心者向け)html5up - Hyperspaceを使ってみる](http://qiita.com/egplnt/items/89f602d72c8d68f1263c)
    - [(初心者向け)html5up - Highlightsを使ってみる](http://qiita.com/egplnt/items/8cfe01dbbbc03f8fa722)


#4. 参考・関連ページ
- [(初心者向け)Macbookで写真のサイズを変える](http://qiita.com/egplnt/items/54f19d3ff385c6e10b01)

- [(初心者向け）Swift3.0で簡単なiPhoneアプリを作ってみる](http://qiita.com/egplnt/items/e8da2b9af1037e179a57)
- [tigergateまとめ](http://qiita.com/egplnt/items/f03b5e4f8e90cdf9b79a)