前回はCSSで文章を複数の列に分ける方法を紹介しました。今回は1列の幅を指定する、column-widthプロパティを紹介します。
CSS のプロパティで、列の幅を設定することができます。
指定方法
要素 {column-width: 値;}
値は、CSSで使える長さを表す値すべて使えます（px,em等）。
今回は、300pxの幅で指定していきます。この場合、1カラムが300px以下にならないよう列を調整してくれます。
See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.
このように、1カラムの幅を指定しておけばそれ以上小さくならないので、PCが複数列でSPが1列にしたい場合などに使えます。
<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>.inner{
padding: 0 20px;
margin:0 auto;
}
.column-list__title{
font-size: 28px;
font-weight: 700;
color: #983535;
margin-top: 12px;
text-align: center;
}
.column-main__detail p {
margin-top: 12px;
column-width:300px;/*ここに指定する*/
text-align: justify;
line-height: 2;
}
※注意
column-countが指定してある場合にはcolumn-widthが効きません。その場合は次で紹介するcolumnsプロパティで一括で指定すると効くようになります。
columnsプロパティは、列数と列の幅をまとめて指定することができます。
書き方は以下のようになります。
要素 {columns: column-countの値 column-widthの値;}
例えば、
要素{columns:2 300px;}
と指定すれば、通常は2カラム300pxより小さくなる場合は1カラムになります。
最後に、カラム同士の間隔の余白を広げたい、また線を入れたい場合は以下のプロパティで指定できます。
カラム同士の間隔を指定：column-gapプロパティ
カラム同士の間隔に線を指定：column-ruleプロパティ
