JavaScriptで段組み（カラム）を埋める方法：columnFillプロパティの使い方
columnFillプロパティとは
JavaScriptで段組み（マルチカラムレイアウト）のコンテンツの流し込み方を制御するには、columnFillプロパティを使用します。このプロパティには、主に以下の2つの値を指定できます。
- auto：コンテンツを最初のカラムから順番に埋めていきます
- balance：全カラムに対してコンテンツを均等に分割して配置します
サンプルコード
以下のコードは、JavaScriptを使って4つのカラムを作成し、バランスよくコンテンツを配置する実装例です。ボタンをクリックすると、表示中のテキストが4列の段組みに分割されます。
<!DOCTYPE html>
<html>
<body>
<p>下のボタンをクリックして4列のカラムを作成</p>
<button onclick="display()">Columns</button>
<div id="myID">
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. 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. This is demo text. This is demo text.
</div>
<script>
function display() {
document.getElementById("myID").style.columnCount = "4";
document.getElementById("myID").style.columnFill = "balance";
}
</script>
</body>
</html>コードの解説
ボタンがクリックされると、display()関数が呼び出されます。この関数では、まずcolumnCountプロパティに「4」を設定して4列の段組みレイアウトを作成しています。続いて、columnFillプロパティに「balance」を指定することで、テキストコンテンツが各カラムに均等に振り分けられます。
もし「auto」を指定した場合は、コンテンツが1列目から順に埋められ、最後のカラムだけ余白が残る形になります。デザインの意図に応じて、適切な値を選択してください。
-
JavaScriptでテキストをクリップボードにコピーする方法【サンプルコード付きで解説】
JavaScriptでテキストをクリップボードにコピーするには？ Webアプリや管理画面などで、「コピー」ボタンをワンクリックするだけでテキストをクリップボードにコピーできれば、ユーザー体験は大きく向上します。JavaScriptを使えば、この機能はごくシンプルなコードで実装できます。 本記事では、document.execCommand(copy) を使った定番の実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 サンプルコード 以下は、入力フィールド内のテキストをボタン一つでクリップボードにコピーする完全なHTMLの例です。 <!DOCTYPE html>
-
JavaScriptでテキストを切り替える（トグルする）方法を解説
JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>