HTML5 UP!をひもとく 第1回 30分で目を見張るWebページを作ろう編

前回:第0回 HTML5 UP!とは?編
次回:まだだよ

30分で目を見張るWebページを作ろう!

Webデザイナーさんやその他Web関係者さんには非常に簡単な内容です。どうぞ読み飛ばしてください。

必要なもの

• テキストエディタ(UTF-8に対応したもの)

必要なスキル

• 通常の文字入力
• コピーアンドペースト

できるようになること

• 単一ページの作成
  (今回の記事ではほとんどHTML5/CSS3の能力は身につけることができません。)
• 「僕(私)(俺)(自分)(うち)(こっち)にもWebサイトが作れるんだ!」という自信

見ておくとよいサイト

• HTMLの基本 by Onizawa Tetsuya(Qiita)
• HTMLとは?これを読めば初心者でも必ずHTMLが書ける! by Udemy メディア

どちらのサイトも軽く目を通すぐらいでOKです。

手順

1.好きなテンプレートをダウンロード

HTML5 UP!から好きなデザインを見つける。
Free Downloadのボタンからダウンロードしわかりやすい場所に展開する。

2.必要最低限の編集をする

今回は例として"Minimaxing"を使用します。
まずは、"onecollum.html"を開いて以下の場所を編集しましょう。
行数を記載していますがずれがあると思います。あらかじめご了承ください。
(ちなみにこのデザインは文字がぴったり横にくっついていますが合っています。)

Before

(2~6:)
<!--
	Minimaxing by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
(12:)<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
(14:)<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
(19~23:)
<a href="index.html">Homepage</a>
<a href="twocolumn1.html">Two Column #1</a>
<a href="twocolumn2.html">Two Column #2</a>
<a href="onecolumn.html" class="current-page-item">One Column</a>
<a href="threecolumn.html">Three Column</a>
(59-85:)
<div class="3u 12u(mobile)">
<ul class="link-list">
<li><a href="#">Quis accumsan lorem</a></li>
<li><a href="#">Sed neque nisi consequat</a></li>
<li><a href="#">Eget et amet consequat</a></li>
<li><a href="#">Dapibus sed mattis blandit</a></li>
<li><a href="#">Vitae magna sed dolore</a></li>
</ul>
<!-- 実際には空行はありません  -->
</div>
<div class="3u 12u(mobile)">
<ul class="link-list">
<li><a href="#">Sed neque nisi consequat</a></li>
<li><a href="#">Dapibus sed mattis blandit</a></li>
<li><a href="#">Quis accumsan lorem</a></li>
<li><a href="#">Suspendisse varius ipsum</a></li>
<li><a href="#">Eget et amet consequat</a></li>
</ul>
<!-- 実際には空行はありません  -->
</div>
<div class="3u 12u(mobile)">
<ul class="link-list">
<li><a href="#">Quis accumsan lorem</a></li>
<li><a href="#">Sed neque nisi consequat</a></li>
<li><a href="#">Eget et amet consequat</a></li>
<li><a href="#">Dapibus sed mattis blandit</a></li>
<li><a href="#">Vitae magna sed dolore</a></li>
</ul>
</div>
(137:)<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->

After

すべて削除

3.内容の編集

ここから先は各自に合わせて編集してください

Before

(4:)<title>Minimaxing by HTML5 UP</title> <!-- HTML上でのタイトル  -->
(17:)<h1><a href="#" id="logo">Minimaxing</a></h1> <!-- 画面上に表示されるサイト名  -->
(32:)<h2>One Column (no sidebar)</h2> <!-- タイトル  -->
(33~35:) <!-- ページの内容  -->
<p>This ... suscipit.</p>
<p>Mauris ... iaculis.</p>
<p>Nulla ... dui.</p>
(47:)<h2>How about a truckload of links?</h2> <!-- リンク集っぽいもののタイトル  -->
(52~56:) <!-- リンク集っぽいものの中身 (リンクの張り方は上をチェック!)-->
<li><a href="#">Sed neque nisi consequat</a></li>
<li><a href="#">Dapibus sed mattis blandit</a></li>
<li><a href="#">Quis accumsan lorem</a></li>
<li><a href="#">Suspendisse varius ipsum</a></li>
<li><a href="#">Eget et amet consequat</a></li>
(65:)<h2>Something of interest</h2> <!-- お問い合わせ先の案内? -->
(66~69:) <!-- お問い合わせ先の案内の説明 -->
<p>Duis ... blandit.</p>
(71:)<a href="#" class="button">Oh, please continue ....</a> <!-- お問い合わせ先のメールアドレスetc. -->
(79:)&copy; Untitled. All rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a> <!-- コピーライト -->

After(Example)

(4:)<title>Easy HTML!</title> <!-- HTML上でのタイトル  -->
(17:)<h1><a href="index.html" id="logo">Easy HTML!</a></h1> <!-- 画面上に表示されるサイト名  -->
(32:)<h2>とーっても簡単！えいちてぃーえむえる</h2> <!-- タイトル  -->
(33~35:) <!-- ページの内容  -->
<p>すごーい！たのしー！</p>
<p>アワワワワ、アワワワワ……</p>
<p>(注)筆者はけものフレンズのことを知りませんし、見てないです。</p>
(47:)<h2>リンク集</h2> <!-- リンク集っぽいもののタイトル  -->
(52~56:) <!-- リンク集っぽいものの中身 (リンクの張り方は上をチェック!)-->
<li><a href="http://kemono-friends.jp/">けものフレンズプロジェクト</a></li>
<li><a href="https://twitter.com/kemo_anime">けものフレンズ＠公式アカウント</a></li>
<li><a href="#">以下略</a></li>
(65:)<h2>お問い合わせ</h2> <!-- お問い合わせ先の案内? -->
(66~69:) <!-- お問い合わせ先の案内の説明 -->
<p>困ったことがあったらボタンを押してね。</p>
(71:)<a href="mailto:[e-mail]" class="button">わかんないよー</a> <!-- お問い合わせ先のメールアドレスetc. -->
(79:)&copy; YoHaRu55. | Design: <a href="http://html5up.net">HTML5 UP</a> <!-- コピーライト -->

重要！
コピーライト行にある 「| Design:HTML5 UP」の部分は削除してはいけません。
書き換える際は「HTML5 UP」及びサイトへのリンクが必要です。(CC-BY 3.0より)

4.完成!

アップロードするだけ。
必要に応じてページを追加しよう!

今後の目標

• 複数ページでの構成
• JavaScript・jQueryなどを利用したリッチコンテンツ
• Perl・PHPなどでのお問い合わせフォームの作成

あとがき

書いている途中にあまり目を見張らない気がしました…
記事中「けものフレンズ」ネタが多いですが気にしないでください。
連載のくせにスローペースで申し訳ありません。
UP!
CodePenにソースを公開しました。コピペして使いたい方、動作を確認したい方はどうぞ。
(http://codepen.io/YoHaRu55/pen/oZoJOE)

改版履歴

2017.03.16 初版・第二版・第三版
2017.03.17 第四版 CodePenにソースを公開。それに伴いリンクの掲載。

「HTML5 UP!をひもとく」連載目次

• 第0回 HTML5 UP!とは?編
• 第1回 30分で目を見張るWebページを作ろう編