こんにちは！ワタナベです。
花粉症は軽い方なのですが、今年は異様にムズムズしてます((+_+))
今回はマルチカラムレイアウト、文章を簡単に縦にカラム分けする方法をご紹介！
html
<div>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
<p>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
<p>この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。</p>
</div>
CSS
div{
columns: 3; //カラム数
column-rule: solid 1px #ccc; //カラムの区切り線
}
サンプル
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
このように簡単に実装できてしまいます！もっと早く知りたかった。
カラム数、文章量によって自動に区切ってくれます。らくちん♪
文章途中でも次の段に自動で行ってくれるので、動的ページなどで光りそうですね(*‘ω‘ *)
おまけ
段の横幅指定
column-width: 〇〇px;
段と段の間の余白指定
column-gap: 〇〇px;
それではまた次回。
ご閲覧ありがとうございました♪
