CSSで要素を分割する列数を指定する方法（column-countプロパティの使い方）
CSSで要素を分割する列数を指定するには？
要素内のテキストを複数の段組み（カラム）に分割したい場合は、CSSの column-count プロパティを使用します。このプロパティに数値を指定するだけで、コンテンツが自動的に指定した列数に分割されて表示されます。
例えば column-count: 4; と指定すれば、新聞や雑誌のような4段組みのレイアウトを簡単に実現できます。JavaScriptなどを使わず、CSSだけで段組みが可能な点が大きな魅力です。
基本構文
column-count: 列数;サンプルコード：要素を4列に分割する
以下は、column-count プロパティを使って要素を4列に分割する具体例です。実際にブラウザで表示すると、テキストが均等に4つのカラムへ振り分けられます。
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
}
</style>
</head>
<body>
<div class="demo">
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text.
</div>
</body>
</html>
関連プロパティとの組み合わせ
段組みレイアウトをより見やすく、細かく制御したい場合は、以下のプロパティと組み合わせるのがおすすめです。
- column-gap： 列と列の間隔（余白）を指定できます。
- column-rule： 列の間に罫線（区切り線）を表示できます。
- column-width： 各列の幅を指定でき、レスポンシブな段組みにも活用できます。
なお、Chrome・Firefox・Safari・Edgeなどの主要なモダンブラウザでは、ベンダープレフィックスなしで column-count をそのまま利用できます。
-
CSSでテキストの最終行を揃える方法｜text-align-lastプロパティの使い方
CSSのtext-align-lastプロパティを使用すると、ブロック要素内のテキストの最終行の揃え位置を個別に指定できます。段落全体の配置とは別に、最後の行だけ右寄せや中央寄せにしたい場合に便利です。以下のコードでは、div要素にtext-align-last: right;を設定し、テキストの最終行を右寄せに表示しています。 サンプルコード <!DOCTYPE html> <html> <head> <style> &n
-
CSSで要素のアスペクト比を維持する方法｜padding-topとaspect-ratio徹底解説
Web制作において、画像・動画・カード型レイアウトなどで要素の縦横比（アスペクト比）を固定したい場面は非常に多くあります。ウィンドウサイズが変わってもレイアウトが崩れないようにするには、CSSの工夫が必要です。 基本の考え方：padding-topを使った手法 最も広く知られているのが「padding-top」を活用したテクニックです。paddingのパーセント指定は親要素の幅を基準に計算されるため、これを利用して高さを幅に連動させることができます。 例えば4:3の比率を維持したい場合は、padding-topに「75%」（3÷4×100）を指定します。同様に16:9なら「56.25%」、正方