コトダマウェブホームHTMLCSSBootsrtapWordPressプラグインphotoshopIllustratorJavaScriptjQueryその他サーチコンソールGoogleアナリティクスツールWordPressとデザインが学べるWebメディアmenuホームCSS新聞のようなカラムデザインができるcolumn系プロパティCSS2018.02.21新聞のようなカラムデザインができるcolumn系プロパティここでは、文章をタテに分割表示させることができるcolumn系プロパティについて見ていきたいと思います。column系プロパティは意外と知られていないものなので初めて知った方もいるかもしれません。実例を見ながらどんなものかを理解していきましょう。カラムとカラムの間の線を設定するcolumn-ruleプロパティカラム数を指定するcolumn-countプロパティcolumn-countプロパティは、値に数字を入力して何カラムにするかを指定するプロパティです。column系プロパティの使い方は、すべてpタグやdivタグなどで文章全体をくくり、これをセレクタとして指定します。2;で2カラムを指定ボタンで表示を切り替えてご覧ください。2;}2カラムを作ってみました。カラム数を指定すると、横幅に応じてキレイに分割されます。CodePen.今度は、3カラムです。column-countプロパティについてはこれで大丈夫でしょう。カラムの幅を指定するcolumn-widthプロパティcolumn-widthは、カラムの幅を指定するプロパティです。指定された幅のカラムが要素の横幅の分だけ作成されます。この設定のみだと何カラムになるのかは、要素の横幅に依存します。10em;}ここでは、カラムの幅を10emにしてみました。pxでも良いですが文章の幅を指定するので単位はemの方が自然かもしれませんね。ちなみにこのプロパティでは値にパーセント(%)は指定できませんでした。パーセントを使うならcolumn-countプロパティでカラム数を指定すべきでしょう。column-width)を同時に指定できるショートハンドプロパティです。半角スペースで2つの値を指定します。順番はどちらが先でも問題ありません。100px;}カラム数を3、幅を100pxに指定しました。パソコンで見る限り、ちゃんと表示されているように見えますがブラウザの幅によっては、指定通りになっていないかもしれません。いうのも、このプロパティは2つの値のバランスを取ってレイアウトされるそうなので、ちょっと挙動が把握しずらいです・・・。変にデザインが崩れるわけでもないのでよしとしましょう。カラムとカラムの間の線を設定するcolumn-ruleプロパティcolumn-ruleプロパティは、column-rule-widthプロパティ、column-rule-styleプロパティ、column-rule-colorプロパティの3つをまとめたショートハンドです。borderプロパティと同じといえば分かりやすいでしょうか。線の色(color)、幅(width)、スタイル(style)の3つの値を半角スペースを空けて入力します。3つの値の順番は関係ありません。それではいくつかサンプルを見てみましょう。#666;}実線を引きました。#666;}点線にしてみました。#333;}英新聞風のデザインにしてみました。ふーん、って感じですかね。column関連プロパティは、今すぐあのデザインに使おうみたいなものではありませんが、知っておくと何かに使えそうですね。