HTML DOMのcolumnSpanプロパティとは？構文・設定値・サンプルコードを解説
columnSpanプロパティとは
HTML DOMのcolumnSpanプロパティは、要素が複数のカラム（段組み）にどのようにまたがって表示されるかを指定するためのプロパティです。CSSのcolumn-countで段組みレイアウトを作成した際に、見出しや強調したい段落だけを全カラムにまたがらせたい場合などに活用できます。
構文
columnSpanプロパティをJavaScriptから設定する場合、次のような構文を使用します。
object.style.columnSpan = "1|all|initial|inherit";
プロパティ値の一覧
columnSpanプロパティに設定できる値と、それぞれの意味は以下の表の通りです。
| 値 | 説明 |
|---|---|
| 1 | 要素がちょうど1つのカラムにまたがるようにします。デフォルト値です。 |
| all | 要素がすべてのカラムにまたがるようにします。 |
| initial | このプロパティを初期値に戻します。 |
| inherit | 親要素のプロパティ値を継承します。 |
使用例
ここでは、columnSpanプロパティを実際に使ったサンプルコードを見てみましょう。この例では、3カラムの段組みレイアウトの中にある段落に対して、ボタンをクリックするとcolumnSpanが「all」に変更され、段落がすべてのカラムにまたがって表示されるようになります。
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
column-count: 3;
background-color: papayawhip;
}
#P1{
background-color: lightcyan;
font-size: 1.4em;
}
</style>
<script>
function changeColumnSpan(){
document.getElementById("P1").style.columnSpan="all";
document.getElementById("Sample").innerHTML="columnSpanは「all」に設定されました";
}
</script>
</head>
<body>
<div id="DIV1">
<p id="P1">これはサンプルの段落見出しです</p>
これはdiv内のランダムなテキストです。まもなく文字化けします。
adkasfdlajfkfask 。テキストは元に戻りました。
</div>
<p>下のボタンをクリックすると、上のdivのcolumnSpanプロパティが変更されます</p>
<button onclick="changeColumnSpan()">Change Column Span</button>
<p id="Sample"></p>
</body>
</html>
出力結果
上記のコードを実行すると、画面には次のように表示されます。
続いて、「Change Column Span」ボタンをクリックしてみましょう。
ボタンをクリックすると、青い背景の段落見出しが3カラムすべてにまたがって横断表示されることが確認できます。このように、columnSpanプロパティを使えば、段組みレイアウト内で特定の要素だけを目立たせる演出が簡単に実現できます。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの quotes プロパティの使い方を徹底解説
HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri