CSS column-height プロパティ

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

/* キーワード */
column-height: auto;
/* <length> 値 */
column-height: 300px;
column-height: 25em;
column-height: 70vh;
/* グローバル値 */
column-height: inherit;
column-height: initial;
column-height: revert;
column-height: revert-layer;
column-height: unset;

<ol>
 <li>One fish</li>
 <li>Two fish</li>
 <li>Red fish</li>
 <li>Blue fish</li>
 ...
</ol>
<p>-- Dr. Seuss</p>

<ol>
 <li>One fish</li>
 <li>Two fish</li>
 <li>Red fish</li>
 <li>Blue fish</li>
 <li>Black fish</li>
 <li>Blue fish</li>
 <li>Old fish</li>
 <li>New fish.</li>
 <li>This one has a little star.</li>
 <li>This one has a little car.</li>
 <li>Say! What a lot</li>
 <li>Of fish there are.</li>
 <li>Yes. Some are red. And some are blue.</li>
 <li>Some are old. And some are new.</li>
 <li>Some are sad.</li>
 <li>And some are glad.</li>
 <li>And some are very, very bad.</li>
 <li>Why are they</li>
 <li>Sad and glad and bad?</li>
 <li>I do not know.</li>
 <li>Go ask your dad.</li>
 <li>Some are thin.</li>
 <li>And some are fat.</li>
 <li>The fat one has</li>
 <li>A yellow hat.</li>
 <li>From there to here, from here to there,</li>
 <li>Funny things</li>
 <li>Are everywhere.</li>
</ol>
<p>--Dr. Seuss</p>

ol {
 column-width: 150px;
 gap: 2em;
 column-height: 3em;
}

<h1>HTML、CSS、JavaScript の概要</h1>
<p>
 <strong>HTML</strong> (HyperText Markup Language) はウェブのもっとも基本的な構成要素です。 HTML はウェブページの基本レイアウトに従ってウェブページの*コンテンツ*を記述し定義するものです。HTML に隣接する他の技術としては、ウェブページの表示や表現を記述するもの (CSS) または機能や振る舞いを記述するもの (JavaScript) があります。
</p>
<p>
 「ハイパーテキスト」はウェブページから別なページに、ウェブサイト内でもウェブサイト間でも、接続するリンクを示します。リンクはウェブの基礎的な特徴です。コンテンツをインターネットにアップロードして他の人々が作成したページにリンクすれば、 World Wide Web の活発な参加者になれます。
</p>
<p>
 HTML ではウェブブラウザーのテキスト、画像、その他のコンテンツを記述するために「マークアップ」を使用します。 HTML のマークアップには、
 <a href="/ja/docs/Web/HTML/Reference/Elements/head"
 ><code>&lt;head&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/title"
 ><code>&lt;title&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/body"
 ><code>&lt;body&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/header"
 ><code>&lt;header&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/footer"
 ><code>&lt;footer&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/article"
 ><code>&lt;article&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/section"
 ><code>&lt;section&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/p"><code>&lt;p&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/div"
 ><code>&lt;div&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/span"
 ><code>&lt;span&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/img"
 ><code>&lt;img&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/aside"
 ><code>&lt;aside&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/audio"
 ><code>&lt;audio&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/canvas"
 ><code>&lt;canvas&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/datalist"
 ><code>&lt;datalist&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/details"
 ><code>&lt;details&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/embed"
 ><code>&lt;embed&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/nav"
 ><code>&lt;nav&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/search"
 ><code>&lt;search&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/output"
 ><code>&lt;output&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/progress"
 ><code>&lt;progress&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/video"
 ><code>&lt;video&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/ul"
 ><code>&lt;ul&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/ol"
 ><code>&lt;ol&gt;</code></a
 >,
 <a href="/ja/docs/Web/HTML/Reference/Elements/li"
 ><code>&lt;li&gt;</code></a
 >
 その他のたくさんの特殊な「要素」を用います。
</p>
<p>
 HTML 要素は文書中で、<code>&lt;</code> および <code>&gt;</code> で囲まれた要素名で構成される「タグ」によって区別されます。タグ内の要素名は、大文字と小文字の区別がありません。つまり、大文字でも、小文字でも、混在して書いても構いません。
 例えば、<code>&lt;title&gt;</code> タグは <code>&lt;Title&gt;</code> や <code>&lt;TITLE&gt;</code> やその他の方法で書くことができます。ただし、タグを小文字で書くのが慣習となっており、推奨されています。
