Weblog

CSSをはてなに移植してみた

Posted at 2005-04-07T09:02:00+09:00 in Web Design

リファラから拾ったChepooka::cssでfloatの振る舞いにトラブってる感じだったので、はてなダイアリーでもうちのサイトみたいなのできないもんかと移植してみました。こちらのエントリの内容は気にしてはいけません。

あるボックスの内容物がfloatされているボックスのみの場合、そのボックスの枠線や背景色、背景画像は内容物の高さに合わせて自動的に高さが調節されないというfloatによるレイアウトでまず間違いなく遭遇するトラブルをどうやって解決するかということになります。

うちのサイトではhtmlとbodyでそれぞれ背景画像を指定することによって、2カラムのベースを作成し、ヘッダやコンテンツの背景画像をその上に重ねることによって、上記トラブルを解決せずに擬似的に実現しています。が、はてなダイアリーではhtmlに背景画像を仕込むのは不可能らしいので別のアプローチが必要になります。

そこで、QuirksMode - CSS - Clearing floatsで詳しく解説されている、overflowを利用したテクニックを利用してみました。このテクニックは、内容物がfloatされているボックスのみのボックスに、

div#container {
  width: 100%;
  overflow: hidden;
  background-color: #f0f;
}

と指定すると、内容物の高さに合わせてきちんと背景色で塗りつぶされるというモノ。

はてなダイアリーでは、

<body>
  <table>
    <!-- はてなのヘッダ -->
  </table>
  <h1>ダイアリーのタイトル</h1>
  <div class="hatena-body">
    <div class="main">
      <!-- 本文 -->
    </div>
    <div class="sidebar">
      <!-- サイドバー -->
    </div>
  </div>
</body>

という構成になっているので、div.hatena-bodyに上記のような指定をしてやれば、本文とサイドバーの長さに関わらずキレイに下まで背景色や背景画像で埋めることが出来ます。

上記の僕のはてなダイアリーでは、本文があまりにも短すぎたりとか何とか色々あって、微妙なところで不具合があったりしますが、ベース的にはあんな感じでいけると思います。もうこれ以上はやる気はないんですが。

Recent entries from same category

同じカテゴリに分類された最近10件のエントリです。

  1. CSSで指定するフォント
  2. Linksをサムネイル化した
  3. HTML 4.01とCSS2のHTMLヘルプ
  4. pre要素へのスタイル指定
  5. よく使うライセンス・フリーのフォント
  6. CSS2 Specificationでのプロパティの出現順序
  7. ちょっとだけリデザイン @ 2006/08/29
  8. アスタリスクをプロパティ名の頭につけるというCSSハック
  9. :first-letter擬似要素と各擬似クラス絡みのInternet Explorer 6のバグ
  10. CSSコーディング・スタイル

Comments

JavaScriptに対応または有効な環境の場合、ここにはてなブックマークでのこのエントリに対するコメントが表示されます。

Weblog archives

by Month

by Category

This page was last modified on 2005-04-07T09:07:47+09:00 (in 0.100 secs).