マルチカラム #

マルチカラムとは、ボックスの内部を複数の段に分割してできるレイアウトである。

ここでは、マルチカラムについてを述べる。

column-countプロパティ #

column-countプロパティは、何段組みするかを設定するプロパティである。

値は1以上の整数またはautoで指定する。

使用例

<p style="background-color: #66ff99; width:500px; height:300px; overflow:hidden; column-count:3">
祇園精舍の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらはす。
おごれる人も久しからず、ただ春の夜の夢のごとし。
猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。
遠く異朝をとぶらへば、秦の趙高、漢の王莽、梁の朱忌、唐の祿山、これらは皆旧主先皇の政にも従はず、樂しみをきはめ、諌めをも思ひ入れず、天下の乱れん事を悟らずして、民間の愁ふるところを知らざつしかば、久しからずして、亡じにし者どもなり。
近く本朝をうかがふに、承平の将門、天慶の純友、康和の義親、平治の信頼、これらはおごれる心も猛き事も、皆とりどりにこそありしかども、ま近くは、六波羅の入道前太政大臣平朝臣清盛公と申しし人のありさま、伝えへ承るこそ、心もことばも及ばれね。
</p>

表示例

祇園精舍の鐘の声、諸行無常の響きあり。 娑羅双樹の花の色、盛者必衰の理をあらはす。 おごれる人も久しからず、ただ春の夜の夢のごとし。 猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。 遠く異朝をとぶらへば、秦の趙高、漢の王莽、梁の朱忌、唐の祿山、これらは皆旧主先皇の政にも従はず、樂しみをきはめ、諌めをも思ひ入れず、天下の乱れん事を悟らずして、民間の愁ふるところを知らざつしかば、久しからずして、亡じにし者どもなり。 近く本朝をうかがふに、承平の将門、天慶の純友、康和の義親、平治の信頼、これらはおごれる心も猛き事も、皆とりどりにこそありしかども、ま近くは、六波羅の入道前太政大臣平朝臣清盛公と申しし人のありさま、伝えへ承るこそ、心もことばも及ばれね。

column-widthプロパティ #

column-widthプロパティは、段の幅を指定するプロパティである。値は単位付きの数値またはautoで指定する。

使用例

<p style="background-color: #66ff99; width:700px; height:300px; column-width: 100px;">
祇園精舍の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらはす。
おごれる人も久しからず、ただ春の夜の夢のごとし。
猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。
遠く異朝をとぶらへば、秦の趙高、漢の王莽、梁の朱忌、唐の祿山、これらは皆旧主先皇の政にも従はず、樂しみをきはめ、諌めをも思ひ入れず、天下の乱れん事を悟らずして、民間の愁ふるところを知らざつしかば、久しからずして、亡じにし者どもなり。
近く本朝をうかがふに、承平の将門、天慶の純友、康和の義親、平治の信頼、これらはおごれる心も猛き事も、皆とりどりにこそありしかども、ま近くは、六波羅の入道前太政大臣平朝臣清盛公と申しし人のありさま、伝えへ承るこそ、心もことばも及ばれね。
</p>

表示例

祇園精舍の鐘の声、諸行無常の響きあり。 娑羅双樹の花の色、盛者必衰の理をあらはす。 おごれる人も久しからず、ただ春の夜の夢のごとし。 猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。 遠く異朝をとぶらへば、秦の趙高、漢の王莽、梁の朱忌、唐の祿山、これらは皆旧主先皇の政にも従はず、樂しみをきはめ、諌めをも思ひ入れず、天下の乱れん事を悟らずして、民間の愁ふるところを知らざつしかば、久しからずして、亡じにし者どもなり。 近く本朝をうかがふに、承平の将門、天慶の純友、康和の義親、平治の信頼、これらはおごれる心も猛き事も、皆とりどりにこそありしかども、ま近くは、六波羅の入道前太政大臣平朝臣清盛公と申しし人のありさま、伝えへ承るこそ、心もことばも及ばれね。

columnsプロパティ #

columnsプロパティは、前述のcolumn-count,column-widthをまとめて指定できるプロパティである。

使用例

<p style="background-color: #66ff99; width:700px; height:300px; overflow:hidden; columns:2">
祇園精舍の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらはす。
おごれる人も久しからず、ただ春の夜の夢のごとし。
猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。
</p>

表示例

祇園精舍の鐘の声、諸行無常の響きあり。 娑羅双樹の花の色、盛者必衰の理をあらはす。 おごれる人も久しからず、ただ春の夜の夢のごとし。 猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。

