[17-1] HTML5の新要素でページ全体を組もう

今回から、HTML5で新しくできたセクション要素 <article> <aside> <section> <nav>を使ってページを組んでみましょう。
また、セクション要素ではありませんが<header><footer>という新しい要素も使ってみましょう。

使用する要素 <article> 〜 </article>
<aside> 〜 </aside>
<section> 〜 </section>
<nav> 〜 </nav>
<h1〜h6> 〜 </h1〜h6>
<header> 〜 </header>
<hgroup> 〜 </hgroup>
<footer> 〜 </footer>
<address> 〜 </address>

まずは下のようにシンプルな構成のページを作ってみます。
今日は、ざーっと全体のHTMLの構成を眺めてみるだけ。次回から新要素の説明をします。

このサンプルはCSS(ver.2)で簡単にレイアウトを組んでいます。
←クリックでサンプルHTMLが開きます(別ウィンドウで開く) 。

★上のサンプルとHTMLは同じで、CSS3の新プロパティでレイアウトしたのが
 下のサンプルです。画像なしでここまでできます。後日CSSの使い方を解説します。

←クリックで別ウィンドウで開く。
(ただし残念ながらIE8までは見れません。IE9以上かFirefox, Chrome, Safariで見てくださいね)

CSS3では、ボックスの角丸や、ボックスやテキストにシャドウも付けられます。グラーデーションは、線形グラデーションに加えて、前回紹介できなかった「円形(放射状)」も使ってみました。

本日のサンプルのダウンロードはこちら

