タグ

ブックマーク / mb.blog7.fc2.com (5)

  • オートスクロールの効かないdivにユーザースタイルシートで対処

    ブログデザインの好みについてちょっといわしてもらいます あとCNETだとかITMediaだとかそれ系の企業が運営してるITニュースサイトで腹立つのが、マウスのオートスクロールが効かないやつ。 文読みながらスクロールバー動かすのがめんどくさいのでオートスクロールしようとしてホイールボタン押すと(俺はホイールボタン押しでオートスクロールするように設定してる)、効かないんですよ。 そんでもうブラウザの画面ギリギリはじっことかを押すと出来たりする。 DIVによって、オートスクロールが効くやつと効かないやつがあるんですな。 CSSでoverflow:hiddenなどが指定してある部分では、IE6でオートスクロールができないようです。 自分もブログのデザインをするときにはよくやるんですが、overflow:hiddenを指定しておけば、 コンテンツ領域をはみ出す部分(大きな画像など)があっても、それ

    Nean
    Nean 2006/06/26
  • FC2ブログのプラグイン変数まとめ

    てんぽ: FC2ブログのプラグイン変数まとめ CSSHTML、FC2ブログのカスタマイズ、共有テンプレートなど テンプレをプラグインに対応させるべく、散在するテンプレート変数マニュアルを参照していたけど、面倒なので自分でプラグイン用リファレンスを作りました。 FC2ブログ プラグイン用変数リファレンス(非公式版) 以下、これを作っていて思ったことなど。 FC2ブログでは当初より投稿時の自動改行が(<br>ではなく)<br />に変換されるので、テンプレはXHTML準拠になるように書いてきた。 ところが、2005年6月に追加された絵文字機能、8月のコメント時の絵文字・装飾機能で置換されるimg要素は閉じられていない(また、絵文字のimg要素には適切な、すわなち空の、alt属性もない)。 このため、自動改行を有効にしつつ絵文字を使ってしまうとValidなHTML/XHTMLにすることができな

    Nean
    Nean 2006/05/04
  • CSSレイアウトの定石 WinIE6バグ回避法

    CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました(つまり回避法を用いない場合にどんなバグが発現するか)。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう (ブロックレベル要素を内包するボックスにはpaddingを指定しない。) 左右ボーダーとパディングを設

    Nean
    Nean 2006/04/07
  • ブログでCSSによる段組レイアウトが難しい理由

    CSSで2カラムなどの段組レイアウトをやろうとすると、ブログではページ(表示モード)によって左右の段(カラム)の高さが変わるため、なかなか思ったようなレイアウトができません。 たとえば以下のような「典型的」な(しかし実は難しい)レイアウトを実現したいとします。 cfdn_06 hananeko 上のふたつは、サイドバーと記事の領域を「ボーダー」や色で分割し、しかもその境界線がページの最下部まで続くレイアウトの例です。 tableを使えば簡単なこのレイアウトは、CSSでやろうとすると、たいていつまずきます。すわなち、 記事とサイドバーの色分け、あるいはボーダーが最下部まで続かない 段組をfloatでやるにせよ、positionでやるにせよ、背景やボーダーを設定するのはブロックレベル要素(div)なので、divの内容が終わったところで背景色やボーダーが途切れるのは当然です。 All About

    Nean
    Nean 2006/03/02
  • floatは「回り込み」ではない:てんぽ

    てんぽ: floatは「回り込み」ではない CSSHTML、FC2ブログのカスタマイズ、共有テンプレートなど 「CSSのfloatプロパティは『回り込み』させるものである」とよく説明されますが、それは特定条件下での表示結果がそのように見えるだけであって、あまり正確ではありません。 「回り込み」という表現はfloatを使いこなすうえで、語弊になっていると思います。 floatとは、通常の流れ(normal flow)から取り除き、左(または右)に寄せるです。 floatは「回り込み」ではない <p> <img src="xxx.jpg" alt="floating image"> 「回り込む」テキスト </p> このときimg要素を左にフロートさせた(float:left)なら、後続するテキストはimgの右側に「回り込み」ます。 これは確かに回り込みと呼べます。 では、ブロックレベル要素を

    Nean
    Nean 2006/03/02
  • 1