HTML5の基本ページ作成

HTML5&CSS3レッスンブック

HTML source

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>道頓堀の誕生 - STUDY LOG</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header>
  <h1>STUDY LOG</h1>
</header>

<article>
  <h1>道頓堀の誕生</h1>

  <p>1612年から工事を開始。1615年に完成。</p>

  <p>当初は安井道頓が担当していたが、大坂の陣で戦死。従弟が引き継ぐ。
  完成後、道頓がかなりの私財を投じていたことなどが評価され道頓堀と命名された。</p>
</article>

<footer>
  <small>Copyright &copy; STUDY LOG, all rights reserved.</small>
</footer>

</body>
</html>

CSS source(style.css)

body { font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif }
h1   { font-size: 38px }
p    { line-height: 1.5 }

DOCTYPE宣言

<!DOCTYPE html>

HTML5では、たったのこれだけ。シンプル。

htmlタグのlang属性

HTML5では、コンテンツの言語指定が推奨されているとのこと。

<html lang="ja"> <!-- 日本語 -->
<html lang="en"> <!-- English -->

metaタグのcharset属性

<meta charset="UTF-8">        <!-- UTF-8 -->
<meta charset="Shift_JIS">    <!-- Shift-JIS -->
<meta charset="EUC-JP">       <!-- EUC-JP -->
<meta charset="ISO-2022-JP">  <!-- JIS -->

文字エンコードの指定。シンプル。 以前は・・・

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

titleタグ

<title>ページタイトル</title>

省略は認められていない。必須！

articleタグ

<article>
  <h1>見出し</h1>
  <p>段落１・・・</p>
  <p>段落２・・・・</p>
</article>

HTML5で追加されたタグ。記事をマークアップ。ここでいう記事とは、１つのコンテンツとして成立/完結している部分のこと。 Webサービスやアプリでarticleタグで括られた部分を抽出するものが多いので、実質的にかなり重要なタグ！

headerタグ

<header>
  <h1>サイト名</h1>
</header>

HTML5で追加されたタグ。ヘッダをマークアップ。

h1タグの重複 と セクション について

HTML5では、構成するパーツのまとまり(セクション)ごとにh1～h6タグを使用できるので重複OK。セクションを示すタグは、以下の５つ。

  • bodyタグ
  • articleタグ
  • navタグ
  • asideタグ
  • sectionタグ

具体例は下記HTMLソースを参照。

<body>

<header>
  <h1>サイト名</h1> <!-- bodyタグ(セクション)のh1タグ(見出し) -->
</header>

<article>
  <h1>記事１</h1> <!-- articleタグ(セクション)のh1タグ(見出し) -->
　　　：
</article>

<article>
  <h1>記事２</h1> <!-- articleタグ(セクション)のh1タグ(見出し) -->
　　　：
</article>

</body>

footerタグ

<footer>
  <small>Copyright &copy; STUDY LOG, all rights reserved.</small>
</footer>

HTML5で追加されたタグ。フッタをマークアップ。

smallタグ

<small>Copyright &copy; STUDY LOG, all rights reserved.</small>

以前は文字を小さくするタグだったが、HTML5から意味合いが変更。免責・コピーライト・但し書きなどを示すタグに。

headerタグとfooterタグは１ページに１つだけ？

No! 見出し(h1～h6)タグと同様、セクションごとにheaderタグやfooterタグを置くことができる。

line-heightプロパティ

body { font-size: 16px; line-height: 1.5 }

上記のような場合、文字の高さは16pxなので、行の高さは 24px(=16px×1.5)となる。よって下記のように書いても同じ表示になる。

body { font-size: 16px; line-height: 24px }

「行の高さ」と「文字の高さ」の差は8pxだが、余白は文字の上下に4pxずつ表示される。 f:id:yappoi3:20161014171527p:plain