数で合理的にデザインする - サイズ編 で少し書いたfont-sizeについての補足です。

どのくらいの文字サイズで見られているかは，ブラウザとその設定によってまちまちです。でも，せめてデフォルトの状態では意図したレイアウト，フォントサイズで見てもらいたい，という願いもないわけではありません。font-sizeの指定をどうするか，ちょっと考えてみました。

枠や背景が消えたり，途中で切れたりしたことはありませんか。

floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。

左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。

見出しのふり方，マークアップについて考えてみました。

h1～h6の見出しの要素。サイト全体を通して一貫性のある使い方をしたいと思いました。見出しだけを抜き出して並べたときに，矛盾なく全体の構成がよくわかるようなものを想定しました。

メニューを「リンクのリスト」ととらえて，ul，liでマークアップしているところが増えていますね。

本文中のまとまった意味を持つ一連の文章なら，おもに<p> ...... </p>でマークアップしますが，メニューはそれとは役目も意味も違います。やはり「リスト」ですね。MovableTypeのデフォルトのテンプレートも，ul，liでマークアップされていました。

dl，dt，ddの定義リストで写真をマークアップしてみました。

八ヶ岳・甲斐駒ヶ岳 の記事に写真を何枚か載せました。写真とその説明（キャプション）のセットでは，dt要素によって説明する対象を示し，dd要素にその説明を書くと，文書の構造がはっきりします。

見出しの要素h1～h6ってどんなふうに使ってますか。

(X)HTMLには見出しの要素としてh1，h2，h3，h4，h5，h6があります。この見出し，ぼくは今までずいぶんいい加減に使ってました。「この部分はそんな大きな文字じゃなくていいけど，太字にはしたいな。じゃh4ね」とか。見出しの階層とか，出現順にはあまり気をつかっていませんでした。

タイトルを画像にすると，ギザギザのフォントよりかっこよく見えたりしますね。

ブログではふつう，ブログタイトルをh1要素に入れるようになっています。h1要素はそのページで最も大きな見出しですから，SEO上も，音声ブラウザなどに対しても，タイトルがテキストとして書かれていることが望ましいでしょう。
でも，タイトルを画像にしたとき，画像に描かれたタイトルとh1要素のテキストが同時に表示されるのはちょっと困りますね。h1要素のテキストは残すのだけれど，表示させない方法を紹介してみます。