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

[html5upを使ってみる](http://qiita.com/egplnt/items/2643c299d8540f749181)より
[html5up](https://html5up.net/)の[Dimension](https://html5up.net/dimension)を使ってみます

![スクリーンショット 2017-06-03 23.06.23.png](https://qiita-image-store.s3.amazonaws.com/0/125842/04e8a375-6881-e42c-59d4-4e00d7fb43a4.png)

[html5up](html5up.net)は[Creative Commons cc3](https://html5up.net/massively)なので、下記で編集するindex.htmlの"html5up"のcreditを残します

# １．写真を更新する
- ダウンロードしたファイルには写真が含まれていないので、自分の表示したい写真で置き換えます
- Finderでhtｍl5up-dimension.zipをダブルクリックして展開すると、html5up-dimensionのフォルダーが現れるので、その下の"images"フォルダーを開きます

![スクリーンショット 2017-06-03 23.00.48.png](https://qiita-image-store.s3.amazonaws.com/0/125842/93c76a86-5005-5775-5a74-92a366ec6c18.png)

- 置き換える対象となるファイル（例：bg.jpg、bgはbackgroundの意味）のサイズを確認します。bg.ｊｐgをダブルクリックし、プレビューで開いて、「ツール」▶「サイズを調整」を開きます

![スクリーンショット 2017-06-04 10.46.24.png](https://qiita-image-store.s3.amazonaws.com/0/125842/91fe0432-4baf-bca2-99ed-fcefa2db96eb.png)

- この例では対象となるファイルbg.jpgのサイズが「ピクセル」という単位で、幅が１568ピクセル、高さが１024ピクセルであることがわかります

![スクリーンショット 2017-06-04 10.50.43.png](https://qiita-image-store.s3.amazonaws.com/0/125842/b00905d8-4f22-b92c-d4d0-4e43983f8711.png)

- 変更（置き換え）前のバックアップとして、"bg.jpg"ファイルを右クリックで長押しすると、ファイル名部分が反転するので、"bg_bk.jpg"などへ改名しておきます

![スクリーンショット 2017-06-03 23.01.46.png](https://qiita-image-store.s3.amazonaws.com/0/125842/3aeadceb-ec75-fa7b-85fc-e44ba8cc0427.png)

![スクリーンショット 2017-06-03 23.01.56.png](https://qiita-image-store.s3.amazonaws.com/0/125842/609d0687-6305-4f27-5ada-304b32043cb0.png)

- iPhotoやiPhoneなどから自分の好きな写真をコピーして、このimagesフォルダーに置きます。[(初心者向け）Macbookで写真のサイズを変える](http://qiita.com/egplnt/items/54f19d3ff385c6e10b01)
を参照し、自分の好きなファイルを対象の元ファイル（例：bg.jpg）のサイズに合わせて変更します。ファイルサイズの変更が完了したら、ファイル名を対象ファイル名（例："bg.jpg"）へ変更します。オリジナルの自分の好きな写真を改名してしまわないよう、コピーした写真を改名するようにします
- [Unsplash](https://unsplash.com/)などのサイトから高品質な写真を無償で入手することができます。使用に際してはライセンスの規約を熟読し、規定を遵守します。
- ブラウザでindex.htmlをリロードし、提供した写真が表示されることを確認します

![スクリーンショット 2017-06-03 23.05.46.png](https://qiita-image-store.s3.amazonaws.com/0/125842/a5e52c1f-73d4-adde-3974-dc4aaef14d38.png)

- "images"フォルダーの他のjpgファイルも写真と置き換えることで、ブラウザで表示される画面を変更することができます。どの画面にどの写真が表示されるかは、写真が表示されているところで[contorl]を押しながら右クリックし、表示されるメニューから「名前をつけて画像を保存」を選択するとファイル名が表示されるので、imagesフォルダー内の同名のファイルを置き換えることで画面に表示される写真を入れ替えることができます
- 写真の大きさが合わない場合、写真サイズを編集します → [Macbookでの写真サイズの編集](http://qiita.com/egplnt/items/54f19d3ff385c6e10b01)

![スクリーンショット 2017-06-03 23.08.29.png](https://qiita-image-store.s3.amazonaws.com/0/125842/7609301f-f86b-01e9-4fcd-006a108c67c6.png)
- 例えば、pic01.jpgは「INTRO」メニューを選択したときに表示される写真、pic02.jpgは「WORK」メニューを選択したときに表示される写真、、となります

# ２．文章を更新する
- 画面に表示される文章を更新します
- まず、index.htmlのバックアップをとっておきます。index.htmlをコピー▶貼り付けし、ファイル名を`index_bk.html`などにします
- index.htmlを２本指でタップ（または[control]＋右クリック）し、「このアプリケーションで開く」からAtomを選択します

![スクリーンショット 2017-06-03 23.27.21.png](https://qiita-image-store.s3.amazonaws.com/0/125842/532429c8-f234-91c5-0a4d-a4af19198185.png)

-Atomでindex.htmlが編集可能なかたちで表示されました
![スクリーンショット 2017-06-03 23.29.28.png](https://qiita-image-store.s3.amazonaws.com/0/125842/3ce5305e-d840-8fb7-a35a-1aa03da9c748.png)

- 28行目の`<h1>Dimension</h1>`を見つけ、

![スクリーンショット 2017-06-03 23.30.26.png](https://qiita-image-store.s3.amazonaws.com/0/125842/e660bb12-2167-962a-bed0-722f79d5e6eb.png)

- この文字列を適当に書き直し、

![スクリーンショット 2017-06-03 23.32.07.png](https://qiita-image-store.s3.amazonaws.com/0/125842/65017dc9-0439-822b-1628-748ffad53785.png)

- [command]+Sで保存します
- ブラウザのindex.htmlを[control]+Rでリロードし、上記の更新された文章が画面に表示されることを確認します

![スクリーンショット 2017-06-04 0.07.53.png](https://qiita-image-store.s3.amazonaws.com/0/125842/3e518323-3f5a-8e3e-3992-fda3c00897bb.png)

- 同様に、２９行目の文章を更新し（行末の`</p>を削除しないように気をつけます）、[command]＋Sで保存した後、ブラウザでindex.htmlをリロードし、更新された文章が表示されることを確認します。

![スクリーンショット 2017-06-04 0.09.15.png](https://qiita-image-store.s3.amazonaws.com/0/125842/e7b26cf4-1a76-c410-8978-829576a296f8.png)
- 画面最下部の"© UNTITLED. DESIGN: HTML5 UP."でhtml５upのcreditが表示されていることを確認します 
![スクリーンショット 2017-06-04 0.13.09.png](https://qiita-image-store.s3.amazonaws.com/0/125842/ea5be82a-249b-af25-4fb5-325850ec7abf.png)

# ３．さらに文章を編集していきます
- index.htmlを開いているAtomの画面で[command]+Fで検索窓を表示します

![スクリーンショット 2017-06-04 8.19.39.png](https://qiita-image-store.s3.amazonaws.com/0/125842/67c4b0a8-9141-6efd-2f84-06da20d04301.png)
- 「INTRO」の文字列をindex.html内で検索します
- ３４行めで見つかるのは無視して、５０行め付近で見つかる部分に注目します

![スクリーンショット 2017-06-04 8.21.28.png](https://qiita-image-store.s3.amazonaws.com/0/125842/684ffc1c-83e6-3c1c-9cd5-4322f2556cd1.png)
- この`<p>Aenean ornare velit lacus...`の部分が「INTRO」画面に表示される文字なので、適当に編集します。末尾の`</p>`を削除しないように注意します
- [command]+Sで保存し、ブラウザでindex.htmlを再表示して結果を確認します

![スクリーンショット 2017-06-04 8.47.42.png](https://qiita-image-store.s3.amazonaws.com/0/125842/0e371cee-eb8d-92c3-7f8f-4e8ccda87f60.png)

-ちなみに、元々書いてあった「Lorem ipsum dolor sit amet, consectetur... 」のような文章はダミーテキストと呼ばれ、まだ原稿がないウェブページのデザインを検討したりプロトタイプを作成したりする際に用いられます。その音からロレム・イプサムなどと呼ばれることもあります。参照 → [ウィキペディア Lorem ipsum](https://ja.wikipedia.org/wiki/Lorem_ipsum)
- ５４行め付近の「WORK」メニュー、６２行め付近の「ABOUT」メニューも同様に更新します

# 4. (参考)「コンタクト」メニューからメールを送信可能にする
- 「コンタクト」メニューからメールを送れるようにします。
- デフォルトのメールソフトを使うので、別のメールソフトやウェブ上のメールの仕組みを使用している場合は工夫が必要になります
- index.htmlを開いているAtomで「Contact」を検索します。６９行め付近に見つかります

![スクリーンショット 2017-06-04 9.14.41.png](https://qiita-image-store.s3.amazonaws.com/0/125842/7f7293d7-180c-7d03-7038-d3f8d3c07865.png)

- ７２行めの`<form method="post" action="#">`を`<form method="post" action="mailto:foo@aaa.bbb.com">`のように書き換えることで、「SEND MESSAGE」ボタンを押すとaaa.bbb.comのfooさん向けのメールを送信するようになります（デフォルトのメーラーを使って）

![スクリーンショット 2017-06-04 9.21.34.png](https://qiita-image-store.s3.amazonaws.com/0/125842/af4f4072-34f6-a35c-a2f8-5826052eec23.png)

-[command]+Sで保存したあと、ブラウザでindex.htmlをリロードし、CONTACTページで「SEND MESSAGE」ボタンを押すとデフォルトのメールアプリが起動されるようになります（あまり使われていないのでは、と思いますが）

![スクリーンショット 2017-06-04 9.22.52.png](https://qiita-image-store.s3.amazonaws.com/0/125842/9837a494-6135-628c-8427-95c88e1b0096.png)