CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

【CSS3】column-spanプロパティでマルチカラムの要素を全カラムにまたがらせる方法

CSS3のマルチカラムレイアウトでは、column-countやcolumn-gapなどを使って、新聞のような段組みを簡単に作成できます。しかし、「見出しだけすべてのカラムにまたがって表示したい」という場面もあります。そんなときに活躍するのがcolumn-spanプロパティです。

column-spanプロパティとは？

column-spanプロパティは、マルチカラムコンテナ内の要素が複数のカラムにまたがって表示されるかどうかを指定するためのプロパティです。指定できる主な値は次のとおりです。

  • none … 要素は複数のカラムにまたがりません（初期値）。
  • all … 要素はすべてのカラムにまたがって表示されます。この要素を境に、前後でカラムが分断されます。

たとえば、段組みされた記事の中でタイトルや区切り見出しだけ全体に渡って広げたい場合などに便利です。

使用例

次のコードは、4カラムの段組みの中で、見出し（h2要素）にcolumn-span: allを指定した例です。旧バージョンのChrome・Safari・Opera向けに-webkit-プレフィックスも併記しています。

<html>
<head>
<style>
    .multi {
        /* カラム数を指定 */
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;

        /* カラム間の余白（ギャップ）を指定 */
        -webkit-column-gap: 40px;
        -moz-column-gap: 40px;
        column-gap: 40px;

        /* カラム間の罫線（スタイル・色・幅）を指定 */
        column-rule-style: solid;
        column-rule-color: #ff00ff;
        -webkit-column-rule-width: 5px;
        -moz-column-rule-width: 5px;
        column-rule-width: 5px;
    }

    /* 見出しをすべてのカラムにまたがらせる */
    .multi h2 {
        -webkit-column-span: all; /* Chrome・Safari・Opera */
        column-span: all;
    }
</style>
</head>

<body>
<div class="multi">
<h2>This is demo text</h2>
    Tutorials Point originated from the idea that there exists a class of readers
    who respond better to online content and prefer to learn new skills at their
    own pace from the comforts of their drawing rooms. The journey commenced with
    a single tutorial on HTML in 2006 and elated by the response it generated, we
    worked our way to adding fresh tutorials to our repository which now proudly
    flaunts a wealth of tutorials and allied articles on topics ranging from
    programming languages to web designing to academics and much more.
</div>
</body>
</html>

実行結果

ブラウザで表示すると、見出し「This is demo text」が4つのカラムすべてにまたがって横断表示され、その下から本文が4段組で流し込まれていることが確認できます。

【CSS3】column-spanプロパティでマルチカラムの要素を全カラムにまたがらせる方法

対応ブラウザ

column-spanプロパティは、Chrome、Edge、Firefox、Safari、Operaといった主要なモダンブラウザで標準サポートされています。ただし、古いWebKit系ブラウザでは-webkit-column-spanの指定が必要となるため、両方を併記しておくと安心です。なお、Internet Explorerでは利用できない点に注意してください。

  1. CSS3のマルチカラムレイアウト：column-countプロパティの使い方

    CSS3のマルチカラムレイアウトにおけるcolumn-countプロパティは、要素の内容を何列に分割して表示するかを指定するためのプロパティです。新聞や雑誌のような段組みレイアウトを、HTMLの複雑な構造を組むことなく簡単に実現できます。 このプロパティを使うことで、テキストが自動的に指定した列数に分割され、ブラウザが内容量に応じて各列の高さを調整してくれます。 column-countプロパティの実装例 以下のコードを実行すると、CSSでcolumn-countプロパティを実装した動作を確認できます。 <html> <head> <style> .mult

  2. CSS3のtransitionショートハンド（短縮）プロパティの使い方

    CSSのtransitionショートハンド（短縮）プロパティを使うと、transition-property（遷移対象のプロパティ）、transition-duration（遷移にかかる時間）、transition-timing-function（変化の速度カーブ）、transition-delay（遅延時間）という4つの個別プロパティを、たった1行にまとめて指定することができます。値は「プロパティ名 → 時間 → タイミング関数 → 遅延」の順にスペース区切りで記述します。複数のプロパティを同時にアニメーションさせたい場合は、それぞれの指定をカンマ（,）で区切って並べます。記述例以下は、tr