段çµã¿ã§ã®ãªã¼ãã¼ããã¼ã®å¦ç
ãã®ã¬ã¤ãã§ã¯ã段çµã¿ (multicol) ã¬ã¤ã¢ã¦ãã«ããã¦ã段ããã¯ã¹å ããã³ã³ã³ããã¼ã«åã¾ããªãã³ã³ãã³ããããå ´åã®ãªã¼ãã¼ããã¼ã«å¯¾å¦ããæ¹æ³ã«ã¤ãã¦èª¬æãã¾ãã
段ããã¯ã¹å ã§ã®ãªã¼ãã¼ããã¼
ãªã¼ãã¼ããã¼ã¯ãã¢ã¤ãã ã®å¯¸æ³ã段ããã¯ã¹ããã大ããªå ´åã«çºçãã¾ããä¾ãã°ã段å
ã®ç»åã column-width ã®å¹
ãã¾ã㯠column-count ã§å®£è¨ãããæ®µæ°ã«åºã¥ã段ã®å¹
ãããåºãå ´åã«çºçãã¾ãã
ãã®å ´åãã³ã³ãã³ãã¯æ®µããã¯ã¹ã§åãåãããã®ã§ã¯ãªããæ¬¡ã®åã«ã¯ã¿åºãã¾ãã以ä¸ã®ä¾ã¨ããã©ã¦ã¶ã¼ãæç»æã«å¥ãªæ¹æ³ã§å¦çããäºå®ã®ã¬ã³ããªã³ã°ã®ç»åãè¦ã¦ãã ããã
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<img
alt="A close-up of two hot air balloons being inflated."
src="https://mdn.github.io/shared-assets/images/examples/balloons3.jpg" />
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
}
2 段ã®ããã¹ããããã¾ããå·¦ã®æ®µã«ã¯ã段ãããå¹ ã®åºãåçãããã¾ããç»å㯠2 ã¤ç®ã®æ®µã«å±éãããå³ã®æ®µã®ããã¹ãã®å¾ãã«ç¾ãã¾ããå³ã®æ®µã®ããã¹ãã®ããã¼ã¯ãã¯ã¿åºããåçã®å½±é¿ãåãã¾ããããå¤è¦³ã¯å½±é¿ãåãã¾ãã
ç»åãæ®µããã¯ã¹ã«åããã縮å°ãããå ´åã¯ã max-width: 100% ãè¨å®ããæ¨æºçãªã¬ã¹ãã³ã·ãç»åã®è§£æ±ºæ¹æ³ã§å®ç¾ãããã¨ãã§ãã¾ãã
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
}
img {
max-width: 100%;
}
ããå¤ãã®æ®µãçæãããå ´å
段ã®ãªã¼ãã¼ããã¼ã®å¦çæ¹æ³ã¯ãã¡ãã£ã¢ã³ã³ããã¹ããå°å·ãªã©ã®æçåããã¦ããããã¦ã§ããã¼ã¸ãªã©ã®é£ç¶ãã¦ãããã§ç°ãªãã¾ãã
æçåãããã¡ãã£ã¢ã§ã¯ã 1 ã¤ã®æçï¼ä¾ãã° 1 ãã¼ã¸ï¼ã段ã§åã¾ãã¨ãæ®µã¯æ°ãããã¼ã¸ã«ç§»åãããããæ®µã§åãã¾ããé£ç¶ã¡ãã£ã¢ã§ã¯ã段ã¯ã¤ã³ã©ã¤ã³æ¹åã«ã¯ã¿åºãã¾ããã¦ã§ãã§ã¯ãããã§ã¹ã¯ãã¼ã«ãã¼ãåºç¾ãã¾ãã
以ä¸ã®ä¾ã§ã¯ãã®ãªã¼ãã¼ããã¼ã®æåãç´¹ä»ãã¾ããæ®µçµã¿ã³ã³ããã¼ã«ã¯ height ãè¨å®ããã¦ãããæ®µãçæãã空éãããå¤ãã®ããã¹ããããã¾ãã®ã§ã段ãã³ã³ããã¼ãã¯ã¿åºãã¦ä½æããã¾ãã
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 200px;
height: 180px;
border: 2px dashed;
}
åç´ã¡ãã£ã¢ã¯ã¨ãªã¼ã®ä½¿ç¨
ã¦ã§ãã§ã®æ®µçµã¿ã®åé¡ã®ä¸ã¤ã«ã段ããã¥ã¼ãã¼ãããé«ãå ´åãèªã¿æã¯èªãã®ã«ä¸ä¸ã«ã¹ã¯ãã¼ã«ããªããã°ãªããªããªãã®ã§ä½¿ãåæãæªããªãã¨ãããã®ãããã¾ãããããé²ãä¸ã¤ã®æ¹æ³ããååãªé«ããããã¨åãã£ãæã«ã ãæ®µçµã¿ããããã£ãé©ç¨ãããã¨ã§ãã
以ä¸ã®ä¾ã§ã¯ã height ã® @media ã¯ã¨ãªã¼ã使ç¨ãã¦ã段çµã¿ããããã£ãé©ç¨ããåã«é«ããæ¤æ»ãã¾ãã
body {
font: 1.2em / 1.5 sans-serif;
}
@media (height >= 300px) {
.container {
column-width: 200px;
}
}
次ã®ã¹ããã
ãã®ã·ãªã¼ãºã®æå¾ã®ã¬ã¤ãã§ã¯ãæçåãæ®µçµã¿ã§ã©ã®ããã«åä½ããããè¦ã¦ã段ãã¾ããã§ã³ã³ãã³ããåå²ãããæ¹æ³ãå¶å¾¡ãã¾ãã