株式会社オートプロジェクト

Columnコラム
2023年2月22日
CSSで文章を複数の列に分ける方法

今回はCSSで文章を複数の列に分ける方法を紹介します。

文章が一行表示で横に長いと読みづらく、ユーザービリティを損なう場合があります。

そこで、CSSのプロパティで分割することによって見やすくし、可読性を高めることができます。

column-countプロパティとは

「column-count」はCSSのcolumn-countプロパティで、指定された列で要素の内容を表示します。

指定方法

要素 { column-count: 値;}

今回は例として、2カラムになるよう指定します。

2カラムにするには、column-countプロパティに2を指定すればOKです。

See the Pen
Untitled
by 林 (@hayashi-akina)
on CodePen.

HTML

<div class="inner">
    <div class="column-list__title">
      PC用ページとモバイル用ページのファイル共通化</div>
    <div class="column-main__detail">
      <p>
          WordPressやBootstrapを使ったウェブサイトであれば、レスポンシブデザインのため、「PC用のページとスマートフォン用のページ」のように個別のページを作成する必要はありません。
            しかし、レスポンシブデザインではないウェブサイトの場合、「スマートフォンからのアクセスはスマートフォン用のページにリダイレクトさせる」などして表示させる必要があります。また、そのためにはもちろん、スマートフォン用のページを別途用意する必要があります。
            この場合、同じようなコンテンツにも関わらず、PC用とスマートフォン用のページを持つ必要があり管理コストが増加します。例えば、テキストの修正をするにも、PC用とスマートフォン用、それぞれのページに対して変更が必要になってしまいます。
            このような問題も、ファイル共通化プログラムを利用することで、重複した内容を記載することなくPC用とスマートフォン用のページを表示させることが可能です。
            また、PC用とスマートフォン用でまったく別のデザインにもできるため、デザインの幅を広げることが可能です。
            現在、<a href="https://www.imcshop.com/" target="_blank" rel="noopener">当社ECサイト</a>でも同プログラムを利用しており、PC用の画面とスマートフォン用の画面がまったく異なっていますが、ファイル自体は一つのみとなっています。
            このプログラムは、過去に作成したHTMLだけのサイトに対しても実装が可能です。
        </p>
      </div>
    </div>
  </div>

CSS

column-list__title{
 font-size: 28px;
 font-weight: 700;
 color: #983535;
 margin-top: 12px;
 text-align: center;

}
.column-main__detail p {
 column-count: 2;
 margin-top: 12px;
 text-align: justify;
 line-height: 2;
}

まとめ

「column-count」は、簡単に指定した列で表示してくれるので便利ですね。

ただ、このままではスマホにした時にも2カラムになってしまいます。

「スマホ表示は1カラムにしたい」「カラムの間の余白が欲しい」など、もう少し見栄えを整えたい場合は、カラム幅やカラム同士の間隔の指定、またカラム同士の間隔に線を指定する方法もありますので、次回紹介します。

Webデザイナー / コーダーのみなさまへ

株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。

サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。

>> バックエンドについて、オートプロジェクトに問い合わせをする