HTMLの<p>タグの使用方法について
- HTMLの<p>タグについて教えてください。現在小説を執筆＆HTMLを勉強中で、<p>タグをどのように使用すればいいかがわからないです。
- 具体的には、台詞の間に改行を入れるために<span>タグを使用していましたが、<p>タグを使用することで行間を調節することができるのでしょうか。
- 実際には段落ではないのですが、このような<p>タグの使用方法は誤りなのでしょうか。
- ベストアンサー
<p>の使用について教えて下さい。
現在小説を執筆＆HTMLを勉強中です。 今まで台詞と台詞の間(１行空ける場合) <span class="black">「今日は暖かいね」</span><br> <br> <span class="gray">「そうだね」</span><br> 本当に春みたいな陽気だった。<br> という使い方をしていましたがCSSにて行間を調節出来るよう <p><span class="black">「今日は暖かいね」</span></p> <p><span class="gray">「そうだね」</span><br> 本当に春みたいな陽気だった。</p> ↑実際問題、段落ではないのですけれど、このような<p>の使用法は誤りでしょうか？
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
「自分が段落と思えばそこが段落である」だと思います。 段落ではないけど、しっくり来るタグがない、と言うときのために<div>がありますので、<div>でも良いと思います。
関連するQ&A
- 文章のマークアップについて
<p><span class="red">「今日は寒いね」</span><br> 彼はそう言って笑った。</p> <p><span class="blue">「あ…、雪だ」</span></p> ↑このような使い方は誤り…。 かと言って <div class="red">「今日は寒いね」</div> 彼はそう言って笑った。<br> ←この部分だけCSSで指定したフォントスタイルが適用されない。 <div class="blue">あ…、雪だ」</div> <div class="red">「今日は寒いね」</div> <div> 彼はそう言って笑った。<div> <br> <div class="blue">「そうだね」<div> ↑これでは少しこの会話が続いた時に「div病(？)」テキストに書いてありました。 全て同じフォントスタイルを使い且つ１行空けたい場合はどうマークアップすれば良いのでしょうか。 HTML初心者のweb作家です。 タグと具体例を示して頂けるとありがたいです。
- ベストアンサー
- HTML
- HTML5に移行を見据えた上で
ビルダー使いの初心者でWeb作家です。 fontタグが廃止になるということを知り、サイトのタグを(全２００ファイルほど)をspanに全置き換え完了したはばかりです。 今度は「<br>タグの連続はいけない」と言うことを知り全て<p>～</p>で括る作業が完了したばかりです。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ↑上記サイトでチェックしたところ構文エラーはないですけれど 例文です。 <p><span class="red">「今日は寒いね」</span><br> 彼はそう言って笑った。</p> <p><span class="blue">「あ…、雪だ」</span></p> ↑ここは<div class="blue">などに置き換えるべきである。 それは分かっているのですけれど、修正個所が多すぎるため直しようがないんです(これ以上執筆を停滞させるわけにもいきませんし)。 ある意味、文法違反ですよね。ブラウザ上でも問題なく表示されています。 １．直さない場合、将来的に何かマズいことはありますか？ ２．例えば…、文法違反をすると何か起こるのでしょうか？ 私小説のため、認証をかけてありますけれど(持病の話し等が出てくるため極親しい人にのみ公開しています)、そのためSEO対策は重視しておりません。 どなたか教えて下さい。
- ベストアンサー
- HTML
- CSSで改行後の行間調整
<P> あああああああああああ。<BR> いいいいいいいいいいいいいい いいいいいいいいいいいい。<BR> ううううううううう。 </P> のように段落の中で文の間だけ行間に余裕をもたせたいです。 <P>の行間設定だと「い」のように長い文で折り返した際にも行間が空いてしまうので別の方法を模索してます。 どうにかなるでしょうか？ それとも文ごとに<P>にするしかないでしょうか？
- 締切済み
- HTML
- 小説の行をマークアップ
小説をxhtmlでマークアップしようと考えています。 一つの段落は、<p>～</p>要素でマークアップしようと思います。 また、段落は変わらないけれど、改行したいときがあります（会話でかぎ括弧を使う場合などです）。 このようなときは、一行をどのようにマークアップするのが正当でしょうか。 やはり、～<br />で改行させるべきでしょうか。 それとも、<span class="l">～</span>（l {display: block;}）で一行のように表示させるべきですか。 よいアイディアなどありましたら、教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- p要素にclassとspanでclass適応違は？
こんにちは。 宜しくお願いいたします。 CSSで以下のコードを書いているときに、同じ結果になりました。 P要素の中にclass="pink"として書く場合と <span class="pink">としても良いと思うのですが、 P要素を使った書き方のほうが、良いのでしょうか？問題集 Webクリエーター能力検定試験初級 FOM出版にての問題でしたが、こちらでは、 P要素に記述してありました。 SEO的にも良いのでしょうか？？ <p><span class="pink">お一人様 3,000円</span></p> 違いがおわかりになられるお方がいらっしゃいましたら、宜しくお願いいたします。 失礼致します。 <p class="pink">お一人様 3,000円</p> <h2>特選コース</h2> <p>旬の味覚をふんだんに使いました。<br> ボリュームたっぷりのぜいたくなコースです。</p> <p class="pink">お一人様 4,500円</p> </body> </html>
- ベストアンサー
- HTML
- DreamweaverMX2004でドラッグするとスタイルが自動的に設定されてしまう
DreamweaverMX2004を使用しています。 デザイン画面で、 スタイルシートのかかっている<p>タグに囲まれた画像をドラッグして移動すると新しいスタイルシートが勝手に作られてしまいます。 その設定はどこかで変更出来るのでしょうか？ 新しいスタイルシートが作られないようにしたいのですが。 ※例えば下記のタグ内の画像「01.gif」をデザイン画面でドラッグして「文章1」の下に移動します。 【変更前】 <p class="p01"> 文章1<br> 文章2<br> <img src="01.gif"> </p> 【変更後】 <p class="p01"> 文章1<br> <span class="p012"><img src="01.gif"></span> 文章2<br> </p> 上記のように<span>タグが勝手について、スタイルシートも追加されてしまいます。
- 締切済み
- CSS
- tableを使わずに画像,文章を複雑に配置、そして
http://total-home.co.jp/ こちらのサイトの施工事例のようなレイアウトで、 マウスをのせると背景色がかわり、 色内のどこをクリックしてもリンク先へいける。 というようにしたいです。 背景色の変え方、色内をクリックでリンク先へ の２つはできましたが、 中身を作ることができません。 上記サイトのソースを見てみると tableを使わずにできています。 再現しようとしましたが無理でした。 このような画像,文章の配置の仕方で tableを使わずに背景色変化内クリックでリンク するにはどうしたらいいのでしょうか。 教えて下さい。お願いします。 <style type="text/css"> /* リンク全体の装飾 */ p.boxlinks a { display: block; padding: 0.5em; border: 1px solid #ccccff; text-align: center; text-decoration: none; line-height: 1.5; width: 400px; /* 横幅を指定する場合のみ記述 */ } /* ガイド文の装飾 */ p.boxlinks a span.siteguide { font-size: 70%; } /* サイト名の装飾 */ p.boxlinks a span.sitename { text-decoration: underline; } /* URLの装飾 */ p.boxlinks a span.siteurl { font-size: 75%; font-family: Verdana,Arial,sans-serif; } /* 全体(マウスが載ったとき)の色 */ p.boxlinks a:hover { background-color: #ccffff; border-color: #0000ff; } /* ガイド文部分の表示色 */ p.boxlinks a:link span.siteguide { color: black; } p.boxlinks a:visited span.siteguide { color: black; } p.boxlinks a:hover span.siteguide { color: blue; } /* サイト名部分の表示色 */ p.boxlinks a:link span.sitename { color: blue; } p.boxlinks a:visited span.sitename { color: #800080; } p.boxlinks a:hover span.sitename { color: blue; } /* URL部分の表示色 */ p.boxlinks a:link span.siteurl { color: green; } p.boxlinks a:visited span.siteurl { color: green; } p.boxlinks a:hover span.siteurl { color: #cc00ff; } </style> <p class="boxlinks"> <a href="★リンク先URL★"> <span class="siteguide">◆ガイド文◆</span><br> <span class="sitename">●サイト名●</span><br> <span class="siteurl">★リンク先URL★</span><br> </a> </p>
- ベストアンサー
- HTML
- 色のついた外枠を部分的に付けたいのですが、どうすればいいでしょうか？
色のついた外枠を部分的に付けたいのですが、どうすればいいでしょうか？ <tr> <td width="864" class="style49"> <p align="center"><a href="link/ryoukin.html" class="style49"><br /> <img src="image/web_004.gif" alt="格安引越が出来る理由" width="200" height="50" border="0"/></a><strong><a href="link/ryoukin.html" class="style49"><span class="style51"><img src="image/web_003.gif" alt="重要事項説明" width="200" height="50" border="0"/></span></a><a href="link/ryoukin.html" class="style49"><img src="image/web_005.gif" alt="料金計算書・オプション価格" width="200" height="50" border="0"/></a><br /> </strong></p> <p align="center"><strong><br /> <br /> <img src="image/web_010.gif" alt="引越プラン" width="130" height="35" /><br /> <br /> <a href="link/link1.html" class="style49"><span class="style58"><img src="image/web_007.gif" alt="フローチャート式お見積作成" width="200" height="95" border="0"/></span></a> <span class="style58"><a href="link/link0.html" class="style49"><img src="image/web_008.gif" alt="お荷物記載による個別お見積作成" border="0"/></a></span> <a href="http://*****.**.****.**/postmail/postmail2.html" class="style49" ><img src="image/web_009_03.gif" alt="各種お問合せ" border="0"/></a><br /> </strong></p> <p></p> ちなみに引越プランからフローチャート式お見積作成、お荷物記載による個別お見積作成、各種お問合せまで全部を一枠で部分的に外枠で囲みたいのですが、どのようなやり方があるでしょうか？ 部分的に囲めなくてすごく困っています。どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- フッターの下に隙間ができてしまう
スクロールバーが出ているのにフッターの下に隙間ができて、背景の白い部分が見えてしまい困っています。どうしたらフッターをウィンドウの下にくっつけられますか？ <style type="text/css"> <!-- #headder { height: 100px; background-color: #CC0000; } body { font-family: "ＭＳ ゴシック", "Osaka－等幅"; margin: 0px; } #base { width: 780px; margin-right: auto; margin-left: auto; } #footer { text-align: center; height: 50px; background-color: #CC0000; clear: both; } address { padding: 10px; border-top-width: 1px; border-top-style: dotted; border-top-color: #666666; font-size: 90%; font-style: normal; } #menu { width: 180px; } #main p { line-height: 1.5em; text-decoration: none; letter-spacing: 3px; } --> </style> </head> <body> <div id="base"> <div id="headder"> <h1>USOマーケティング株式会社</h1> </div> <div id="main"> <h2>実店舗の売り上げ、このままでいいですか？</h2> <p> ネットも併用して効果を上げる時代がやってきました。実際の調査に基づいた様々なマーケティング手法によって、企業支援を行います。私たちにお任せください。<br> </p> <h3>プレスリリース</h3> <div id="press"> <p> <span class="day">2008年11月</span><br> WEBデザイナー辞典にサンプルホームページとして公開しました。このHPはリニューアルの課題です。実際に存在しないHPですのでご注意ください。<br> <br> <span class="day">2008年11月</span><br> 赤い活動的な、イメージを希望しています。また、もっともっと売れるデザインにしてほしいそうです。<br> <br> <span class="day">2008年11月</span><br> 資料請求が非常に少ない状態です。なんとか資料請求を増やす工夫はないものでしょうか。<br> <br> <span class="day">2004年11月</span><br> サンプルニュースです。</p> <span class="day">2004年11月</span><br> 赤い活動的な、イメージを希望しています。また、もっともっと売れるデザインにしてほしいそうです。<br> <br> <span class="day">2004年11月</span><br> 資料請求が非常に少ない状態です。なんとか資料請求を増やす工夫はないものでしょうか。<br> <br> <span class="day">2004年11月</span><br> サンプルニュースです。</p> </div> <a href="http://www.it-work.jp/web-designer/contents/exhibition/" target="_blank"><img src="image/subject_b.gif" alt="WEBデザイン課題" width="373" height="24" border="0"></a> </div> <div id="footer"> <address> Copyright 2004 sample Co.,Ltd. All rights reserved. </address> </div><!--footter終わり--> </div><!--base終わり--> <br> </body> </html>
- ベストアンサー
- HTML
お礼
ありがとうございます！ <div>は空白行のない段落タグですよね。 なるほど「段落」だと思ったところが「段落」…。 色々調べていてふと気付いたのですけれど『段落の定義とは何か』と言う疑問が湧きまして(苦笑) 仰るとおり段落か否かというものは読者ではなく筆者が決めるものですよね。 本当にありがとうございます。