質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

3回答

7187閲覧

HTML5で段組みを使わないレイアウト方法を教えてほしい

redhat98

総合スコア236

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2017/05/17 00:11

以前、HTML5 関連の記事を読んでいる時に、
HTML5は段組みを使わないでCSSで組んだほうが良いという記事を読んだことがあります。

CSSを使えば段組みをしなくてもOKというのは理解できるのですが、
具体的にどのようにCSSを使えば良いのでしょうか?

次のHTMLをCSSを使ったサンプルに変換して頂けますか?
また、そもそも私の認識が間違えていた場合は、指摘をお願いします。

html5

1<!DOCTYPE html> 2<html> 3<head> 4</head> 5<body> 6 <table> 7 <tr> 8 <td>検索項目1</td> 9 <td><input></td> 10 <td>~</td> 11 <td><input></td> 12 </tr> 13 <tr> 14 <td>検索項目2</td> 15 <td> 16 <select> 17 <option value="1">1 - 値1</option> 18 <option value="2">2 - 値2</option> 19 </select> 20 </td> 21 </tr> 22 <tr> 23 <td>検索項目2</td> 24 <td><input></td> 25 <td>~</td> 26 <td><input></td> 27 </tr> 28 </table> 29</body> 30</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

##論点整理というか昔ばなし

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の floatflexbox などの指定で並べる事で実現します。

今回は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 02:27

編集2017/05/17 02:40
iss

総合スコア506

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

redhat98

2017/05/17 03:22

回答、ありがとうございます。 > これを、<table> の使用をやめようという話に勘違いする人もたまに居ますが それ、まさしく私です。 サンプルを見て、何でもかんでもtableタグを使う事を良くないという事がわかりました。 さて、私が質問に書いたレベル(一応、検索画面になる予定なんです)の場合、 tableタグを使いますか?
iss

2017/05/17 03:44 編集

提示の検索画面のコードをHTMLにする場合も、 表テーブルで記載すべき内容かどうか微妙なので、 見出しとブロック要素で「<h2>見出し<h2>と<div><input></div>」のように構成するか、 意味合いとして「検索項目のリスト」としても捉えられるので、 LibertyBell3さんの回答にあるように<dl><dt><dd> のリスト要素で構成するのも正解のひとつかと思います。
guest

0

段組というのは table タグのことと理解しました。
この質問の html の場合は table を使うべきだと思います。

html は文書の構成を、css は見た目を表すものです。
表組の入るところには html で table を使うべきものですが、一方で表も無いのに見た目を整えるためだけに table を使うというのは、文書の構成を html で表現できなくなることなので css を使いましょうということです。

実際にどうやって css で段組を表現するかについては、ちょっと検索したら見やすい実例を踏まえた詳しい解説を何百何千何万と見つけることができますし、ここで解説してもそれを上回るものにはならないので省略します。

投稿2017/05/17 00:33

Zuishin

総合スコア28656

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

redhat98

2017/05/17 00:48

このレイアウトの場合は、tableタグをベースに組んだ方が良いということですね。 更にcssでかっこよくする、といったイメージでしょうか。 回答ありがとうございました。
guest

0

細かいところ(装飾やマージン)は省いて書きます。
ご自身で調整ください。

HTML

1<div id="box"> 2 <dl> 3 <dt>項目名1</dt> 4 <dd><input type="text">~<input type="text"></dd> 5 </dl> 6 <dl> 7 <dt>項目名2</dt> 8 <dd> 9 <select> 10 <option value="選択肢1">選択肢1</option> 11 <option value="選択肢2">選択肢2</option> 12 </select> 13 </dd> 14 </dl> 15 <dl> 16 <dt>項目名3</dt> 17 <dd><input type="text">~<input type="text"></dd> 18 </dl> 19</div>

CSS

1#box { 2 width:100%; 3 text-align:left; 4} 5#box dl { 6 clear:both; 7 border-bottom:1px solid #ccc; 8 width:100%; 9} 10#box dl dt { 11 float:left; 12 width:10em; 13} 14#box dl dd { 15 margin-left:10em; 16} 17#box dl dd input { 18 padding:5px; 19 width:40%; 20} 21#box dl dd select { 22 padding:5px; 23}

こんな感じ。

投稿2017/05/17 00:52

LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問