タグ

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

  • 不思議な絵の解説

    コピペすると、四角の枠の中にメッセージが現れる不思議な絵 コピペすると、四角の枠の中にメッセージが現れる不思議な絵 原理 Firefox1やIE6がdisplay:noneで消した箇所に含まれる文字列もコピペできることを利用しています(Opera8.5では無理)。 pre要素で整形したテキストをspanで囲み、display:noneで消します。□は全角スペース。 <pre> ■■■■■■■■■■■■■■ ■□□□□テキスト□□□□■ ■■■■■■■■■■■■■■ </pre> <pre> ■■■■■■■■■■■■■■ ■□<span>□□□テキスト□□□□</span>■ ■■■■■■■■■■■■■■ </pre> span {display:none;} 消した分のスペースを確保するために、全角スペース1個を適当なインライン要素で囲み、letter-sp

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

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

  • 1