文字位置調整について

質問

以下ソースコードがあります。
この時、ulリストのmargin-leftで10px開けたいのです。

<h1>CPUとは</h1>
<p>CPUは、コンピュータの頭にあたります。以下種類のものがあります<p>

<ul>
　<li>Intel</li>
　<li>AMD</li>
</ul>

この時、
<ul>タグに、「margin-left：10px」とするべきなのか？
以下ソースのように<div>ブロックを設けて、「margin-left：10px」とするべきなのでしょうか。

<h1>CPUとは</h1>
<p>CPUは、コンピュータの頭にあたります。以下種類のものがあります<p>

<div class="box">
　<ul>
　　<li>Intel</li>
　　<li>AMD</li>
　</ul>
</div>

仕様書見る限りでは、
>この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。
と書いてあるし、ulタグよりdivの方がいいと思うのですが、

ご教授お願いします。

回答No.3

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

使用するタグの数が少ない方が、ダウンロードサイズ（通信時間）が短くなります。

<div>を付けておくと、たとえば

<ul>
<li>Intel</lli>
<li>AMD</li>
</ul>
<p class="note">但し書きなど</p>

などと追加した時に、調整しやすくなります。

一長一短ありますので、一概にこれだということはできません。

お礼

>などと追加した時に、調整しやすくなります
やっぱりそうですか。

色々なタグが混ざってきた場合、調整を考えると提示いただいた
タグ構造が一番レイアウト等調整しやすいんじゃないかと
思っておりました。

ただ、記述方法的にまずいのかなと思って質問させていただきました。

すっきりしました。ありがとうございました。

回答No.4

ORUKA1951

＞ulの下に、pやtableが来た場合、ulのmargin領域と同じ指定をする必要があると考えています。

　ここが、間違っているのですよ。divは、汎用ブロックと言って文書構造上でひとつのグループに所属するものを他と区別するために用いるものです。
　ulに続いて、同じ構造に属する段落やtableがあればそれらを括ってグループ化するために使用するのです。デザインは忘れてください。

HTML5で考えると理解しやすいと思いますのでHTML5でマークアップすると
<section id="WhatIsCPU">
　<h1>CPUとは</h1>
　<p>CPUは、コンピュータの頭にあたります。以下種類のものがあります<p>
　<section>
　　<h2>主なメーカー</h2>
　　<p>主要なナメーカーには・・・・</p>
　　<ul>
　　　<li>Intel</li>
　　　<li>AMD</li>
　　　<li>Qualcomm</li>
　　</ul>
　　<section>
　　　<h3>Intel</h3>
　　　<p>Intelは・・・</p>
　　</section>
　</section>
　<section>
　　<h2>CPUの仕組み</h2>
・・・【中略】・・・
　　<figure>。。</figure>
　</section>
</section>

となるでしょう。HTML4だと、それぞれが、<div class"section">になるだけです。あなたが本を書くときに、節、章、項・・・と階層を作ることを意識すれば良いです。Texの経験があればよいのですが。
　(ちなみにHTML5ではひとつのsectionにひとつの見出し(heading)のみ入ります。)

----------------------
＞もし、h2の下に「ul、p、table」タグが出てきた、同じ左余白を要求する場合、
＞「ulで指定」「pで指定」「tableで指定」と
＞3回も指定することになり修正するにしても手間かなと思ったのです。
　それらも字下げしたいということは、【必ず文書構造もそうなっているはず】なのですよ。この様にデザインしたら理解しやすいとイメージされた時点で、それは文書構造から来る必然だと考えてください。
　そして、その文書構造をHTMLできちんとマークアップしていけばよいのです。

　HTMLがきちんとできていないと、いちいちmarginを指定したり、classをたくさん振ったりすることになるのです。

上記の例で言うと単に
section{margin-left:1em;}
とするだけで、節→章→項と下るたびに一文字ずつまとめて字下げされるはずですし、
body>section section section{margin-left:0;}
で項以下のブロックの字下げはされなくなるはずです。

＞例えclassを付けたとしても、その3つのタグにclassを付与するという3度手間が発生すると思ったのです。

　div.section ul,div.section p,div.section table{margin-left:1em;}
いちいちつける必要なんてないですし、こう書く方がとsection(本文)の中のul,p,tableというブロックは字下げしているとわかりやすいです。いっそのこと
　div.section>*{margin-left:1em;}
で良いかも。

　この二つ-----------以下はHTMLがきちんとマークアップされていないときの代替方法です。HTMLさえきちんと書けていれば、こんな複雑なことをする必要はありませんね。

