先日公開したわかりやすい技術文章の書き方にid:vantguarde先生から、
HTML5といってるけどなんか違うなあ。sectioning contentの使い方に問題が多い。
http://b.hatena.ne.jp/vantguarde/20090817#bookmark-15373666
と赤点をいただいたので、再試ということで書き直しました。リライトしたページはすでに公開中。
違和感を感じるところ
あくまでも自分の感覚としてですが、なんとなく「このへんはもう少しまともな書き方ないのかな、でもわからん」というところを何点か。
<header role="banner" id="banner"> ... <aside id="abstract"> <p>このページは、プログラムやコードなどの主に技術文書を書く方々のために、 分かりやすい文章を書くためにはどうすればよいのかについて説明しています。</p> <ol> <li>自分が伝えたいこと・訴えたいことを誤解しないように相手に読んでもらうにはどうするべきか。</li> <li>文章を書くにあたって知っておくべきルールは何か。</li> <li>文章を書く前にどのような手順を踏めば、分かりやすい文章を作れるか。</li> </ol> <p>などについて参考にしていただければ幸いです。</p> </aside> ... </header>
headerにasideが入ってるとか…。
<div role="main" id="main"> <article> <section> <header> <h2 id="before_write">文章を書く前に</h2> <p>文章を書く前に次のことをしっかりとイメージしておく。</p> </header> <ul> ... <li>読み手が真っ先に知りたいことは何か。</li> </ul> </section> ... </article> </div>
article、sectionと来て、さらにheaderとか…。
この2ヶ所はどうすりゃよいのかイマイチ分かりませんでした。
CSSのこと
フレームっぽい（違）、ウィンドウサイズが小さいと横スクロールが出るなどのご意見をいただいたので、修正。
フレームっぽいのは僕自身の使いやすさを優先してなので、我慢してください[謎]。ウィンドウの問題に関しては、レイアウトの横幅をem指定ではなく、%指定に直しました。
ちなみにリデザイン中
あまり変わっていませんが、
- なんとなく
- 記事ごとにカテゴリをつけるようにした[今更]
という理由によります。
フッターというかサイドバーはこれからです。
ブクマコメントに対する返信
div#menu, div#main は必要なのだろうか。/ h2を囲むだけのようなheaderは冗長なような気がした。
http://b.hatena.ne.jp/kits/20090825#bookmark-15513135
div#menuのほうは左ナビゲーションを1つのブロックとして構造化しておきたいと思ったからです。でも、div#mainのほうはご指摘のとおり必要ないかもしれないです（article要素がメインコンテンツであることを明示できてるわけだし）。
headerの使い方は悩ましいです…。一番はじめのセクションの
<header> <h2 id="before_write">文章を書く前に</h2> <p>文章を書く前に次のことをしっかりとイメージしておく。</p> </header>
の使い方は悪くないと思うんです。ただ、ほかのheading+h2の使い方に関しては、確かに冗長かもしれないですね。
