知ってると便利なHTMLやCSSの紹介コーナー。今回は幅指定付きのspanタグを利用した多段組みの書き方です。

幅付き<span>で多段組み

CSSで<span>タグに「float:left」属性を付け、さらにwidthを指定します。 こうするとspan要素が固定幅で表示されます。

他の場所のspanに影響が出ないように、この設定はmulticolクラスの中でのみ有効とします。

<style>
.multicol span { float: left; width: 128px; }
</style>

<div class="multicol">
<span>第1章</span><span>これは</span>幅を指定したspanによる<br>
<span>第1章 続き</span><span>多段組みの</span>サンプルです。<br>
</div>

<ol class="multicol">
<li><span>spanの外は</span>ブロック要素なら何でも可。</li>
<li><span>リストも可。</span>いろいろ工夫してみてね。</li>
</ol>

実際に表示すると次のようになります。

1. spanの外はブロック要素なら何でも可。
2. リストも可。いろいろ工夫してみてね。