<div class="box">なんてclass名をつけなくなったらこの段階は卒業かな。

補足

補足ありがとうございます。

例で挙げて頂いた

　　<h2>主なメーカー</h2>
　　<p>主要なナメーカーには・・・・</p>
　　<ul>
　　　<li>Intel</li>
　　　<li>AMD</li>
　　　<li>Qualcomm</li>
　　</ul>

この部分ですが、どうしても、

「pタグ・ulタグ」を　h2タグから1文字ずらしたい時
どうしたらいいのでしょうか？

ということなのです。
確かに、おっしゃられるようにsectionタグで
指定すれば、1文字ずらせば全部のセクションでずれるのはわかります。

「H2タグ」　と　「pタグ・ulタグ」
の文字の開始位置をずらしたいのです。

なので、「taloo様と同じ考えに私もいたったのです。」

もしかして、
「ORUKA1951様の構造」で

p,ul{
　margin-left:1em;
}

こうするのがいいのでしょうか？

回答No.2

ORUKA1951

＞仕様書見る限りでは、
＞>この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに
＞応じられるようにできる。
＞と書いてあるし、

　これは注意が必要です。その文章の前段には
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。』
　と書かれていて・・・これがその段落の主文です・
また
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
CSSではclass属性が非常に大きな力を持っている。 したがって文書作成者は、体裁に殆ど何の関係も無い要素（HTMLだとDIV要素やSPAN要素など）をベースにして、それらにclass属性でスタイル情報を与えれば、独自の構造化言語を設計できると考えられる。 しかし、文書の構造要素は広く受け入れられている一般的意味を持つ場合が多いので、こういった使用法は避けるべきである。 文書作成者が定めたクラス名では、意味を理解してもらえない場合もある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#class-html )］より

　端的に言うと、

UL自体に、すでに箇条書き(順不同リスト)という意味があるのですから、わざわざdivで囲む必要はないです。特別他のULと差をつけたければUL自体にclass名やid名をつければすむことです。

　この場合、たとえば本文記事内のUL/OLについて設定するのでしたら
<div class="section">
　<h2>章見出し</h2>
　<p>段落</p>
　<p>段落</p>
　<ul>
　　<li></li>
　　<li></li>
　</ul>
にて、
div.section ul{margin:0.5em 1em;padding:0;}
div.section ul li{padding-left:1em;}
とか指定すれば良いです。

　marginやpaddingを指定するのは、ブラウザによって外見上は同じでもmarginであけるか、paddingであけるかの違いがあるから統一するためです。

お礼

情報ありがとうございます。

教えて頂いたHTMLでは、

CSS何も指定しない場合、
divの入れ物の左端にくっつく形となると思います。

また教えて頂いたように、
ulを指定して、margin指定したら解決できそうなんですが、
ulの下に、pやtableが来た場合、
ulのmargin領域と同じ指定をする必要があると考えています。

もし、h2の下に「ul、p、table」タグが出てきた、同じ左余白を要求する場合、
「ulで指定」「pで指定」「tableで指定」と
3回も指定することになり修正するにしても手間かなと思ったのです。

例えclassを付けたとしても、その3つのタグにclassを付与するという
3度手間が発生すると思ったのです。

そうなると、やはりdiv指定の方がスマートになるんじゃないかな。
と思ったのです。

回答No.1

naokita

単純なソースなら前者の方が良いです。

特に最小限で書いた方が良い（divは必要最小限）のに敢て<div class="box">は不要です。
つまり、HTMLレベルでは後者は不要です。
但し、
デザインレベルで必要になる場合はあります。
<div class="box">内に別のコンテンツを一緒に置く場合は、
<div>があった方が便利ですし・・・
<div class="box">に背景画像やulにも別色や罫線を設定する時は、
<div>で囲わないと表現できませんよね・・・
floatとclearの関係で<div>を設置する場合もありますし、隣に別のコンテンツを置く場合にどうしようか？とか。

＞この時、ulリストのmargin-leftで10px開けたいのです。
この表示結果だけを想定すると、
　・ <div class="box" style="margin-left:10px;">
　・ <ul style="margin-left:10px;">
　・ <li style="margin-left:10px;">
　・ <div class="box" style="padding-left:10px;">
　・ <ul style="padding-left:10px;">
　・ <li style="padding-left:10px;">
どれでも表現できそうですね。CSSの干渉にもよります。
その他、border-left:背景色でも出来そうですね。

お礼

>デザインレベルで必要になる場合はあります。
そうなのです。デザインレベルでちょっと考えてまして・・・。
必要かなと思ったんです。

情報ありがとうございました。