• ベストアンサー

<P ALIGN>と<DIV ALIGN>の明確な違いってありますか?

HTMLの本を読んで勉強しているのですが、<P ALIGN...>も<DIV ALIGN...>も共にテキストの位置を指定するという事が書いてあるだけで違いについては書いてありません。 例えば、<P ALIGN="center">と、<DIV ALIGN="center">では双方に特定の使い方があるものでしょうか? よろしくお願いします。

  • HTML
  • 回答数3
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • zoh
  • ベストアンサー率34% (273/789)
回答No.3

><P>~が … <BR>を使用する方が好ましいと考えて宜しいのでしょうか? <P>~</P>は文書構造としての段落を示すために使ってください、と言うことです。たとえば、回答#1は(その善し悪しは別として)5段落で構成されています。この、段落を示すために<P>~</P>を使う、と言った使い方が本来の使い方です。 また、その内容が「文書」と言うような物ではなく、視覚デザインを重視した物であったりすると、どこからどこまでが段落であるか明確でないと思います。そういった場合に回答#1に書いたような使い方をすると、そのレイアウトは保証された物ではないので、違うブラウザで見たときに意図しない表示になるかも知れませんよ、と言うことです。 では、実際のレイアウトはどうするべきかというと、risk_14さんが書いている通り、CSS(Cascading Style Sheet)を使用するのが望ましいとされています。しかし、その実装度はまだ不十分であると私は思っています。 私見ですが、実際に使えると思うのは、少なくとも WinとMac OSのそれぞれで、IE4.xx以降とNN4.7x以降のどちらでも意図したとおりに表示される物だけです。そうするとW3Cの勧告にはまだまだ遠く及んでいないのが現状です。仕事柄、多くの人に見て貰うという前提では最新ブラウザで見ることを前提として作成することは出来ません。実際にCSSを利用していますが、メンテナンス性を維持した上で、目的のレイアウトを得るためにはCSSだけでは不十分で、<TABLE>~</TABLE>タグによるレイアウトなども併用しています。 Webページデザインについては、次に上げる書籍が参考になると思います。参考URLと併せてどうぞ。 HTMLデザイン辞典 翔泳社 「Yahoo!ブックスショッピング」の検索結果 http://shopping.yahoo.co.jp/shop?d=jb&id=30822618 翔泳社の書籍案内 http://www.shoeisha.com/book/Detail.asp?bid=50&tk=%83f%83U%83C%83%93%8E%AB%93T

参考URL:
http://www.htmlhelp.com/ja/
roenick
質問者

お礼

現在ホームページを作成している段階では、作るのに精一杯でとても多くの人に見て貰うというレベルとはほど遠いところにいますが、教えていただいたURLを参考にしながらコツコツ作っていこうと思います。当面の目標は基本の構造と言語そのものの意味(何の単語の省略なのか等)を覚えることです。 詳しく説明していただき大変助かりました。有難うございました。

その他の回答 (2)

  • risk_14
  • ベストアンサー率33% (2/6)
回答No.2

No1の補足より ><P>の代用として<BR>を使用する方が好ましいと考えて宜しいのでしょうか? スタイル言語のCSSを使います。 BRは強制改行であってそれ以上の意味を持ちません。 自然言語にマークアップをしていくならば、それが「区切り」なのか「段落の終わりと開始」なのか又は別の「構造分離」が存在するのかによって使用する要素名も変わるでしょうが、いずれにせよレンダリングを実現しているのはCSSです。

roenick
質問者

お礼

risk14さん、どうもありがとうございます。 ホームページ作成というのは全く新しい言語と同じですので、覚えることがあって 大変です(笑)。<P>と<BR>の違いも100%ではありませんがおぼろげに分かってきました。CSSに関してはまだ勉強不足ですのでこれからの課題のひとつとして覚えていくつもりです。

  • zoh
  • ベストアンサー率34% (273/789)
回答No.1

某所でwebsiteを作成している、zohです。 HTMLに関する専門書を読めば詳しく書いてあると思いますが、<P>は「Paragraph」を略した物で、「段落」という文書構造を定義している物です。それに対して<DIV>は「Division」(区分、境界)の意味で、他の部分と区別して、<DIV>~</DIV>で囲まれた部分をひとまとめにするタグです。これは「ALIGN="center"」と言った属性をひとまとめにして与えるための「スタイルコンテナ」「レイアウトコンテナ」と呼ばれます。 使い方の違いですが、<P>タグは正しくは</P>と組み合わせて使います。ですが、</P>は省略可能となっています。また、<P>~</P>に中に、さらに<P>~</P>をネスト(入れ子)にする事は出来ません。それに対して、<DIV>~</DIV>はネスト可能です。ここが大きな違いとなります。 また「文書構造の定義」と言う意味では<P>タグは「改行してさらに1行空ける」という目的の使い方は勧められません。そのように使われているのはあくまでも、多くのブラウザがそういう風に表示しているからであって、そうしなければならないと決められているわけではないからです。段落であることが分かるのならば、他の表示方法も認められています。下記URLをご覧下さい。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/text.html#idx-paragraph また、参考URLがHTMLの仕様を決める団体です。英語ですが、参考までに。