column-gapプロパティ #

column-gapプロパティは、段の間隔を設定するプロパティである。値は単位付きの数値を指定する。

使用例

<p style="background-color: #66ff99; width:700px; height:100px; overflow:hidden; column-count:2; column-gap:100px">
祇園精舍の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらはす。
おごれる人も久しからず、ただ春の夜の夢のごとし。
猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。
</p>

表示例

祇園精舍の鐘の声、諸行無常の響きあり。 娑羅双樹の花の色、盛者必衰の理をあらはす。 おごれる人も久しからず、ただ春の夜の夢のごとし。 猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。

column-ruleプロパティ #

段と段の間にはボーダーと同様の線を引くことができる。その線を設定するプロパティがcolumn-rule系のプロパティである。

このプロパティにはいくつか種類があり、以下の通りである。

使用例

<p style="background-color: #66ff99; width:700px; height:300px; column-count: 3; column-rule: 3px double red;">
祇園精舍の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらはす。
おごれる人も久しからず、ただ春の夜の夢のごとし。
猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。
遠く異朝をとぶらへば、秦の趙高、漢の王莽、梁の朱忌、唐の祿山、これらは皆旧主先皇の政にも従はず、樂しみをきはめ、諌めをも思ひ入れず、天下の乱れん事を悟らずして、民間の愁ふるところを知らざつしかば、久しからずして、亡じにし者どもなり。
近く本朝をうかがふに、承平の将門、天慶の純友、康和の義親、平治の信頼、これらはおごれる心も猛き事も、皆とりどりにこそありしかども、ま近くは、六波羅の入道前太政大臣平朝臣清盛公と申しし人のありさま、伝えへ承るこそ、心もことばも及ばれね。
</p>

表示例

祇園精舍の鐘の声、諸行無常の響きあり。 娑羅双樹の花の色、盛者必衰の理をあらはす。 おごれる人も久しからず、ただ春の夜の夢のごとし。 猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。 遠く異朝をとぶらへば、秦の趙高、漢の王莽、梁の朱忌、唐の祿山、これらは皆旧主先皇の政にも従はず、樂しみをきはめ、諌めをも思ひ入れず、天下の乱れん事を悟らずして、民間の愁ふるところを知らざつしかば、久しからずして、亡じにし者どもなり。 近く本朝をうかがふに、承平の将門、天慶の純友、康和の義親、平治の信頼、これらはおごれる心も猛き事も、皆とりどりにこそありしかども、ま近くは、六波羅の入道前太政大臣平朝臣清盛公と申しし人のありさま、伝えへ承るこそ、心もことばも及ばれね。

column-spanプロパティ #

column-spanプロパティは、ボックスが段組みされている時に、指定した要素を段の中に収めず、ボックスの幅いっぱい（全ての段を跨いで）に表示させるプロパティである。

値はall(全ての段に跨いで表示)、none（段を跨いで表示させない）が指定できる。

使用例

<div style="background-color: #66ff99; width:800px; height:300px; overflow:hidden; column-count:3">
<p>
祇園精舍の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらはす。
おごれる人も久しからず、ただ春の夜の夢のごとし。
猛き者もつひには滅びぬ、ひとへに風の前の塵に同じ。
</p>
<p style="background-color: red; column-span: all;">〜〜中略〜〜</p>
<p>
遠く異朝をとぶらへば、秦の趙高、漢の王莽、梁の朱忌、唐の祿山、これらは皆旧主先皇の政にも従はず、樂しみをきはめ、諌めをも思ひ入れず、天下の乱れん事を悟らずして、民間の愁ふるところを知らざつしかば、久しからずして、亡じにし者どもなり。
近く本朝をうかがふに、承平の将門、天慶の純友、康和の義親、平治の信頼、これらはおごれる心も猛き事も、皆とりどりにこそありしかども、ま近くは、六波羅の入道前太政大臣平朝臣清盛公と申しし人のありさま、伝えへ承るこそ、心もことばも及ばれね。
</p>
</div>

表示例

フレキシブルボックスレイアウト #

displayプロパティにおいて、値をflexと指定すると、その内部の子要素を縦、横、逆順などの順番で配置することができる。このような配置をフレキシブルボックスレイアウトという。

順番の指定は、flex-directionプロパティで指定できる。指定する値と意味は以下の通り。デフォルトではrowである。

使用例

<div style="display:flex; flex-direction:row">
<p style="background-color:red">p 1個目</p>
<p style="background-color:yellow">p 2個目</p>
<p style="background-color:green">p 3個目</p>
</div>

表示例