<p>を取ったら適切な表示jが出来ないです

質問

こんにちは。

配役を記述する<dvi>の中が下記のようになっています。

<dvi class="xxx">
<p><span class="a">水戸光圀</span>／<span class="b">東野英治郎</span></p>
<p><span class="a">佐々木すけさぶろう</span>／<span class="b">里見浩太朗</span></p>
</div>
表示
******************
水戸光圀／東野英治郎
佐々木すけさぶろう／里見浩太朗
******************

この時、後で気付いて<p>はいらないか不適切かな？って思って外したら、表示が下記のようになってしまいました。

表示
******************
水戸光圀／東野英治郎佐々木すけさぶろう／里見浩太朗
******************

上側の表示にするためにはどうしたらよいでしょうか？
<p>は外す必要の無い適切なモノでしょうか？それとも他の方法がありますでしょうか？

よろしくお願いいたします。

回答No.2

aspl21 · ベストアンサー

<dvi class="xxx">
<span class="a">水戸光圀</span>／<span class="b">東野英治郎</span><br>
<span class="a">佐々木すけさぶろう</span>／<span class="b">里見浩太朗</span>
</div>

pはパラグラフ（段落）のpなので、
あっているかあっていないかは議論がわかれるところかも。

幅を考えるならもう少し工夫がいるかもしれないし、
<li>とかのタグを使うべきだと私は思うが、、改行したいなら<br>でいいのでは？

htmｌをもう少し勉強しましょう。

お礼

ご回答ありがとうございます。

まさに求めているモノでした。勉強して良いサイトを作ります！

回答No.3

ORUKA1951

＞<p>は外す必要の無い適切なモノでしょうか？それとも他の方法がありますで
しょうか？
　HTMLの根本は、大事なことなので、きちんと理解しましょう。
　HTMLはHyper Text Markup Languageの略ですが、Markupとは、その部分がその
文書のどんな構成要素であるかを示すという意味です。
　ここを読んでおくこと!!→『そこで、プレーンテキストのみを用いて、「タ
グ」を使うことによってデータに意味を持たせることが考えられた。(　
http://ja.wikipedia.org/wiki/SGML )』

　HTMLのタグは、デザインのためではなく!!、その部分が何であるかを示す目印
です。
　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
<p></p>は、最も基本的な段落(Paragraph)を示す目印--マークアップです。

<dvi class="xxx">
<p><span class="a">水戸光圀</span>／<span class="b">東野英治郎</span></p>
<p><span class="a">佐々木すけさぶろう</span>／<span class="b">里見浩太朗
</span></p>
</div>
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造
を付加するため(
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4
)』
　HTML4.01までは、文書の構造を示す目印(タグ)がありませんで下ので、DIVや
SPANと、idやclassを併用して文書構造を示してきました。

　HTML5では、より明確に
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
NOTE: Authors are strongly encouraged to view the div element as an
element of last resort, for when no other element is suitable.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Grouping content ? HTML5(
http://www.w3.org/TR/html5/grouping-content.html#the-div-element )］より
　≒ DIVは他に適切な要素がないときの最後の最後の手段として使用すること!!

★この場合は配役と俳優名のリストですから、最適なマークアップは、DL(用語と
その説明を示す-- 定義リスト(
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-DL
)でしょう。そのうえで、class名で意味を追加して置きます。
<dl class="castingList"><!-- 後でわかるように -->
　<dt>水戸光圀</dt>
　<dd>東野英治郎</dd>
　<dt>佐々木すけさぶろう</dt>
　<dd>里見浩太朗</dd>
</dl>

　 このようにHTMLは、文書構造をマークアップします。

　その上で、プレゼンテーションとして、用語とその説明を横に並べます。
dl.castingList dt{ font-weight:bold;/* 太字にして */}
dl.castingList dd{margin-left:5em;}
とか・・
・構造とプレゼンテーションの分離(
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1
)
　これを守っておくと、先で二段に表示用しようとか、スタイルシートだけで
表示を変更できます。そして、なによりも自分も他人も検索エンジンも理解して
くれる。

回答No.1

yambejp

まず第一にpを改行目的で利用するのは馬鹿げているのでやる必要はありません。
なのでpは外すというのは問題ありません。

今回の例だとどちらかというとdl-dt-ddあたりが適正では？
ただしdtからddにかけてのつながりを処理するには多少無理のある処理が必要です

こんな感じでしょうかね？
※便宜上styleタグをつかっていますがcssは外部化するなど適宜処理してください
<style>
dt.a{float:left;}
dd.b:before{content: "／";}
</style>
<dl class="xxx">
<dt class="a">水戸光圀</dt>
<dd class="b">東野英治郎</dd>
<dt class="a">佐々木すけさぶろう</dt>
<dd class="b">里見浩太朗</dd>
</dl>

お礼

ご回答ありがとうございます。

できました。