##論点整理というか昔ばなし
CSSの策定もままならなかった十数年前までは、ホームページの横方向の段組みレイアウトは全て、
本来「表組み」を表現するための要素 <table>
を、「仕方なく」使って表現されていました。
段組みは <table> ではなく css で表現しましょう
という話は、その頃にW3Cによる策定とブラウザ対応が急速に進んだ スタイルシート:CSS
の記法を使って、
より「正しいHTMLの文書構造」を取り戻そうという流れから生まれた、当時の標語のようなものです。
※これを、<table>
の使用をやめようという話に勘違いする人もたまに居ますが、本来の用途の通り「表組み」で表すべきコンテンツは、そのまま <table>
を使うのが正しいので注意が必要です。
##CSSによる段組みの記法
サンプルで提示されたHTMLがあまり段組みの解説向きではないので、
ベースのコードを、記事が横3つに並ぶ段組みに変更します。(すいません)
HTML
1<!DOCTYPE html>
2<html>
3<head><meta charset="utf-8"></head>
4<body>
5<h1>コンテンツ一覧</h1>
6<table>
7<tr>
8<th>コンテンツ1<th>
9<th>コンテンツ2<th>
10<th>コンテンツ3<th>
11</tr>
12<tr>
13<td>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。<td>
14<td>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。<td>
15<td>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。<td>
16</tr>
17</table>
18</body>
19</html>
上記の様に、3つのコンテンツを横3列に並べたい場合(いわゆる3カラム)、
正しいHTMLの文書構造で記載すると、
以下のように 見出し要素 <h1>~<h6>
と、文章段落要素 <p>
で記載し、1つのセットを<div>
など包括要素で囲む形になります。
HTML
1<div id="section">
2
3<h1>コンテンツ一覧</h1>
4
5<div class="article">
6<h2>コンテンツ1</h2>
7<p>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</p>
8</div>
9
10<div class="article">
11<h2>コンテンツ2</h2>
12<p>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</p>
13</div>
14
15<div class="article">
16<h2>コンテンツ3</h2>
17<p>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</p>
18</div>
19
20</div>
これをCSSを使ってレイアウトするには、
各カラムを包括する <div>
のブロック要素に対して、
CSSの float
や flexbox
などの指定で並べる事で実現します。
今回はfloat
を使って並べてみます。
CSS
1
2/*記事セット.articleをfloat:leftで左並びにする*/
3.article {
4float:left;
5width:33.3%;
6}
7
8/*floatクリア処理*/
9#section {
10overflow:hidden;
11zoom:1;
12}
13
14/*おまけ成形*/
15h2,p {padding:10px;}
16
CSSのレイアウトに慣れると flaot
よりもflexbox
の指定を使って並べるほうが向いているケースもあるので、興味があればそちらも調べてみると良いかと思います。
※floatクリアについて
floatで要素を横に並べる場合、並べた要素の親要素(このコードでは div#section
)においてクリア処理をする必要があります。
これも色々なクリア方法があるので clearfix
などで調べてみると良いかと思います。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/17 03:22
2017/05/17 03:44 編集