タグ

ブックマーク / www.yomotsu.net (2)

  • CSS を使って IE 6 で PNG の半透明を有効にする | ヨモツネット

    概要 IE 6 で img 要素で埋め込んだ PNG ファイルの半透明を有効にする JS はいろいろありますが、CSS でこれを行うための方法です。 利点として、JS で実現した場合、一瞬グレーの部分が表示されてしまいますが、この方法ではそれがありません。 PNG が読み込まれた時点で半透明が有効になっています。 また、CSS のセレクタを用いて、どの img 要素に対して半透明を有効にするかなどを決めることができます。 さらに、onload 後にドキュメントに appendChild や innerHTML などで追加された PNG ファイルについても、半透明が有効になった状態で追加されます。 動作確認用の demo (IE 6 用) 説明 アルファチャンネルを有効にしたい個所に対して以下のようなCSSを適用します。この例では、#sample の中の img 要素となります。(セレクター

  • 短いときは中央、長いときは左寄せになるテキスト | ヨモツネット

    概要 テキストが 1行で表示できる場合には中央揃え、2行以上になる場合は自動で左揃えとなるスタイルを実現するための HTML の構造と CSS のコードについてです。 ただ、これを実現するために、HTML のタグが 3重のネストになってしまいます。(Firefox 2 をサポートしない場合は、ネストは 2重。) 短いときは中央、長いときは左寄せになるテキストの demo 説明 全体では中央揃え(text-align:center)、内包される inline-block では左揃え (text-align:left) とします。 inline-block は text-alignが有効でありながら箱を形成するので、箱自体は中央揃え、箱の中は左揃えとなります。この箱の横幅は内容量によって伸縮するので、短いときは中央揃え、2行以上になる場合は横幅は限界まで伸びている状態なので、箱の中身全体が左寄

  • 1