これは CSS Programming Advent Calendar 2012 の 18 日目の記事です。
現在、いくつかのブラウザベンダーから新しい CSS の機能が提案・実装されており、CSS で今までにできなかった表現も可能になってきています。 例えば、Firefox や Chrome では、要素を自由に切ったり貼ったりできるようになりました。
Firefox 4 以上では、要素を画像として取得する element() 関数 が実装されています。
background-image: element(#original) /* 実際はまだ -moz-element() */として、要素 #original をコピーして背景画像に設定します。
background-*** や mask, clip-path をうまく使えば、ページの一部を切り取って再配置したり、小さなプレビューを表示したりということもできます。
ただし「画像として」貼っているので、ポインタイベントがなく文字選択などができないことには注意が必要です。
element() は残念ながら CSS4 に延期されたので、他のブラウザに実装されるのはまだまだ先になるかもしれません……。
従来の CSS によるレイアウトでは、例えば雑誌のレイアウトのように、ひと続きの文章を複数の要素にまたがって表示することは難しいことでした。そこで、CSS Regions という仕様が Adobe によって提案されました。
- CSS Regions | Web Standards | Adobe & HTML
- CSS Regions：HTMLとCSS3でリッチなページレイアウトを実現する | ADC - Adobe Developer Connection
#content {
flow-into: hoge;
/* まだ -webkit-flow-into または -ms-flow-into
hoge は none, inherit 以外の任意の名前をつけることができる */
}
.view {
flow-from: hoge;
}とすると、#content の内容を .view（複数要素でもいい）に流し込めます。
Chrome の about:flags で「試験運用版の WebKit 機能を有効にする」をオンにすると使うことができます。
また IE10 にも一部実装が載っていますが、コンテンツを単一の HTML ファイルにして iframe に収める必要があり、やや違ったものとなっています。以下では Chrome を前提にしています。
CSS Regions は文章だけではなく、実際にはあらゆる要素を切断して再配置できます。 CSS Transforms を合わせれば縦や斜めにもページを切断できます。
- Demo. CSS Regions でページめくり
- もっとたくさん切っているもの CSS Regions
-webkit-box-reflect で反射させたものを Regions で切断すれば、上の element() 関数と同じように、要素をコピーすることも可能です（これもポインタイベントが失われます）。
ただし background-*** が使えないので、element() 関数を完全に補うことはできません。
resize プロパティや contentEditable と組み合わせると面白いことができそうだと思っていましたが、断念しました……。
@region ルールが完全に実装されたらまた考えてみます。
明日は 1026 さん（7 日ぶり 2 度目）です！