column-spanとは
- ここで説明するcolumn-spanとは次の語句からなるCSSのプロパティです。
- column
- 読み: カラム
意味: 列 - span
- 読み: スパン
意味: 全長、全範囲
column-spanプロパティの概要
このプロパティは、段組みレイアウトの列に要素をまたがせるように表示することができます。
段組みとは段落を2列以上に分けて文字や図などを配列することをいいます。 その段組みの列を無視して、端から端までにまたがり要素を表示することができます。
構文
サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。
セレクター{column-span: 設定値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
サンプルは親要素にdiv要素を、子要素にはh2要素とp要素を使用しています。 要素が分かりやすいように予め以下の設定をしてコード内に記載しています。
サンプルコード: CSS
<style>
div{
background-color: ##khaki;
border: thin solid ##darkgray;
margin: 10px;
padding: 10px;
width: 95%;
columns: 3;
}
h2{
background-color: ##lightgreen;
margin-bottom: 10px;
padding: 5px;
}
p{
background-color: ##lightpink;
margin: initial;
padding: 5px;
}
</style>
サンプルコード: HTML
<body>
<div>
<h2>見出し</h2>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</div>
</body>
初期値: none;
初期値のnoneは、 無いという意味で要素はまたがりません。
上記のサンプルコードに記載している通り、親要素のdivに対して columns: 3; の設定をしていますので、 h2要素に、この初期値を設定すると通常の段落として扱われるため、3つの段落にまたがせることはできません。
段落
段落
段落
h2{column-span: none;}キワード値: all
allキーワードは要素が全ての段落にまたがらせることができます。
結果を見るとh2要素が左端から右端までに渡り、またがったように表示されます。
段落
段落
段落
h2{column-span: all;}グローバル値
column-spanプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。
- inheritは親要素の値の継承を促します。
- initialは値を初期値の none に戻します。
-
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{column-span: グローバル値;}補足説明
- フロート内に配置された、フローティングや絶対配置がなされていない全てのブロックレベル要素に適用可能
- 親要素の値を継承しない
まとめ
コードの部分をクリックすると、サンプルにCSSが反映されます。
column-span: none;
column-span: all;
段落
段落
段落