プロのWEB系のコーダーは左揃え必須なのですかね。

質問

プロのWEB系のコーダーは左揃え必須なのですかね。

私は入れ子にする方法なのですが、資生堂もそのようにしていますが、この辺りはどちらでも良いのですかね？

下記のようにしているのですが、改善点があれば教えてください。
http://sample1.digi2.jp/snack.html

また、tableタグは表以外には使わないべきと聞くのですが、表の概念がはっきりしないのですが、上記サイトの場合は表としては中心過ぎるということでしょうか？悪魔で一部であるべきということでしょうか？

また、左揃えかはWEB制作会社やWEBデザイナーによって違うということでしょうか？決まりはないのでしょうか？
ない場合このサイトは良いというソースなど有りましたら教えてください。

回答No.4

神崎 渉瑠（@taloo） · ベストアンサー

No.3です。
一応技術資料ということで出し惜しみ、ごまかさせてください。
float:leftにすれば横並びになります。

内容的にはNo.2と同じです。
<table>を使っては行けない、つまり、<table>以外のタグを使ってスタイルシートでテーブル状（格子状）に並べろ、ということです。
ORUKA1951さんが素材一覧表を作られる時に、どんなタグ、どんなスタイルシートを使われてるのかわかりません。ただORUKA1951さんの今までの発言から察すると、そうとう<table>嫌いのようですので、やはり<table>以外のタグを使って格子状に並べられていると思います。
その方法についてはご本人に聞いてください。

お礼

ありがとうございます。

フロートでボックスをそろえてテーブルのような見た目を作るのですが？
管理が非常に大変ですね。内容が増えると左右のサイズがずれるので、そのたびにCSSで合わすのでしょうか？

回答No.3

神崎 渉瑠（@taloo）

>また、tableタグは表以外には使わないべきと聞くのですが、表の概念がはっきりしないのですが、上記サイトの場合は表としては中心過ぎるということでしょうか？悪魔で一部であるべきということでしょうか？

「中心すぎる」の意味が良く分かりませんが、align="center"のことでしょうか？
その場合はalign="left"やCSSのtext-align: leftを指定して、左寄せにすれば良いと思います。

>プロのWEB系のコーダーは左揃え必須なのですかね。

>また、左揃えかはWEB制作会社やWEBデザイナーによって違うということでしょうか？
デザイナーによって違います。
センタリングの方がカッコいい、見やすいと思うならセンタリングにすればいいと思います。
左寄せや右寄せ、両端揃えが良いと思うなら、左寄せ、右寄せ、両端揃えにすれば良いと思います。

>下記のようにしているのですが、改善点があれば教えてください。
テーブルを使うとき（テーブルレイアウトではなく、れっきとした表の場合）は、
<table border="1">としておいて、あらためてCSSでボーダーを指定する方が良いと思います。

----------------------------
<table>
<thead>
<tr><th>項目</th><th>概要</th></tr>
</thead>
<tbody>
<tr><th>商品名</th><td>味噌屋の味噌ピーナッツ</td></tr>
<tr><th>味</th><td>75点</td></tr>
<tr><th>産地</th><td>

<table>
<thead><tr><th>品名</th><th>産地</th></tr></thead>
<tbody>
<tr><th>ピーナッツ</th><td>九州産</td></tr>
</tbody>
</table>

</td></tr>
</tbody>
</table>

このテーブルのヘッダ部分（<thead>）を省略しても、人間が見たときはそれぞれのセル（<th>ならびに<td>）が何を表しているのか、理解できます。
そのため、あえてヘッダを書かない場合も多いです。
（というよりも、省略されている方が標準になっています。）

このヘッダを書かない状態を箇条書き（辞書的）な書き方にすると、

<dl>
<dt>商品名</dt><dd>味噌屋の味噌ピーナッツ</dd>
<dt>味</dt><dd>75点</dd>
<dt>産地</dt>
<dd>
　　<dl><dt>ピーナッツ</dt><dd>九州産</dd></dl>
</dd>
</dl>

とも書けます。

どちらが良いのか、と言われると、私はどちらでも良いと思います。

見た目はスタイルシートでなんとでもなりますから、
テーブル状に表示したいのなら、わざわざ<dl>で書いてスタイルシートを複雑に組み込むよりは遥かに簡単に作れます。

お礼

ありがとうございます。

左揃えかは人によって自由のようですね。

中心過ぎるとはちょっとした表ではなくコンテンツにがっつりtableを使っているということです。
このようなtableの使い方はの場合はテーブルを使うべきではないということでしょうかということです。