参考URL:
http://www.w3.org/
roenick
質問者

補足

zohさん、早速の回答ありがとうございました。 入れ子ができる、できないの違いが分かったのは大きな収穫です。で、ひとつ思ったのですが、<P>~が「改行してさらに1行空ける」という目的の使い方は勧められないとなりますと、<P>の代用として<BR>を使用する方が好ましいと考えて宜しいのでしょうか?

関連するQ&A

  • divやp要素の前後は改行されるとありますがどこから改行されるのでしょうか

    <body> <div align="center"> <br> あいうえお<br> <img src="../xxx/1.jpg" width="640" height="400" border="0"> <br> <p class="text_min"> あいうえお<br> </p> あいうえお<br> <br> </div> </body> 上記の場合、改行位置はこうでしょうか?↓ *改行* <div align="center"> </div> *改行* *改行* <p class="text_min"> </p> *改行* という事でしょうか? 当たり前のような質問ですいません!

  • text-align centerの違い

    div内にリンクを書くとセンターを基準に表示されるのですが div内にulとliでメニューを組むとセンターを基準に表示されず 左を基準に表示されてしまうのですがどのようにすれば いいものでしょうか? ---CSS--- #hoge { width: 1000px; text-align: center; background: #fff; } ---HTML--- ↓この場合センター表示されます。 <div id="hoge"> <a href="#">hoge</a> </div> ↓この場合センター表示されず左を基準に表示されます。 <div id="hoge"> <ul> <li><a href="#">hoge</a></li> </ul> </div>

    • ベストアンサー
    • HTML
  • <P>タグと<div>タグについて

    <P>タグと<div>タグには“前後に空行が入るかどうか”という違いがあるそうですが、下記のようなデータを作り、自分のホームページに記入したところ、前後に全く空行が入りませんでした。 しかし、自分のホームページ以外で、このデータを試してみたところ、<p>タグにはきちんと空行が入るようです。 記入する場所によって、空行が入ったり入らなかったりするのは、なぜなのでしょうか? ※ブラウザはIE8を使用しています。 <P align="right" style="width:740px;margin:auto;">●●●</p> <P align="right" style="width:740px;margin:auto;">●●●</p> <P align="right" style="width:740px;margin:auto;">●●●</p> <div align="right" style="width:740px;margin:auto;">▲▲▲</div> <div align="right" style="width:740px;margin:auto;">▲▲▲</div> <div align="right" style="width:740px;margin:auto;">▲▲▲</div>

  • CSS・DIVについて

    CSS初心者ですが、質問させていただきます。 <やりたいこと> 同一ページ内にて、下記の(1)(2)をCSSで指定したい。上から(1)(2)(1)の順で表示したい。 (1)幅700、文章中央揃え (2)幅600、文章左揃え <私が作成したもの> (関係ない部分は省略しています。) (実際は、(1)(2)の部分は半角英字の名前をつけています) <head> <style type="text/css"> body { text-align: center; } div#(1) { width: 700px; margin: 0 auto; text-align: center;       } div#(2) { width: 600px; margin: 0 auto; text-align: left; } </style> </head> <body> <div id="(1)">タイトル</div> <div id="(2)">説明文</div> <div id="(1)">ホームに戻る</div> </body> <表示のされ方> (1)は正常に表示されているのですが、(2)にはCSS自体が適用されていないのです。 ちなみにIE9では私の思うように表示されるのですが、IE10になって表示されなくなりました。 なぜこのようになったか、お教えいただけますでしょうか。よろしくお願いいたします。

    • 締切済み
    • CSS
  • tableに対するdiv

    テーブル内の文字色を白にしたい場合、 <style type="text/css"><!-- div.font{color:white;} --></style> <tr> <div class="font"> <td align="center" width="20%">★1</td> <td align="center" width="20%">★2</td> <td align="center" width="20%">★3</td> <td align="center" width="20%">★4</td> <td align="center" width="20%">★5</td> </div> </tr> このように指定しましたが、適用されません。 なぜでしょう?

    • ベストアンサー
    • HTML
  • CSSのセンタリングが、「div」で何故か出来ない

    下記のアドレスのホームページについてです。 http://sky.geocities.jp/thanksv0358/index.html# HTMLで、 <body> <div id="main"> ~ </div> </body> とし、CSSで #main{ text-align:center; margin-left:auto; margin-right:auto; text-align:left; } としたにもかかわらず、何故かセンタリングができません。 今回、最初の<!DOCTYPE~の部分から全部、自分で書いてみました。 詳しい方がいましたら、よろしくお願いします。

  • 画像はDIVタグとPタグの両方で囲むの?

    クラブのホームページを作っているんですが 分からない事がありますので質問させていただきます。 勉強している本で画像もPタグで囲むのが正しいと載ってましたので ------------------------------------------------------- <div><p><img src="○○" alt="なし"></p></div> ------------------------------------------------------- と記述していたんですが、 色々勉強していくとPタグではなく、 ブロックレベル要素で囲むのが正しいとの事ですので <div>も<p>もブロックレベル要素なので ------------------------------------------------------- <div><img src="○○" alt="なし"></div> ------------------------------------------------------- とか ------------------------------------------------------- <p><img src="○○" alt="なし"></p> ------------------------------------------------------- みたいに無理に<div>と<p>の2つではなく <div>だけ、または<p>だけで、囲むのも問題はないのでしょうか? ※スタイルシートでレイアウトしています。 ※画像はスペースを空ける為だけですので<div>~</div>に文章はありません。  同じくaltの指定もしていません。 ※画像でスペースを空けるは、あまり良くない事は分かっていての質問です。 別の質問ですけど、あるホームページでH2(見出しタグ?)で ------------------------------------------------------- <div><h2>タイトル</h2></div> <div><p>文章</p></div> ------------------------------------------------------- が正しいと載っていたんですが ------------------------------------------------------- <div> <h2>タイトル</h2> <p>文章</p> </div> ------------------------------------------------------- では間違っているんでしょうか? すいません、もう1つ質問です。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html でチェックしてみると98点でした。 私のパソコンや、友達のパソコンでは、ちゃんと表示されてるんですが 100点じゃないと、表示されないパソコンもあるんでしょうか? 学校が短大で男子がいないので HTMLやCSSが苦手な子ばかりです。 私と副部長で頑張ってほぼ完成しましたが、 はじめてホームページを作った初心者で 細かい事を教えてもらえる人がいなくて困ってます。 初心者の質問で申し訳ありませんが よろしくお願いします。

  • <div>テキスト</div>

    HTMLを記述する際に文書構造を明確に…と考えています。 見出しにはHタグ、本文にはPタグ、リストにはliなどなど。 ある書籍でbody直下にテキストを配置するのはいけない、と書いてありました。テキストに意味付けがなされていないから、というようなことが理由として書いてありました。 そこで思ったのですが、divはもともと意味をなさないブロック要素ですが、この直下にテキストを配置すると、このテキストは文書構造上意味を持たないものになって、文法上間違っているのでしょうか? 今のところ、 <div><p>テキスト</p></div> のように、pで意味付けをするのが正しいのかな、と考えていますが、W3Cのホームページではdiv直下にテキストを配置しているものがありました。 皆さんのご意見を伺いたいです。 div直下のテキストは正しいのか、間違っているのか、どうでもいいのか?

    • ベストアンサー
    • HTML
  • CSSでDIVで挟んでいるのに背景色が出ない?

    CSSと(X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・? 確認はFirefoxとSafariでやっています。

    • ベストアンサー
    • HTML
  • DIV内の padding について

    下記のようなCSSとHTMLファイルにてデザインをしています。 main 内にてpaddingを上下左右に10px 有効にしたいのですが、下記のような記述をCSSにした場合、padding が top (bottom?)にしか適用されません。左右に適用させるにはどうすればよいのでしょうか? よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <link rel="stylesheet" media="all" type="text/css" href="index.css" /> </head> <body> <div id=wrapper> <div id=header></div> <div id=face></div> <div id=navi></div> <div id=main></div> <div id=footer></div> </div> </body> </html> body { background: url(img/bg.gif); margin: 0 auto; text-align: center; } #wrapper { width: 800; margin: 0 auto; background: #EEE; } #header { clear: both; height: 50px; text-align: left; background: #009 url(img/header.gif) no-repeat; border-bottom: 1px solid #FFF; } #face { clear: both; height: 200px; text-align: left; background: url(img/face.jpg) no-repeat; border-bottom: 1px solid #FFF; } #navi { float: left; width: 130px; height: 550px; background: #009; text-align: center; border-right: 1px solid #FFF; } #main { font-family: Maiandra GD, Verdana, Arial; font-size: 14px; line-height: 20px; text-align: left; padding: 10px; } #footer { clear: both; height: 50px; background: #009 url(img/footer.gif) no-repeat; border-top: 1px solid #FFF; }

    • ベストアンサー
    • HTML