【HTML/CSS】HTML5とCSS3についての考察

技術についてはあちこちで触れられているので多くは語らないとして。


「しばらくは<div>で基本レイアウトをする考え方は大きく変わらない」というのが個人的な認識になりそうです。

悩むHTML5タグ<article>と<section>

解説と理解が人により幅があるカンジですが、基本的に<div>で配置→必要に応じて内部に<article>や<section>を配置・・・がしばらく妥当な方法になるかと思います。

本来的には<section>や<article>で記載された記事を、レイアウト目的で<div>で囲む、という考え方なのでまるで逆なのですが、リセットCSSを用いても<section>や<article>の挙動がまちまちになったりする現象に遭遇しました。

<section>の立ち位置

書籍くらいの複雑な書式を採用したい場合には便利なのですが、<h1>～<h6>が残っている状況でわざわざ<section>の入れ子を使う方法にメリットがあるのか・・・？かなり微妙な認識です。

逆に書籍、とくに解説書の類にありがちなレイアウトで

「本文」
「本文横の解説記事」
「ページ下のTIPS」

など上下関係とは別の文書構造をもっている場合は良いのかも。
EPUBを作ろうとして汎用的なコーディングを探してみた時期になやんだのがこの点でした。

<nav>の使いどころ

いわゆるメインのナビゲーションに使うわけですが<section>や<article>と異なり何度も登場させることができません。

よくある３カラムレイアウト(上と左にナビゲーションが並ぶ)のときどうしようかなー？

今のところ<aside>を使って左メニューを配置して「無くても文章的には問題ないよ」アピールする方向にしてみてます。正解とは思いませんが（＾＾；

<header>と<footer>

block要素に指定しても挙動がまちまち？

直接<div>と同じ要領でwidth:100%配置をして、<p>や<div>で題字など配置する部分を記事コンテナと同じ幅で中央寄せ・・・ということがなんか微妙にうまくいかない。

<div>で事前に配置を確定してから記事になる部分を<header><footer>で囲んだほうがレイアウト破綻に悩まず済む模様。。


まだまだ調査中です。。