CSS奮闘記

日記 CSS

なんだこのIEとFirefoxの実装の違いは・・・。すべてを相対値で指定しようとするとIEではまともに表示されるが、Firefoxではガタガタ。
はてなのdelta.cssを参考にするついでに、はてなダイアリーのHTMLの記法を見てみた。ところが、fontタグやスタイルのための意味のないtableタグが使われていたり、divタグで囲まれたHTML的意味のない文字列があった(※下記の例では見栄えのために意図的にアンカーを省いている。)。また、動的にタグを挿入したりしているから仕方ないのかもしれないが、意味不明なインデントが行われていた。
適切なインデントを行って、今回の目的に不要な部分を省略してはてなダイアリーのHTMLをまとめた。

<body>
  <h1>日記名</h1>
  <div class="hatena-body">
    <div class="main">
      <div class="day">
        <h2><span class="date">2005.3.14 (Mon)</span></h2>
        <div class="body">
          <div class="section">
            <h3><span class="sanchor">■</span>タイトル</h3>
            <blockquote>
              <p>引用文</p>
            </blockquote>
            <p>本文テキスト</p>
          </div>
        </div>
      </div>
    </div>
    <div class="sidebar">
      <div class="hatena-module">
        <div class="hatena-moduletitle">最新タイトル</div>
        <div class="hatena-modulebody">
          <ul class="hatena-section">
            <li>見出しリンク</li>
          </ul>
        </div>
      </div>
      <div class="hatena-module">
        <div class="hatena-moduletitle">注目ISBN/ASIN</div>
        <div class="hatena-modulebody">
          <ul class="hatena-hotasin">
            <li><a href="/asin/4757513860">鋼の錬金術師 (10)</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

ということで、画面のレイアウト構成に使われているのは親要素div.hatena-bodyとその子要素div.main, div.sidebarということがわかった。これを元にスタイルシートを眺めれば何かわかると思う。