0からHPを作成する手順と重要な要素【HTML&CSS】

全1回でHP作成を行う当コース。
HTMLとCSSだけを使って作成するまでの講義内容を紹介します。

受講前の準備

当コースでは、HTMLとCSSをコーディングするところから始めますので、必要なソフトのインストールを事前に行って頂きます。

ブラウザとテキストエディタ

まずは必要なテキストエディタ『Atom』とブラウザ『Google Chrome』のインストールを以下のページを参考にしてインストールしてください。

HPサンプル

完成を目指すHPのサンプルを用意しました。
サンプルの特徴としては以下の通りです。

  • 下層ディレクトリをなくしたミニマムファイル構造
  • Bootstrapを使わない、ゼロからの構成
  • 最小のコード量でHPを構築
  • Javascriptを使わない、簡単構成
  • Instagram、Twitter、Googleフォームなどの外部サービスの利用

見本サンプルHP

ファイルの準備

当コースでは、HTMLの基礎を学ぶため、シンプルなファイル構造にします。

  1. デスクトップ上にhpフォルダを作成
  2. 作成したフォルダ内にstyle.cssファイルを作成
  3. 同フォルダ内にindex.htmlファイルを作成
  4. 同フォルダ内に画像ファイルをダウンロード
  5. 同フォルダ内に画像ファイルをダウンロード

以上でHPを作成するファイルはすべて揃いました。

HTMLのベースコード

先程作成したindex.htmlファイルをテキストエディタで開きます。
ベースとなる以下のHTMLコードをエディタ内にコピペします。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HPのタイトル</title>
		<meta name="description"  content="HPの説明" />
		<link rel="stylesheet" href="style.css" media="screen"/>
	</head>
	<body>
	</body>
</html>

上記コード内の各HTMLタグの解説は講義内で行います。

HPを構成する重要なHTMLタグ

HTMLでは必ずと言っていいほど使われるタグを紹介します。
以下のコードはHPサンプルで使われているタグのすべてです。

<div></div>

<a href="">

<img src="">

<nav></nav>

<ul>
	<li></li>
</ul>

<table>
	<tbody>
		<tr>
			<th></th>
			<td></td>
		</tr>
	</tbody>
</table>

<h1></h1>
<h2></h2>
<h3></h3>

<p></p>

<b></b>

<br>

<footer></footer>

検索してみると、タグの総数は100以上と言われているようですが、一般的に使うのは20種類にも満たないというのがわかるかと思います。
まずは、良く使われるタグの特性を把握して、それからその他のタグを使うようにしていくといいと思います。

HPを構成する重要なCSSプロパティ

HTMLタグを組み上げてみたものの、「HPサンプルとまったく出来上がりが違う」と気付いたと思います。
実は、HTMLタグというのは単なる目印ブロックのようなもので、色や大きさ配置にはまったく影響しません。

そこで必要なのがCSSです。
どのようなWEBサイトでもCSSでデザインされており、CSSの使い方次第でおしゃれになったり、野暮ったくなったりします。

では、そんなCSSの中でも重要なプロパティを紹介します。
以下のコードはHPサンプルで使われているCSSプロパティのすべてです。

/*ブロック要素に利用*/
box-sizing: ;
background-color: #;
margin: px;
padding: px;
width: px;
height: px;
display: ;
border: ;
position: ;
overflow: ;

/*文字に利用*/
color: #;
font-size: px;
font-family: ;
font-weight: ;
list-style: ;
text-decoration: ;

/*tableに利用*/
border-collapse: ;
border-spacing: ;

/*flexに利用*/
justify-content: ;
flex-wrap: ;

無数にあるプロパティですが、実際利用するのは約20種類ほどです。
上下左右の指定やセレクタと複雑さはありますが、それも使われるものは限定されるでしょう。

それらを体に覚えこませるために、まず実際にHPを組んでみるという必要があるわけですね。

CSSの実際の使い方は講義内で解説します。

リンク先ページの作成

最近ではシングルページと言って、1ページですべての情報を公開することが増えましたが、やはり複数ページにわたるHPを作ってみたいところです。

