この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


ワードプレスのためのHTML5+CSS3によるレスポンシブ×フラットデザイン 第三回目 基本HTMLを作る

今回は実際にHTMLファイルを作成します。
HTML5で作る予定なので文字コードはUTF-8で記述し、UTF-8形式で保存します。
編集にはテキストエディタを使います。

テキストエディタはなんでもいいのですが、UTF-8形式で保存できるものが必要です。
フリーソフトでもテキストエディタがいろいろとあるので必要であればダウンロードして下さい。
Windows付属のメモ帳でもOkです。

▼無料HTMLエディタ

無料HTMLエディター一覧。ウェブページを構成するHTML言語をサポートするテキストエディターの拡張版ソフト。テキストエディターでもホームページ作成ができますが、HTMLエディター

▼HeTeMuLu Creatorはおすすめです

HeTeMuLu Creator のスクリーンショット。XHTML、CSSに対応したHTMLエディタ。HTMLファイルはドラッグ&ドロップ、またはソフト左ペインに表示されるエクスプ

で、基本HTMLですが、まずは中身がまったくない外枠を作ります。
HTML5なのでこんな感じです。ファイル名は「sample01.html」です。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SAMPLE</title>
</head>
<body>

</body>
</html>

ブラウザで開いてみても中身がないので真っ白です。

▼サンプル

フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

次にここにヘッダー、コンテンツ、サイドバー、フッターの要素を追加します。
要素は「<div>タグ」で記述します。「<!–  –>」はコメントで「<!–」「–>」に囲まれた部分は無視されます。
編集しやすいように必要に応じてコメントを残しておきます。また改行やタグも無視されるので適度にインデント(字下げ)改行をして可読性を高く保ちます。ファイル名は「sample02.html」です。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SAMPLE</title>
</head>
<body>

<!-- /// コンテナ /// -->
<div id="container">

	<!-- /// ヘッダー /// -->
	<div id="header">
	ヘッダー部分
	</div><!-- #header -->

	<!-- /// コンテンツ /// -->
	<div id="content">
	コンテンツ部分
	</div><!-- #content -->

	<!-- /// サイドバー /// -->
	<div id="sidebar">
	サイドバー部分
	</div><!-- #sidebar -->

	<!-- /// フッター /// -->
	<div id="footer">
	フッター部分
	</div><!-- #footer -->

</div><!-- #container -->

</body>
</html>

▼サンプル

フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

中身を見ると素っ気ないですね。
しかし、ソース(HTMLの中身)をみるとワイヤーフレームで決めたIDを記述する方法は非常にシンプルだということが分かります。例えばヘッダー部分をみてみます。コメントをなくすとこんな感じです。

[note]<div id=”header”>
</div>[/note]

これを見るとコンテンツやサイドバーなども全て同じ法則性があることが分かりますね。
「<div>」「</div>」はセットで使います。「id=”header”」という部分は属性と呼び、その要素(タグ)がどのような働きをするか決めます。「属性名=属性値」という関係で、=で結んで「値」を決めます。
「color=”red”」とするとカラー属性に「red」という色を指定することを意味します。属性は半角スペースで区切り複数指定することもできます。

また、よく見ると「<div id=”container”>」という記述がありワイヤーフレームでは決めていなかったのですが、追加されています。このコンテナ(container)はコンテンツ全体を包んで余白や行揃えなどを設定する時に使う外枠です。

IDを割り振ったHTMLですが、まだそれがどのような働きをするのか決まっていません。
各要素の見え方や位置などはCSSに記述します。CSSは別ファイルに記述します。
まずは分かりやすいように各要素に色を付けてみます。
サンプルでは「style.css」というファイル名とします。HTMLと同様にUTF-8形式で保存します。

#header
{
	background-color: #bce0f8;
}

#content
{
	background-color: #e8ee98;
}

#sidebar
{
	background-color: #fcdae4;
}

#footer
{
	background-color: #eaeaea;
}

このCSSファイルをHTMLから呼び出すために以下の記述を加えます。

色分け
色分け

[note]<link rel=”stylesheet” href=”style.css”>[/note]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<title>SAMPLE</title>
</head>
<body>

<!-- /// コンテナ /// -->
<div id="container">

	<!-- /// ヘッダー /// -->
	<div id="header">
	ヘッダー部分
	</div><!-- #header -->

	<!-- /// コンテンツ /// -->
	<div id="content">
	コンテンツ部分
	</div><!-- #content -->

	<!-- /// サイドバー /// -->
	<div id="sidebar">
	サイドバー部分
	</div><!-- #sidebar -->

	<!-- /// フッター /// -->
	<div id="footer">
	フッター部分
	</div><!-- #footer -->

</div><!-- #container -->

</body>
</html>

▼サンプル

フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

背景に色をつけただけなので面白みがなにもありませんね。
でもとりあえずは、HTMLとCSSの関係が理解できたと思います。

関連記事