上記のようなサンプルでテーブルど使わない場合どのようにして同じ見た目のコンテンツを作るのでしょうか？まさかdivを無理やりくっつけるのでしょうか？

回答No.2

ORUKA1951

tableは、二次元のデータをあらわすものです。
　出席番号　氏名　点数　順位
　　1　　　　鈴木　　50　　25
　　2　　　　田中　　70　　　2
とか・・。

　なぜ、デザインのためだけにtableを使ってはならないのかは、あまりにもたくさんの根拠があるのでさすがに説明はしませんが、要はネットを利用しているユーザーのためなのです。そもそも、探している情報がどこにあるかが見つけられなかったら、その情報が無駄になるわけですから。実際にそのページに尋ねてきて、著者が想定している端末で閲覧する分には、まったく同じに見えるならどちらでもよいのですが、
・実際にそのページに尋ねてきて、
・著者が想定している端末で閲覧する
　でないユーザーを忘れてます。(^^)

「入れ子」とは、一般的には入れ物の中にまた入れ物を入れるという意味で、質問の意味がわかりません。

「下記のようにしているのですが、」
　これは、
・Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
・Another HTML-lint gateway ( http://cetus.sakura.ne.jp/htmllint/htmllint.html )
・The W3C Markup Validation Service ( http://validator.w3.org/ )
　でまず、チェックしてください。

「左揃え」
　ディスプレイいっぱいに表示させるのが一般的でしょうから、左揃えも中央配置も関係ないです。
　最近は中央に配置することが多いようです。理由は、スマホのように小さなディスプレイから、横幅1900pxを越えるようなものまで、様々なディスプレイがあふれているからです。tableが避けられる理由のひとつもこれなのです。tableだと配置が固定されてしまう。
★一般的なディスプレイでは、本文は最大700px程度で配置し、その左右に目次やトピックスを100px幅ずつ配置する。
★スマホなど小さなディスプレイでは、目次は本文の後に表示してトピックスは表示しない
★幅広のディスプレイでは、全体の幅は1000px程度に抑えて、その中心に700pxの本文と左右150pxずつ目次やトピックスを置く
★スタイルシートを理解しない携帯電話にはシンプルなページとして利用できる。
　のようなデザインが可能になります。

　そのうえ、HTMLやスタイルシートがシンプルでわかりやすくなります。そしてなによりも検索エンジンがページの内容を正確に理解できるようになりますから、ユーザーがページを見つけやすくなります。

　製作者からすれば、ページの製作が極めて楽になるからです。

回答No.1

bvltiggeari

入れ子とはインデントを付ける…ということでしょうか？

これは人それぞれなんで何とも言えませんが、
私も入れ子（インデント付）にします。
その方が構造が見やすいから…という理由です。

逆にツールを使うと左寄せになるみたいなことを聞きました。
（実際に使ったことがあるワケではないので真偽のほどは分かりません。）

私の見解ですが、左寄せにするメリットは
htmlのファイルサイズが小さくなることかと。
たかが数キロバイト、されど…。
今でこそ心配ないですが、昔のガラケーは
表示容量が小さかったですから、改行を消すだの
左寄せにするだのガンバったものです(笑)

逆に入れ子（インデント付）のメリットは
先ほど述べたように構造が見やすくなることかと。
特にtableタグは左寄せだと見辛いです。
（慣れなのかもしれませんが…）

で、どっちがいいの？と言ったら
私はどっちでもいいと思います。

> tableタグは表以外には使わないべき
そんなことはないと思います。
キレイにページの半分のセンターとかは
テーブルの方がやりやすいですからね。

どちらも「見る人が同じように見れればいい」と思ってます。
どんなタグも、ブラウザに表示するためのグッズです。
もちろんレンダリングにかかる時間は変わりますが、
よっぽどデカいページでもない限りは
気付かないレベルの差なんじゃないかと。

> 左揃えかはWEB制作会社やWEBデザイナーによって違うということでしょうか？決まりはないのでしょうか？
ないんじゃないでしょうか。
私は特に決まり等は聞いたことがありません。
生粋のWeb屋ではないので怪しいですが(^^;

> ない場合このサイトは良いというソースなど有りましたら教えてください。
サンプルソースではありませんが、下記のサイトで
同様の内容について意見が書かれてますので、
参考になるかもしれません。
（私と同じような意見でした。）
http://www.salchu.net/blog/log/eid574.html

制作会社のコーディング規約で決まっていれば別ですが、
基本的に自分のやりやすい書き方でいいのではなかと思います。

長々と書いてしまいましたが、私の見解になります。

お礼

ありがとうございます。

左揃えかは人によって自由のようですね。

テーブルをコンテンツに使っても良いということですね。