</p>
<hr />
<p>
 <strong>カスケーディングスタイルシート</strong> (Cascading Style Sheets、<strong>CSS</strong>) は<a href="/ja/docs/Web/API/StyleSheet">スタイルシート</a>言語であり、<a href="/ja/docs/Web/HTML">HTML</a> や <a href="/ja/docs/Web/XML/Guides/XML_introduction">XML</a>(派生言語である <a href="/ja/docs/Web/SVG">SVG</a>、<a href="/ja/docs/Web/MathML">MathML</a>、<a href="/ja/docs/Glossary/XHTML">XHTML</a> などを含む)で記述された文書の体裁や見栄えを表現するために用いられます。CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。
</p>
<p>
 CSS は<strong>オープンウェブ</strong>の核となる言語に含まれており、<a href="https://www.w3.org/Style/CSS/#specs" class="external" target="_blank"
 >W3C 標準仕様</a
 >によってウェブブラウザー間で標準化されています。以前は CSS 仕様書の様々な部分が同時に開発されており、最新勧告の版数付けができていました。皆さんも CSS1、CSS2.1、また CSS3 についても聞いたことがあるでしょう。CSS3 や CSS4 にはなりません。すべて単なる "CSS" と、バージョン番号を持つ個々の CSS モジュールとなりました。
</p>
<p>
 CSS 2.1 以降、仕様の範囲が大幅に拡大し、CSS モジュールごとに進捗状況が大きく異なるようになったため、
 <a
 href="https://www.w3.org/Style/CSS/current-work"
 class="external"
 target="_blank"
 >モジュールごとに勧告を開発して公開する</a
 >ことがより効果的になりました。W3C では、CSS 仕様のバージョン管理の代わりに、
 <a href="https://www.w3.org/TR/css/" class="external" target="_blank"
 >最新の CSS 仕様の安定した状態</a
 >のスナップショットと独立したモジュールの進捗を定期的に取得するようになりました。
 CSS のモジュールは、
 <a
 href="https://drafts.csswg.org/css-color-5/"
 class="external"
 target="_blank"
 >CSS Color Module Level 5</a
 > のように、バージョン番号またはレベルを持つようになりました。
</p>
<hr />
<p>
 <strong>JavaScript</strong> (<strong>JS</strong>) は軽量でインタープリター型(あるいは<a href="/ja/docs/Glossary/Just_In_Time_Compilation"
 >実行時コンパイルされる</a
 >)<a href="/ja/docs/Glossary/First-class_Function">第一級関数</a>を備えたプログラミング言語です。
 ウェブページでよく使用されるスクリプト言語として知られ、
 <a
 href="https://ja.wikipedia.org/wiki/JavaScript#その他の環境での利用"
 class="external"
 target="_blank"
 >多くのブラウザー以外の環境</a
 >、例えば <a href="/ja/docs/Glossary/Node.js">Node.js</a> や <a href="https://couchdb.apache.org/" class="external" target="_blank"
 >Apache CouchDB</a
 >
 や
 <a
 href="https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/"
 class="external"
 target="_blank"
 >Adobe Acrobat</a
 > などでも使用されています。 JavaScript は<a href="/ja/docs/Glossary/Prototype-based_programming">プロトタイプベース</a>で、<a href="/ja/docs/Glossary/Garbage_collection">ガベージコレクションのある</a>、<a href="/ja/docs/Glossary/Dynamic_typing">動的</a>な言語であり、命令型、関数型、オブジェクト指向など、複数のパラダイムに対応しています。
</p>
<p>
 JavaScript の動的な機能には、ランタイムオブジェクトの構築、可変引数リスト、関数変数、動的スクリプトの作成(<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval"
 ><code>eval</code></a
 > で)、オブジェクトの内包(<a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in"
 ><code>for...in</code></a
 >
 と
 <a
 href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object#静的メソッド"
 ><code>Object</code> ユーティリティ</a
 >で)、ソースコードの復元(JavaScript 関数はそのソーステキストを格納し
 <a
 href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"
 ><code>toString()</code></a
 > で復元可能)が含まれます。
