![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3GgTzemMfIlXc8LH21scAu0oIvffrZUxr4CiSRQo9cIVvZFTrU5ZvkJu2i0aIzn8UwqJgvnB1M4jc5_bjayEPv9A1cW2c2bQLv-3ND4tbjzpPcacwrVFj4bpS11bb6J9FuguxaaeHvF60YG8VqL1TKdgVl4uQ45mpkYa33f0cNAD3p8Y_JdabnACz/s1600-rw/columns-4098866_1280.jpg)
色々な並べ方
table方式
縦横のカラム数(セル数)が固定であれば、この方法はブラウザ依存もなく、難なくできると思いますが、やはり経理データのような計算表示に向いているのがtable表示ですね。float方式
もともと、divを並べていくいだけのサイトを一昔前によく使われていて、その時の代表方式が「float」方式であったと言えるでしょう。 ただ、floatは、eolをしっかり見極めて、cssでその閉じフラグをセットしなければいけないので、ページ内での崩れが発生しているサイトは沢山あったため、エンジニア達はあまり使いたがらない方式でした。inline方式
非常にベタな方式ですが、オブジェクト(コンテンツ)を横並びにできて、画面幅の改行にも柔軟に対応できるinline方式は、一番古くから使われている手法です。 ただ、inlineはやはり文字列などのフォント表示に向いているため、コンテンツなどのboxを並べる場合、縦幅の統一されている横幅が不規則な場合以外は、見た目があまり美しくなりません。flex方式
グリッド表示で、比較的新しく、便利に使えそうなのが、このflex方式ですが、これも、縦幅が可変には向いていません。column方式
そこで今回調査しておきたいのは、このcolumn方式で、pinterestの表示に近い見た目が得られます。 pinterest![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwdt2_OdO9RO_ecTtQkeF-CUl0q0b70pRQi75mLtBUVzG6pVjZ4EFuiHvtLOqfbI2x63-yoC3pI6T7nK8B3GLyNmpk6W_-qVwKxy_w5F5Uv67I79WFXePP8OvQ3cBh2inYZaJlyE-Bwl0QPc1cWisYb9d88A11SchFjb0tq3L9w-nO7Fs4X16veu9z/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2019-09-20-20.52.43.jpg)
column設定 #1 簡単設定
columnの設定は非常に簡単にできます。 親要素と子要素の2階層で、子要素が沢山のコンテンツリストになっていれば、その親要素に以下のようなcssを記述するだけで、OKです。columns:200px auto;
columns : 1カラムの横幅サイズ 最適なカラム数
最適なカラム数は、1カラムの横幅を下回っていると、サイズの方が優先されます。
通常は、サイズ指定をして、カラム数には"auto"を入れておくといいでしょう。
またこれ以外にも、カラム数をマストにしたい場合は、以下のように書いてもいいでしょう。
column-count : 3;
こうすると、各コンテンツのサイズではなく、カラム数が優先されます。
レスポンシブの場合は、mediaクエリーでサイズ毎にカラム数を切り替えてもいいですが、columnsでサイズ指定した方が扱いやすいと思いますよ。
See the Pen columns-1 by YugetaKoji (@geta1972) on CodePen.
サンプルを見てもらうと気がつくと思いますが、カラムをまたいで、コンテンツが分断されています。 文字列などの場合は、これでもいいかもしれませんが、画像などを扱う場合は、少しよろしくないです。column設定 #2 分断されない設定
コンテンツの分断を解消するのも非常に簡単で、コンテンツ部分に以下の設定を加えてあげるだけで構いません。display:inline-block;
拍子抜けするぐらい簡単ですよね。
See the Pen columns-2 by YugetaKoji (@geta1972) on CodePen.
いかがでしょうか?
0 件のコメント:
コメントを投稿