タグ

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

  • アニメ公式サイトはもっとシンプルにしてほしい

    てんぽ: アニメ公式サイトはもっとシンプルにしてほしい CSSHTML、FC2ブログのカスタマイズ、共有テンプレートなど 4月からものすごい量の新番組(アニメ)が始まるので、公式サイトをチェックしているのだけれど、 パピヨンローゼのサイトがひどかったので文句を書いてみる。 まずEnterページがある。 メインページに入ると、メニューも放送局情報もすべて画像。alt属性はない。 放送局情報が目立つところにあるのはありがたいが。 左のメニューをクリックしてもなにも起こらない。 別ウィンドウで作成しているため、設定などにより表示されない場合がございます。ご迷惑をおかけしますが、表示されない場合は、別のブラウザをお試し頂くか、設定の変更をいただけますようお願い致します。とのこと。 リンクをJavaScriptで制御しているようだ。仕方ないのでJavaScriptを有効にしてリロード。 さて、クリ

    mickn
    mickn 2006/03/28
  • CSSレイアウトの定石 WinIE6バグ回避法

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

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

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

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

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

    mickn
    mickn 2006/02/28
  • 1