</p>
<p>
 この章では JavaScript 言語自体について、すなわちウェブページや他のホスト環境に限定されないコアの部分に限定して解説しています。ウェブページ特有の <a href="/ja/docs/Glossary/API">API</a> 群の情報を得たい場合は <a href="/ja/docs/Web/API">Web API</a> と <a href="/ja/docs/Glossary/DOM">DOM</a> を参照してください。
</p>
<p>
 JavaScript の規格書は
 <a href="https://tc39.es/ecma262/" class="external" target="_blank"
 >ECMAScript Language Specification</a
 >
 (ECMA-262)および
 <a href="https://tc39.es/ecma402/" class="external" target="_blank"
 >ECMAScript Internationalization API specification</a
 > (ECMA-402) です。私たちは、あるブラウザーが機能を実装するとすぐに、それを文書化するように努めています。このことは、 <a href="https://github.com/tc39/proposals" class="external" target="_blank"
 >ECMAScript の新しい機能に関するいくつかの提案</a
 >がすでにブラウザーに実装されている場合、MDN の記事の文書や例ではそれらの新しい機能のいくつかを使用する可能性があることを示しています。ほとんどの場合、これは<a href="https://tc39.es/process-document/" class="external" target="_blank"
 >ステージ</a
 > 3 と 4 の間で起こることで、通常は仕様が正式に公開される前です。
</p>
<p>
 JavaScript を<a
 href="https://ja.wikipedia.org/wiki/Java"
 class="external"
 target="_blank"
 >プログラミング言語 Java</a
 >
 と混同しないでください。
 <strong>JavaScript は「インタープリター版の Java」では <em>ありません</em></strong>。 "Java" と "JavaScript" は両方ともアメリカやその他の国においてオラクルの商標または登録商標です。
 しかし、この 2 つのプログラミング言語は構文、セマンティック、利用形態が大きく異なります。
</p>
<p>
 コア言語機能の JavaScript ドキュメントは(多くの部分は純粋な
 <a
 href="/ja/docs/Web/JavaScript/Reference/JavaScript_technologies_overview"
 >ECMAScript</a
 >)、以下のものがあります。
</p>

body {
 column-width: 150px;
 column-rule: 2px solid red;
 gap: 3em 2em;
 padding: 0 2em;
 column-height: 95vh;
 column-wrap: wrap;
}

h1 {
 column-span: all;
}
p:first-of-type {
 margin-top: 0;
}

html {
 scroll-snap-type: y mandatory;
}
::column {
 scroll-snap-align: start;
}

* {
 box-sizing: border-box;
}
html {
 font-family: "Arial", sans-serif;
}
p {
 line-height: 1.5;
}
@supports not (column-height: 15em) {
 body::before {
 content: "このブラウザーは 'column-height' プロパティに対応していません。";
 background-color: wheat;
 position: fixed;
 inset: 40% 0;
 height: fit-content;
 text-align: center;
 padding: 1rem 0;
 }
}

<form>
 <div>
 <label for="columns">
 <code>column-count <output id="columns-output">3</output></code>
 </label>
 <input type="range" min="3" max="6" value="3" id="columns" />
 </div>
 <div>
 <label for="column-height">
 <code>column-height <output id="column-height-output">20em</output></code>
 </label>
 <input type="range" min="10" max="30" value="20" id="column-height" />
 </div>
</form>

const columnsRange = document.getElementById("columns");
const columnsOutput = document.getElementById("columns-output");
const columnHeightRange = document.getElementById("column-height");
const columnHeightOutput = document.getElementById("column-height-output");
columnsRange.addEventListener("input", () => {
 document.body.style.columnCount = columnsRange.value;
 columnsOutput.textContent = columnsRange.value;
});
columnHeightRange.addEventListener("input", () => {
 document.body.style.columnHeight = `${columnHeightRange.value}em`;
 columnHeightOutput.textContent = `${columnHeightRange.value}em`;
});

body {
 column-count: 3;
 column-height: 20em;
 column-rule: 2px solid red;
 gap: 3em 2em;
 padding: 0 2em;
}

form {
 border: 1px solid black;
 background-color: white;
 padding: 10px;
 position: fixed;
 bottom: 1px;
 right: 1px;
}
form div {
 display: flex;
 gap: 1em;
 align-items: center;
 justify-content: space-between;
}

MDN の改良に協力

このページは MDN の貢献者によって 2026年6月10日 に最終更新されました。