一歩ずつ学ぶ

最終更新日:

HTML5入門: 1カラムレイアウトのひな形を作ってみる

まずは単純な1カラムレイアウトのひな形を作ってみます。

  • ヘッダー領域
  • メイン領域
  • フッター領域

この3つの領域が一列に並ぶレイアウトです。

HTML5のひな形からスタート

前回作成したHTML5のひな形からスタートします。 (前回記事: HTML5入門!基本中の基本、HTML5のひな形をつくる

これを一旦保存しておいてください。 文字コードはUTF-8、ファイルの拡張子は.html、 ファイル名は何でも構いません(例: sample.html)

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

</body>
</html>

スタイルシートを指定

スタイルに関してはHTMLファイルとは別にCSSファイルを作成して参照するようにします。 <head>~</head>の中に<link>タグを記述してスタイルシートを指定します。

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

</body>
</html>

<link>タグは外部ファイルを参照する際に使うタグです。 外部ファイルとはHTMLファイル、CSSファイル、RSSファイル等のことです。

rel属性とhref属性は必須の属性です。 type="text/css"については記載がなくてもかまいません。 rel属性でstylesheet、href属性でファイルのURLを指定します。

ここではCSSファイルのファイル名をstyle.cssとしています。 HTMLファイルと同じフォルダにstyle.cssという新規ファイルを作成してください。 文字コードは同じくUTF-8です。

全体を囲う領域 container

これから先は<body>~</body>タグの中に記述していきます。 表示部分を短くするために今後は<body>~</body>以外の部分は省略します。

<body>

この中に記述していきます。

</body>

まず全体を囲う領域を作成します。div要素を使い、idをcontainerとします。 全体を囲う領域としてcontainerという名前は、よく使われる名前ですのでここでもそうします。

<body>
<div id="container">

</div>
</body>

ヘッダー領域 header

次にヘッダー領域を作成します。div要素を使い、idをheaderとします。 先ほど記述したcontainerの中に記述します。 ヘッダー領域にはサイトタイトル等を記述します。

字下げした方が見やすい方は字下げしてください。 ここではスペースを2ついれています。

<body>
<div id="container">

  <div id="header">header領域</div>

</div>
</body>

メイン領域 main

メイン領域を作成します。div要素を使い、idをmainとします。 メイン領域に本文を記述します。

<body>

<div id="container">
  <div id="header">header領域</div>

  <div id="main">main領域</div>

</div>
</body>

フッター領域 footer

フッター領域を作成します。div要素を使い、idをfooterとします。 フッター領域にはCopyright情報等を記述します。

<body>
<div id="container">

  <div id="header">header領域</div>

  <div id="main">main領域</div>

  <div id="footer">footer領域</div>

</div>
</body>

これでHTML部分の作成は終了です。 containerの中にheader、main、footerが並んでいます。下図のようなイメージです。

1カラム

HTMLファイルのまとめ

HTMLファイル全体をまとめると下記の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">

  <div id="header">header領域</div>

  <div id="main">main領域</div>

  <div id="footer">footer領域</div>

</div>
</body>
</html>

CSSを記述

ここから先はCSSファイルのstyle.cssに記述していきます。 エディタ等でファイルを開いておいてください。

containerの横幅と中央表示

id="container"と指定したdiv要素に対してスタイルを設定します。 まずはcontainer部分の横幅を720pxに指定します。

#container {
  width: 720px;
}

次にcontainerが中央に表示されるように指定します。 margin: 0 auto;とすることで、上下の余白が0px、 左右の余白が自動調整されて中央に表示されます。

#container {
  width: 720px;
  margin: 0 auto;
}

headerの境界線

id="container"と指定したdiv要素に対して境界線を設定します。 この境界線はそれぞれの領域(header、main、footer領域) がどこからどこまでなのかを見やすくするために一時的につけているだけです。 最終的には消します。

ここでは直線、幅が1px、黒色の境界線を指定します。 自分の好みで色等は自由に設定してください。

#header {
  border: solid 1px black;
}

mainの境界線

id="main"と指定したdiv要素に対して境界線を設定します。 直線、幅が1px、赤色の境界線を指定します。

#main {
  border: solid 1px red;
}

footerの境界線

id="footer"と指定したdiv要素に対して境界線を設定します。 直線、幅が1px、青色の境界線を指定します。

#footer {
  border: solid 1px blue;
}

CSSファイルのまとめ

以上でCSSファイルstyle.cssの記述は終わりです。 先ほど記述した4つの部分をまとめると以下の通りです。

#container {
  width: 720px;
  margin: 0 auto;
}

#header {
  border: solid 1px black;
}

#main {
  border: solid 1px red;
}

#footer {
  border: solid 1px blue;
}

実際に表示してみる

作成したHTMLファイルをブラウザで開いてみてください。 次のように表示されていればOKです。
表示を確認: sample.html

↑ PAGE TOP