今回の記事では、CSSのcolumnsプロパティを使用して、段組みレイアウトを実装する方法を紹介します。
段組みレイアウトとは、本や新聞などで使われているように、長い文章をいくつかの段にわけて表示する手法です。
Web上では文章は左端から始まり、右端までいくと改行して次の行に移りますよね。
このとき、1行が長すぎると、行末から次の行の先頭までの距離も長くなり、見失ってしまうことがあります。
columnsプロパティではこれを防ぐために、文章を複数の段に分けたり、段の横幅を指定したりすることが可能です。
ここでは一番シンプルな例として、本のような2段組みのレイアウトを作成する方法を紹介していきます。
以下で実装DEMOやコードの解説を行いますので、Web上で長い文章を扱う場合はぜひ参考にしてみてください。
columnsを使用した2段組みレイアウトの実装DEMO
こちらが今回実装するDEMOです。
書籍のように文章を2段組みにし、真ん中には区切り線の装飾をつけています。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。
横幅600px以下のデバイスでは、2段組みだと逆に読みにくくなるので1段になるよう調整しています。
2段組みレイアウトを確認したい場合は、PCで閲覧してください。
【コピペ用】columnsを使用した2段組みレイアウトの実装コード紹介
ここでは、実装DEMOに使用したコードを紹介していきます。
<div class="book">
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。</p>
</div>ダミーテキストは以下のサイトを使用させていただきました。
.book {
columns: 2; /* カラムの数 */
column-rule: 2px dashed #ccc; /* カラム間の線の太さ・線の種類・線の色 */
column-gap: 3em; /* カラム間の幅 */
/* 以下任意で見た目の調整 */
padding: 2em;
line-height: 2;
text-align: justify;
border: 1px solid #ccc;
}
/* 幅が狭いデバイスでは1カラムにする */
@media screen and (max-width: 600px) {
.book {
columns: 1;
}
}これらのコードをコピペすると、実装DEMOと同じレイアウトを作ることができます！
次でコードの解説をしていきますので、コードを理解したい方は読み進めてください。
【解説】columnsを使用した2段組みレイアウトの実装コード解説
ここからは実装コードの解説をしていきます。
HTML・CSSの順に説明していきますね。
HTML
まずはHTMLから見ていきましょう。
<div class="book">
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。</p>
</div>全体を囲う要素にわかりやすいクラス名（ここではbookとしています）をつけ、中に文章を配置します。
これでHTMLは終わりなので、次でCSSを見ていきます。
CSS
今回のメインであるCSSのコードを見ていきましょう。
.book {
columns: 2; /* カラムの数 */
column-rule: 2px dashed #ccc; /* カラム間の線の太さ・線の種類・線の色 */
column-gap: 3em; /* カラム間の幅 */
/* 以下任意で見た目の調整 */
padding: 2em;
line-height: 2;
text-align: justify;
border: 1px solid #ccc;
}
/* 幅が狭いデバイスでは1カラムにする */
@media screen and (max-width: 600px) {
.book {
columns: 1;
}
}ここで重要なプロパティはcolumns、column-rule、column-gapのみですので、これらにフォーカスを当てて解説していきます。
columnsプロパティでカラム数を指定
columns: 2;columnsプロパティでは、カラム数を指定することができます。
※カラム幅を指定することもできますが、今回は解説しません。
2を指定すれば2カラムに、3を指定すれば3カラムという風に好きなだけ増やすことができます。
あまり多すぎると可読性が落ちるので、3以内にとどめておくのが良いですね。
メディアクエリで、大きい画面では2カラム、小さい画面では1カラムという風に調整することも可能です。
今回の実装DEMOでも、画面幅が狭いブラウザに対しては1カラムにするという指定をしています。
@media screen and (max-width: 600px) {
.book {
columns: 1;
}
}column-ruleプロパティでカラムの区切り線のスタイルを指定
column-rule: 2px dashed #ccc;column-ruleプロパティでは、カラム間の区切り線のスタイルを指定することができます。
3つの値を設定することができ、以下のように別々に指定することも可能です。
column-rule-width: 2px; /* 線の太さ */
column-rule-style: dashed; /* 線の種類 */
column-rule-color: #ccc; /* 線の色 */
/* 1行にまとめると... */
column-rule: 2px dashed #ccc;この区切り線は、2カラム以上になった時場合に表示されるので、1カラムの場合は非表示になります。
column-gapプロパティでカラムの間隔を指定する
column-gap: 3em;column-gapでは、カラムの間隔を指定することができます。
単位は固定pxや%なども使用可能です。
こちらもcolumn-ruleと同様、2カラム以上の場合にのみ適用されるので、1カラムの場合は無視されます。
以上、columns、column-rule、column-gapについての説明でした。
これらのプロパティを組み合わせることで、段組みレイアウトを作成することができます！これでコードの解説は終わりです。
【まとめ】columnsプロパティで本のような段組みレイアウトを実装する方法
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。
CSSで本のような段組みレイアウトを作成する方法を紹介しました。
まとめると、段組みレイアウトは以下の3つのプロパティを使用することで実装可能です。
columns…カラム幅・カラム数を指定column-rule…カラムの区切り線のスタイルを指定column-gap…カラムの間隔を指定
単純な要素の段組みレイアウトならflexboxを使用した方が早いですが、長文の場合はcolumnsプロパティの方が圧倒的に簡単ですね。
長い文章をWeb上で表示したい場合は、ぜひこの方法を使用してみてください。
コメント