実はこのページを増やしていく作業はとても簡単なのです。
以下の手順を行ってみましょう。

  1. index.htmlファイルを複製し、ファイル名をcontact.htmlに変更
  2. 作成したページcontact.htmlへのリンクをindex.html内に作成
  3. index.htmlにも戻れるようにcontact.html内に作成

これだけです。
実際、リンクがなくともファイルを.htmlファイルを作った時点で、そのページにはアクセスできます。
重要なのは、作成したページにリンクを通すこと。

ページを行き来するリンクは以下になります。

<a href="./index.html">Home</a>
<a href="./contact.html">Contact</a>

リンクの書き方はファイル構造によって変化するので、細かい解説は講義内で行います。

外部サービスの利用

Instagram,Twitter

以前までのHPでは、更新性ある情報は直接HTMLファイルに書き込んでいました。
現在ではそういった更新情報はブログやSNSなどが担っています。
そうした更新情報をHPに載せる方法として、外部サービスを利用しましょう。

まず、サンプルHPで利用しているコードを紹介します。

/*Instagram*/
<a href="https://instawidget.net/v/user/instagram" id="link-e49934c0775576858645b9b21ee9aa23b13ccc232c3b5e98e1ef885d9f6d242f">@instagram</a>
<script src="https://instawidget.net/js/instawidget.js?u=e49934c0775576858645b9b21ee9aa23b13ccc232c3b5e98e1ef885d9f6d242f&width=800px"></script>					

/*Twitter*/
<a class="twitter-timeline" data-chrome="nofooter" data-height="400" data-theme="light" href="https://twitter.com/qomolangma_juku?ref_src=twsrc%5Etfw">Tweets by qomolangma_juku</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これらSNSなどの情報を呼び出して表示する枠を、一般的にウィジェットまたはブログパーツと呼びます。
そうしたウィジェットを利用するサービスが無料公開されているので、積極的に使いましょう。

無料インスタグラムブログパーツ作成 | InstaWidget
Twitter Publish

Googleマップ

一般的なHPには用意されている、お店や会社の場所を表す地図。
以前までイラストなどをわざわざ描いて表示していましたが、現在はそんな手間はいりません。
積極的にGoogleマップを利用しましょう。

まず、サンプルHPで利用しているコードを紹介します。

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12844.140427681466!2d136.4455433!3d36.4083459!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf01b34181bf194c4!2z5bCP5p2-5biC5b255omA!5e0!3m2!1sja!2sjp!4v1567401939636!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

利用方法は以下のページを見ながら解説にします。

Googleフォーム

一般的なHPには用意されている、お問い合わせフォーム。
この機能はプログラミングの知識が必要なものでしたが、これも外部サービスで済ませましょう。

GoogleフォームはGoogleアカウントを持っているだけで利用できます。
さらに、アンケートとしても利用でき、

まず、サンプルHPで利用しているコードを紹介します。

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSduZFx7LMsQws89iuJxdAenk6H4cLwkKN0Y53rTENbgYn-9qg/viewform?embedded=true" width="640" height="761" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

利用方法は以下のページを見ながら解説します。

レスポンシブデザイン

スマホの普及により、HPのデザインも多様化されています。
そんな中、必須デザインとなったのがレスポンシブデザインです。

簡単に説明すると「一つのHTMLコードでPCとスマホを両立させるデザイン」ということです。
レスポンシブデザインについては、以下のページを見ながら解説します。

まとめ

シンプルなHP作成するのにそれほど時間はかかりません。
実際、HPを作る際に最も時間を要するのは構成とデザインの作成です。
これらは設計図のようなもので、それさえあれば手を動かすだけで完成するという事です。

今回学んだコーディング記述をもとに、ちょっといいなと思ったHPのデザインを真似して位置からHTMLとCSSをコーディングしてみると、良い経験を積むことが出来ます。
一つでも多くページを作成し、技術を磨いてください。

なお、コーディングの基礎を学ぶために必要な学習サイトはたくさんあるので、それらを利用するのがいいでしょう。