簡単に段組が作れる!CSS3、columnsプロパティ(画像)

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
本文を3段組にした例 (段の間には罫線が引かれ、各段の高さは自動で揃う)
本文を3段組にした例 (段の間には罫線が引かれ、各段の高さは自動で揃う)
段の数を指定したり、段の横幅を指定したりして、自由自在に段組レイアウトを作成できる
段の数を指定したり、段の横幅を指定したりして、自由自在に段組レイアウトを作成できる
ChromeやFirefoxでの段組表示例
ChromeやFirefoxでの段組表示例
段の高さは自動で揃う
段の高さは自動で揃う
段の区切り位置は自動で決まる
段の区切り位置は自動で決まる
段の個数を指定して段組を作る
段の個数を指定して段組を作る
1段の横幅を指定して段組を作る
1段の横幅を指定して段組を作る
段の最大数と、1段の最小幅を指定して段組を作る
段の最大数と、1段の最小幅を指定して段組を作る
段と段の間の余白量を指定
段と段の間の余白量を指定
段と段の間に罫線を引く
段と段の間に罫線を引く
指定位置で段を区切ったり、指定範囲内では段を区切らないようにできる
指定位置で段を区切ったり、指定範囲内では段を区切らないようにできる
この写真の記事を読む
本文を3段組にした例 (段の間には罫線が引かれ、各段の高さは自動で揃う)
段の数を指定したり、段の横幅を指定したりして、自由自在に段組レイアウトを作成できる
ChromeやFirefoxでの段組表示例
段の高さは自動で揃う
段の区切り位置は自動で決まる
段の個数を指定して段組を作る
1段の横幅を指定して段組を作る
段の最大数と、1段の最小幅を指定して段組を作る
段と段の間の余白量を指定
段と段の間に罫線を引く
指定位置で段を区切ったり、指定範囲内では段を区切らないようにできる
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます