LoginSignup
2

More than 5 years have passed since last update.

posted at

updated at

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

html5upのhtmlを使ってみます

1. html5upから好きなhtmlを選びます

  • html5upのサイトを開きます
  • 画面をスクロールし、各タイトルの「Live Demo」のボタンで画面を見てみます。「Free Download」の右側の数字はこれまでのダウンロードの数です。下の方へゆくと30万ダウンロード超などの人気のhtlが見つかります

スクリーンショット 2017-06-03 17.23.47.png

  • 以下に自己紹介やマイサイトなどに使いやすいタイトルをいくつか選んでみました。使い方は当ページの最後に説明しています

    • (初心者向け)html5up - Dimensionを使ってみる
    • (初心者向け)html5up - Prologueを使ってみる
    • (初心者向け)html5up - Halcyonicを使ってみる
    • (初心者向け)html5up - Read Onlyを使ってみる
    • (初心者向け)html5up - Big Pictureを使ってみる
    • (初心者向け)html5up - Hyperspaceを使ってみる
    • (初心者向け)html5up - Highlightsを使ってみる
  • 気に入ったものが見つかったら、「Free Download」ボタンでダウンロードします。MacbookであればDockの右端(ゴミ箱の左隣)の「ダウンロード」をクリックするダウンロードされたファイルの一覧が表示されるので、一番上の「Finderで開く」を選択してFinderで表示させます

スクリーンショット 2017-06-03 21.17.29.png

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

スクリーンショット 2017-06-03 17.34.57.png

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

スクリーンショット 2017-06-03 17.37.48.png

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

スクリーンショット 2017-06-03 17.40.55.png

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

スクリーンショット 2017-06-03 17.44.23.png

2. 編集用にatomをインストールします

  • 写真の更新の前に、後続のステップで文字を編集するために使うAtomというツールをインストールしておきます
  • Atomのサイトへアクセスし、「Download for Mac」を押してAtomをダウンロードします スクリーンショット 2017-06-03 20.37.53.png
  • 前項と同じようにダウンロードフォルダーに入るので、Finderで開きます

  • Finderでatom-mac.zipをダブルクリックします。緑色のアイコンのAtomが現れるので、「アプリケーション」フォルダーへドラッグ&ドロップします
    スクリーンショット 2017-06-03 20.42.33.png

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

スクリーンショット 2017-06-03 20.43.04.png
スクリーンショット 2017-06-03 20.43.29.png

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

4. 参考・関連ページ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2