CSS columnsプロバティ

ブロックエディタには、カラムズ、横並びなどレイアウトに使えるものがあるが、なぜか、CSSのcolumnsプロパティを使えるものが無い。単にカラムを別けてコンテンツを整理するだけなら、最も楽そうなのになぜだろう。複数行にまたがるレイアウトならグリッドが使い易いが、横一列ににしたいだけなら、カラムズプロパティが最も適しているように思うのだが。

段落を作成して、グループに入れてみる。グループに「columns300」というクラス名を付与する。この上にカスタムHTMLブロックを挿入して、columns300 に、 column-width:300px; というスタイルを指定してみる。column-gap:1.5em;text-align:justify;も指定。エディタ上ではカラムに別れないが、フロント画面では2列に別れて表示されている。次は、この先頭に画像を入れてみるが、絵データ上で2列に別れてくれないのは少し不便な感じがする。

スタイル指定をカスタムHTMLブロックから、外部スタイルシートに移してみたら、エディタ上でも2列に別れた。検証ツールを立ち上げてリロードしたので、キャッシュの問題だけだったのかも知れない。

エディタ上とフロント画面では、コンテンツ表示エリアの幅が同じになっていない分、多少の違いがでるものの特に問題はないように思える。

やはり、単に2列にするだけならこの方法が一番なようだ。ビューポート幅により、あまり画像を大きくしたくないなら、3列に表示されつときがあるものの、250pxがベストかも知れない。

掲載日時: 2022年6月21日(火) 15:58