★このサンプル画像をクリックすると、HTMLファイルが開きます。
★開いたHTMLのソースを見てもらえばOKですが、下記から一式をzipでダウンロードできます。
→本日のサンプル(sample17set.zip (3k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

HTML5でHTML文書がシンプルに

HTML5で加わった新要素のおかげで、HTML文書がすっきりシンプルに書けるようになりました。

こんなレイアウトを作りたい場合。

いままでのHTML4やXHTML1ではこんなかんじで、
div要素でブロックを区切り、それぞれにid名を付け、CSSでレイアウト指定をするというやり方でした。
この方法ですと、作り手によってボックスの名前はバラバラですね。みんな自分が覚えやすい名前にしますから。
それに、1つ1つのボックスの記述が長い。シンプルではありません。

HTML5では、特定の用途用の要素が追加されました。
div要素を使わないで、この新しい要素で構成できます。
ナビゲーション部分は<nav>要素。メインコンテンツ部分は<article>。
サブ的なコンテンツ部分は<aside>。
各コンテンツ内の「章・節・項」を区切る<section>要素があります。
セクション要素は、h1〜h6の見出し要素と密接な関係があります。
ヘッダ・フッタ部分は、そのままズバリ<header><footer>という要素が使えます(これはセクション要素ではないんですけどね。詳細後日)。

さっそくHTMLソースを見てみましょう

本日のサンプルのHTMLソースを見てみましょう。
(ちっと長いけど、シンプルですからじっくり読んでみてください。)

どうでしょう。上から順番に<header><nav><article><aside><footer>と並んでいるのがわかりますよね。

各要素の説明は次回にやりますが、
このHTMLソースの要所を2ヶ所、押さえときます。

CSSなしのときにグローバルナビゲーションだと知らせる工夫

まず1つ目の要所。 上から8行目の指定は、外部CSSファイルを読み込ませています。
<link rel="stylesheet" type="text/css" href="css/sample17.css" media="all">

このHTMLファイルをCSSなしで見るとこのようになります。

←クリックでサンプルHTMLが開きます(別ウィンドウで開く) 。

この↑CSSなしのサンプルで、ナビゲーションのところに「グローバルナビゲーション」と大きく表示されているのがわかるでしょうか。これは見出し要素 h1です。
CSSでこのh1をdisplay :noneで非表示にしてます。 CSSで視覚的にレイアウトを見ている時は表示されず、CSSなしなら表示されるようにしているわけです。

CSSレイアウトを施してある時は、ヘッダの下に大きく目立つリンクボタンとして配置するので、グローバルナビだとわかりますが、CSSなしの場合、単なるリスト要素で組んだリンクですから、目立ちません。それをわかるようにしてあげるのもアクセシビリティです。

IEにHTML5の新要素を理解させるソース

それから2つ目の要所です。9,10,11行目は、前にもやった
「IE8までのブラウザにHTML5の新要素を理解させるオープンソース」のリンクです。
「Google code」提供。 <head>〜</head>の中に入れます。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

[if lt IE 9] と [endif] で囲まれていますが、これはIEだけの仕様で、
この記述によってIEだけが「もしIE9未満だった場合にのみ実行する」と解釈するそうです。

簡単なCSSでざっとレイアウト

では次は、CSSでざっとレイアウトを組んでみましょう。

こんなレイアウトを作りたいので、メインブロック(= article要素)サイドバー(= aside要素)横に並べるのがミソ。このサンプルではCSSの float を使って横に並べました。
あとは、各ブロックがわかりやすいように枠線をつけてみましたよ。

★HTMLの各要素は上から順に並ぶのがデフォルトです。これを横に並べるには、CSSで「float」などの指定をしてあげる必要があります。

サンプルのCSSソースを見てみましょう。

id名やclass名がいっさい出てこなくて、すべてHTML要素だけでCSSが指定できているのがわかりますね。最低限必要な部品がHTML要素として準備されているから、CSSの記述もシンプルになりました。

次回予告

今日はざざーっと全体の構成を眺めてみました。

次回は、4つのセクション要素 <article><aside><section><nav> についてまとめてみます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

No title

はじめまして。
最近HPをいじらなければならなくなったので参考にさせて頂いています。
このページの「nav ul h1」の記述では左にサイドメニューが寄らなかったので、
なぜかなと思っていたらサンプルページの方では「nav h1」になっていました。
後者では問題なくサイドメニューを右に寄せることが出来たので、またお手隙の際にでもご確認頂ければ幸いです。

Re: No title

ん〜っとね、通りすがり さんのコメントを何度も読み返しましたが、言いたいコトがわからず。
「何を」右に(左?)に寄せたのかな?
ただ「サイドメニュー」ということは、 aside要素で囲んだ(カテゴリーやアーカイブのメニューがある)部分を言ってるのだと仮定して書きますね。

サンプルの aside要素内には nav要素は使っていません。
nav要素を使っているのは、グローバルナビゲーションの部分のみ。
(headerの直下の「HOME」「MENU1」...などのメニューがあるところ)
なので、「nav ul h1」を「nav h1」にしたら「サイドメニュー」を右に寄せることが出来た、なんてことは、ありえません。
(というわけで、「何を」右寄せにできたのかな〜?と思っているわけです)

aside要素を右に寄せるには、CSSの float プロパティを使って、float: right と指定していますよ。

また、nav要素内のリストを右寄せにするなら、今は nav {text-align:center;} になっているCSSの指定を text-align:right;(ひだり寄せなら text-align:left; )にします。

──────────
ところで(コメントとはあまり関係ないかもしれませんが)、
おかげさまで、サンプルのソースミスを発見しました。

ダウンロード用のサンプルの「honttoni17.html(CSSあり)」のほうは、グローバルナビの h1要素が ul の中に入っていましたが、これは大間違い。
「ul要素」の中に「h1〜6」が入っちゃダメですね。
グローバルナビの h1 はCSSで display:none にしていますので、プレビューでミスに気付かず。
(CSSなし(honttoni17nostyle.html)は、ちゃんと h1 が ul の外に出ていたのが、我ながら不思議)

正しいHTMLの記述はこちら。h1 が ul の外に出ていること。
<nav>
<h1></h1>
<ul>
<li></li>
</ul>
</nav>

よって、CSSのセレクタも「nav h1」のほうが正解です。
このあたりの記述ミスで、混乱させてしまったのなら、ごめんなさい。
サンプルすべてと、記事本文のソースを修正しておきました。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.