ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTMLはレイアウトの概念があまり強くありません。CSSを駆使すればできることもあるでしょうが、メンテナンス性が非常に悪くなったり、再利用性も低くなったりします。雑誌のようなレイアウトを再現するのは大変です。

今回は2段組の雑誌構成でよくある中央に引用を表示するレイアウトを実現するPull Quote Centerを紹介します。

Pull Quote Centerの使い方

デモです。例えばこんな感じ。これはテキストです。

こちらは画像。

無効にするとこんな感じにラップしてしまいます。

Pull Quote CenterはjQueryプラグインであり、JavaScriptでレイアウトを変更しています。CSSだけではこのようなレイアウトは難しいのでしょう。無理にスタイルシートだけでやろうとするのではなく、柔軟にJavaScriptを組み合わせて格好良いレイアウトを作っていくのが良いでしょう。

pull-quote-center demo

jakedowns/pull-quote-center: A jQuery plugin utility which dynamically inserts a symmetrical pull-quote element clone to enable a hacky float: center

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2