質問: 以前、HTML5 関連の記事を読んでいる時に、 HTML5は段組みを使わないでCSSで組んだほうが良いという記事を読んだことがあります。 CSSを使えば段組みをしなくてもOKというのは理解できるのですが、 具体的にどのようにCSSを使えば良いのでしょうか? 次のHTMLをCSSを使ったサンプルに変換して頂けますか? また、そもそも私の認識が間違えていた場合は、指摘をお願いします。 ``` 検索項目1 ~ 検索項目2 1 - 値1 2 - 値2 検索項目2 ~ ```
回答: 論点整理というか昔ばなし CSSの策定もままならなかった十数年前までは、ホームページの横方向の段組みレイアウトは全て、 本来「表組み」を表現するための要素 `` を、「仕方なく」使って表現されていました。 > > **段組みは ではなく css で表現しましょう** > > > という話は、その頃にW3Cによる策定とブラウザ対応が急速に進んだ `スタイルシート:CSS` の記法を使って、 より「**正しいHTMLの文書構造**」を取り戻そうという流れから生まれた、当時の標語のようなものです。 ※これを、`` の使用をやめようという話に勘違いする人もたまに居ますが、本来の用途の通り「表組み」で表すべきコンテンツは、そのまま `` を使うのが正しいので注意が必要です。 CSSによる段組みの記法 サンプルで提示されたHTMLがあまり段組みの解説向きではないので、 ベースのコードを、記事が横3つに並ぶ段組みに変更します。(すいません) ``` コンテンツ一覧 コンテンツ1 コンテンツ2 コンテンツ3 つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。 つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。 つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。 ``` 上記の様に、3つのコンテンツを横3列に並べたい場合(いわゆる3カラム)、 正しいHTMLの文書構造で記載すると、 以下のように 見出し要素 `~`と、文章段落要素 ``で記載し、1つのセットを``など包括要素で囲む形になります。 ``` コンテンツ一覧 コンテンツ1 つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。 コンテンツ2 つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。 コンテンツ3 つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。 ``` これをCSSを使ってレイアウトするには、 各カラムを包括する `` のブロック要素に対して、 CSSの `float` や `flexbox` などの指定で並べる事で実現します。 今回は`float`を使って並べてみます。 ``` /*記事セット.articleをfloat:leftで左並びにする*/ .article { float:left; width:33.3%; } /*floatクリア処理*/ #section { overflow:hidden; zoom:1; } /*おまけ成形*/ h2,p {padding:10px;} ``` CSSのレイアウトに慣れると `flaot`よりも`flexbox`の指定を使って並べるほうが向いているケースもあるので、興味があればそちらも調べてみると良いかと思います。 ※floatクリアについて floatで要素を横に並べる場合、並べた要素の親要素(このコードでは `div#section` )においてクリア処理をする必要があります。 これも色々なクリア方法があるので `clearfix` などで調べてみると良いかと思います。