カラムレイアウト関連のCSSプロパティ
この記事ではカラムレイアウト関連のCSSプロパティについて説明します。
カラムレイアウトの記述の仕方を学べます。
YouTube Video
プレビュー用のHTML
css-columns.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-columns.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Columns</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>columns</h3>
23 <section>
24 <header><h4>HTML</h4></header>
25<pre>
26<section class="columns-container">
27 <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
28 <p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
29 <p>2. Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
30 <p>3. Pellentesque malesuada diam eu sem finibus scelerisque.</p>
31 <p>4. Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
32 <p>5. Morbi in nibh in lorem vestibulum sollicitudin.</p>
33</section>
34</pre>
35 <header><h4>HTML+CSS</h4></header>
36 <section class="sample-view">
37 <section class="columns-container">
38 <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
39 <p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
40 <p>2. Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
41 <p>3. Pellentesque malesuada diam eu sem finibus scelerisque.</p>
42 <p>4. Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
43 <p>5. Morbi in nibh in lorem vestibulum sollicitudin.</p>
44 </section>
45 </section>
46 </section>
47 </article>
48 <article>
49 <h3>order</h3>
50 <section style="height: 300px;">
51 <header><h4>column-width: 250px</h4></header>
52 <section class="sample-view">
53 <div class="container">
54 <div class="item item-1">Item 1</div>
55 <div class="item item-2">Item 2</div>
56 <div class="item item-3">Item 3</div>
57 </div>
58 </section>
59 </section>
60 </article>
61 </main>
62</body>
63</html>カラムレイアウト
columns
1.columns-container {
2 columns: 100px 3;
3 column-gap: 20px;
4 column-rule: 2px solid #333;
5}
6
7h5 {
8 column-span: all;
9}CSSのcolumnsプロパティは、コンテンツを複数の列に分割して表示するための便利な手段を提供します。1つの指定で列の幅や列数を簡単に設定でき、レスポンシブデザインにも適用しやすいという利点があります。特に、新聞や雑誌のように、文章を縦に長く表示し、複数の列に配置するレイアウトが求められる場合に効果的です。
- この例では、3列に分割され、列間に20pxのギャップと2pxの線が表示されます。また、
h5要素が複数の列にまたがって表示されます。
columnsは、column-widthとcolumn-countの2つのプロパティの短縮形です。
columnsプロパティの構文
1columns: <column-width> <column-count>;columnsは、このような書式になっています。
<column-width>: 各列の幅を指定します。値としてautoや、px,%などの任意の長さの単位が使用可能です。<column-count>: 列の数を数値で指定します。
column-widthプロパティ
1.container {
2 column-width: 250px;
3}column-widthは、各列の最小幅を指定するプロパティです。column-countと併用することで、列の自動配置や調整が可能になります。ブラウザはコンテナの幅を考慮し、必要な列の数を自動的に計算します。
- この例では、1列あたりの幅が250pxであり、コンテナの幅に基づいて最適な列数が計算されます。
column-countプロパティ
1.container {
2 column-count: 3;
3}column-countは、指定された要素をいくつの列に分割するかを明示的に設定するプロパティです。column-widthと異なり、列の数を固定します。
- この例では、コンテナ内のコンテンツが3列に分割されます。
column-gapプロパティ
1.container {
2 column-gap: 20px;
3}column-gapは、各列間のスペース（ギャップ）を指定するプロパティです。gapという名前でCSS Gridと共通のプロパティもありますが、column-gapは列間の余白のみをカスタマイズしたい場合に役立ちます。
- この例では、各列の間に20pxの余白が入ります。デフォルト値は16pxです。
column-ruleプロパティ
1.container {
2 column-rule: 2px solid #333;
3}column-ruleは、各列の間に線を引くためのプロパティです。borderプロパティと似た構文を持ち、線の太さ、スタイル、色を指定できます。
- この例では、列の間に2px幅の黒い実線が表示されます。
column-ruleは以下の3つのプロパティに分解できます。column-rule-width: 線の太さを指定します。column-rule-style: 線のスタイルを指定します。例えば、solid、dashed、dottedなどがあります。column-rule-color: 線の色を指定します。
column-spanプロパティ
1h5 {
2 column-span: all;
3}column-spanは、特定の要素が複数の列にまたがって表示されるように設定するプロパティです。主に見出しやタイトルのような要素に使用されます。値としては、以下の2つがあります。
- none: 要素は列をまたがず、1つの列内に収まります。デフォルト値です。
- all: 要素がすべての列にまたがって表示されます。
- この例では、
h5要素が複数の列にまたがって表示されます。
column-fillプロパティ
1.container {
2 column-fill: balance;
3}column-fillは、コンテンツが列にどのように配置されるかを制御するプロパティです。通常、列はできる限り均等に埋められますが、このプロパティを使うことで異なる配置方法を指定できます。値としては以下が利用可能です。
- balance: 列が均等に埋まるように配置されます。デフォルト値です。
- auto: 列が自動的に埋められます。最後の列がより長くなる可能性があります。
- この設定では、コンテンツが均等に分配されるように調整されます。
メディアクエリとの併用
1.container {
2 columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6 .container {
7 columns: 1;
8 }
9}columnsプロパティは、メディアクエリと組み合わせることでレスポンシブなデザインに対応できます。異なる画面サイズに応じて列数や列幅を柔軟に変更することが可能です。
- この例では、画面幅が600px以下の場合、列は1列になります。それ以上の幅の場合、200px幅で3列に分割されます。
まとめ
CSSのcolumnsプロパティは、複数の列を利用したレイアウトを簡単に実現できる強力なツールです。特にレスポンシブデザインや、読みやすさを重視したテキストレイアウトで役立ちます。関連するプロパティを組み合わせて使うことで、列の数や幅、ギャップ、装飾などを柔軟にカスタマイズできます。
これにより、より洗練されたデザインを簡単に実装できるようになりますので、ぜひ活用してみてください。
order
1.container {
2 all:initial;
3 display: flex;
4}
5.item {
6 padding: 10px;
7 background-color: lightblue;
8 margin: 5px;
9}
10.item-1 {
11 order: 3;
12}
13.item-2 {
14 order: 1;
15}
16.item-3 {
17 order: 2;
18}CSSのorderプロパティは、FlexboxやGridレイアウトを使う際に要素の表示順序を制御するために利用されます。通常、HTMLのマークアップに従って要素がレンダリングされますが、orderプロパティを使用することで、要素の視覚的な順序を変更することができます。このプロパティは、ユーザーインターフェースを柔軟にデザインしたり、レスポンシブデザインの構築に役立ちます。
- この例では、HTML内では
Item 1、Item 2、Item 3の順にマークアップされていますが、CSSのorderプロパティにより、表示順序がItem 2、Item 3、Item 1に変更されます。
order プロパティの基本
orderプロパティは、FlexboxやGridコンテナ内のアイテムに適用されます。各アイテムに整数値を設定することで、配置順序を定義します。デフォルトではすべてのアイテムのorderは0に設定されています。この値を変更することで、アイテムがどの順番で表示されるかを指定することが可能です。
基本的な構文
1.item {
2 order: <integer>;
3}orderの値には、任意の整数を指定します。正の値、負の値、ゼロを使用できます。値が小さいほど、その要素が先に表示され、大きいほど後に表示されます。
正の値と負の値の使い分け
orderプロパティに負の値を指定することもできます。負の値を持つ要素は、デフォルトの順序よりも前に表示されます。
1.item-1 {
2 order: -1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 1;
9}この例では、Item 1はorderが-1に設定されているため、最初に表示されます。これに対し、Item 3はorderが1に、Item 2はorderが2に設定されているため、その順に続いて表示されます。
レスポンシブデザインにおけるorder
レスポンシブデザインにおいて、画面サイズに応じて要素の順序を変更することが可能です。たとえば、モバイルビューでは要素の順番を変更して、重要な情報を先に表示するケースがあります。
1.item-1 {
2 order: 1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 3;
9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13 .item-1 {
14 order: 3;
15 }
16 .item-2 {
17 order: 1;
18 }
19 .item-3 {
20 order: 2;
21 }
22}この例では、通常のビューではItem 1、Item 2、Item 3の順に表示されますが、画面幅が600px以下になると、Item 2が最初に、Item 3が次に、Item 1が最後に表示されます。
orderの注意点
orderプロパティを使うと、視覚的な順序とDOMツリー内の順序が異なる場合があります。これは、スクリーンリーダーなどのアクセシビリティツールに影響を与える可能性があります。順序が変わると、キーボードナビゲーションや他のユーザー補助技術での操作が期待通りに動作しないことがあります。そのため、orderを使用する際は、ユーザーエクスペリエンスへの影響を十分に考慮する必要があります。
結論
CSSのorderプロパティは、FlexboxやGridレイアウトで要素の表示順を簡単に制御できる強力なツールです。正の値や負の値を使うことで、要素の順序を柔軟に変更でき、特にレスポンシブデザインにおいて便利です。ただし、アクセシビリティや視覚的順序とHTML構造の乖離に注意する必要があります。これらを適切に考慮すれば、orderプロパティは、よりダイナミックで柔軟なレイアウト作成に役立つでしょう。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。