HTML5:sectionとh2の関係

<section>は入れ子に出来たっけ? とよく迷うのですが出来ます。
W3CのHTMLチェッカーで意外なエラーを出されてしまったのでメモ。
<dt>や<dd>の中に<h2>を入れてはいけないらしく、<dt><dd>を使わず普通に<section>で囲んだほうがいいらしい。

<h2>と<section>の関係で、

<body>
<h1>最高レベルの項目</h1>
<section><!-- 空のsection -->
	<section><h3>この場合ネストすると強制的に第3レベルの項目にされるらしい</h3></section>
</section>

という書き方にしないといけないらしいのですが、さすがに直すのが大変すぎて挫折・・・。
HTML5は複雑。

CSS:○番目の子要素、最初・最後の子要素だけ設定する方法

HTML5になってから随分と便利になったものだな〜と日々感心しているのですが、その中でも「これは便利!」と思ったCSSです。
以前ならJavaScriptでチマチマと書いていたのですが、今はCSSだけで書けるんですね〜、スゴいです。

指定した子要素だけに設定をしたいなら、

タグ:nth-child(n)

子要素のうち最初と最後だけに設定をしたいなら、

タグ:first-child
タグ:last-child

と書けば実現できます。

例えば動的サイトで<li>タグを使っていて、上下に区切り線を入れたい場合、しかもそのリストの数が可変だったりするとちょっと面倒くさいです。

(例)HTML

<ul>
	<li>あ</li>
	<li>い</li>
	<li>う</li>
</ul>
<ul>
	<li>hoge</li>
	<li>hage</li>
</ul>

スタイルシートをこんな風にしてしまうと、

<style>
ul{
	margin:0 0 20px 0;
	padding:0;
}

li{
	list-style-type:none;
	border-top:solid 1px;
}
</style>

CSS 子要素-1
一番下のラインだけなくなってしまうので一番下にだけ下線の設定を追加します。

li:last-child{
	border-bottom:solid 1px;
}

CSS 子要素-2
では、2番目の上の線だけ外してみると、

li:nth-child(2){
	border-top:none;
}

CSS 子要素-3
こんな感じになります。
CSSだけで出来るようになるとは! とても便利です。

HTML5の基本

HTMLを新規に作る度にいつも忘れるので自分用にメモです。
HTML5の基本構造部分のタグ。
HTML5から入った人は気にしなくていいので羨ましいのですが、長年この業界にいると使い分けが面倒でよく忘れます。

<section> : セクション(迷ったらこれ)
<nav> : ナビゲーション
<article> : 記事
<aside> : 余談・補足情報
<header> :ヘッダ
<footer> : フッタ

これらは必須ではないしdivでも構わない、らしいです。
だったらわざわざ分けるなよ、と言いたいのですが、作ったのは見やすいからくらいの理由でしょうかね。

以下、HTML5で省略型になったタグ。

<!DOCTYPE html>
<style>
<script>
<noscript>

以前は

<script type="text/javascript" src="js/common.js"></script>

とか書いていたくせに、JavaScriptの場合は

<script src="js/common.js"></script>

だけでよくなりました。
今更なのですが、混ぜこぜにする人が多いので、「ちゃんと書け!」というのが本音です・・・。

HTML5のひな形

自分用ですが、サイトを作るときいちいちヘッダを探すのが面倒なのでメモ。
下のはスマホ用HTML5に使うパターンです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="サイトの説明文">
<meta name="keywords" content="キー1,キー2,キー3">
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/hoge.css">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<title>サイト名</title>
</head>
<body>

<h1>サイト名</h1>

</body>
</html>

ちなみにAndroidディベロッパー向け公式サイトでは「ヘッダにこれ↓を入れてね」と言っているようです。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Best Practices for Web Apps
http://developer.android.com/guide/webapps/best-practices.html

でもこれはHTML5用ではないです。

PC用ブラウザでHTML5はまだまだ対応が追いついていないので、「PC用とスマホ用はCSSで分けちゃえ」という場合、現時点ではHTML5は使わないほうがいいと思います。

でもスマホに特化している場合はHTML5の方がいいみたいです。
どっちみち端末依存は避けられないし、HTML5独特の動きのあるサイトの方がいいと思うので。