今回はCSSで文章を複数の列に分ける方法を紹介します。
文章が一行表示で横に長いと読みづらく、ユーザービリティを損なう場合があります。
そこで、CSSのプロパティで分割することによって見やすくし、可読性を高めることができます。
「column-count」はCSSのcolumn-countプロパティで、指定された列で要素の内容を表示します。
要素 { column-count: 値;}今回は例として、2カラムになるよう指定します。
2カラムにするには、column-countプロパティに2を指定すればOKです。
See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.
<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>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カラムにしたい」「カラムの間の余白が欲しい」など、もう少し見栄えを整えたい場合は、カラム幅やカラム同士の間隔の指定、またカラム同士の間隔に線を指定する方法もありますので、次回紹介します。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
