コーディング

【簡単】CSSでマルチカラムレイアウトを実装してみる!

  • このエントリーをはてなブックマークに追加
【簡単】CSSでマルチカラムレイアウトを実装してみる!

こんにちは!ワタナベです。

花粉症は軽い方なのですが、今年は異様にムズムズしてます((+_+))

今回はマルチカラムレイアウト、文章を簡単に縦にカラム分けする方法をご紹介!

html

<div>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
<p>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
<p>この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。</p>
</div>

CSS

div{
columns: 3; //カラム数
column-rule: solid 1px #ccc; //カラムの区切り線
}

サンプル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。

 

このように簡単に実装できてしまいます!もっと早く知りたかった。

カラム数、文章量によって自動に区切ってくれます。らくちん♪
文章途中でも次の段に自動で行ってくれるので、動的ページなどで光りそうですね(*‘ω‘ *)

おまけ

段の横幅指定

column-width: 〇〇px;

段と段の間の余白指定

column-gap: 〇〇px;

 

それではまた次回。

ご閲覧ありがとうございました♪

 

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