「はてなダイアリー」について RSSフィード
 

2011年7月15日をもちまして、はてなサポート掲示板は新規投稿の受付を停止致しました。
今後は、人力検索はてなの「はてなの使い方」カテゴリーをご利用ください。
※ご要望や不具合のご報告ははてなアイデア、はてなからのご返信が必要な質問はお問い合わせページをご利用ください。

484YuichirouYuichirou   483  Re5:サイドバーの表示

id:blue8823:detalさん

わかりました。実は bbs:1:482 に書いたCSSソースは汎用性の高いものだったりします。

まず、div.hatena-body の設定を以下に換えてください。

div.hatena-body {
  position: relative;
  margin: 0 auto;
  text-align: left;
}

あとは、

table#banner, h1, div.hatena-body {
  width: 700px;
  max-width: 100%;
}

という設定を一番最後に書くだけで、1.のパターンが完成です。この場合、古いブラウザでは常に幅700pxで表示、新しいブラウザで表示領域が狭い場合は領域いっぱいに表示されます。

あるいは

table#banner, h1, div.hatena-body {
  width: 100%;
  max-width: 700px;
}

とすると、新しいブラウザでは同じですが、古いブラウザでは常に領域いっぱいに表示されます。

また、単純に

table#banner, h1, div.hatena-body {
  width: 700px;
}

とすれば、2.の幅固定表示になります。


このような柔軟な切り替えができる点が、CSSの素晴らしいところですね。

返信2008/03/04 11:24:23
  • 484Re5:サイドバーの表示 YuichirouYuichirou 2008/03/04 11:24:23
    id:blue8823:detalさん わかりました。実は bbs:1:482 に書いたCSSソースは汎用性の高いものだったりします。 まず、div.hatena-body の設定を以下に換え ...
    • 486Re:Re5:サイドバーの表示 blue8823blue8823 2008/03/04 22:30:37
      わがままを言ってすいません……。 本当に、ご親切に対応していただきありがとうございます。 上記の方法を試してみたのですが、なぜかテーブルの表示がぐちゃぐちゃになってしまいます(>_<) うー ...