小説をxhtmlでマークアップしようと考えています。
一つの段落は、<p>~</p>要素でマークアップしようと思います。
また、段落は変わらないけれど、改行したいときがあります(会話でかぎ括弧を使う場合などです)。
このようなときは、一行をどのようにマークアップするのが正当でしょうか。
やはり、~<br />で改行させるべきでしょうか。
それとも、<span class="l">~</span>(l {display: block;})で一行のように表示させるべきですか。
よいアイディアなどありましたら、教えてください。
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
私なら br 要素を用います。
HTMLは文章を表現するために特化した言語ではありません。
本来であれば、小説を表現するに適した要素を定義したXMLでマークアップすべきです。
XHTML2.0 では br 要素は廃止され、l 要素が論理行を示すコンテナ要素として定義される予定です。
文章末に br 要素を置くことと同等ですが、概念的には行としてマークアップされるということです。
その場合、内容が構造的に
<l>文章1。文章2。文章3。</l>
となるべきか、
<l>文章1。</l>
<l>文章2。</l>
<l>文章3。</l>
となるべきかによって、回答が異なります。
小説を表現するというのは、いわば本(作文用紙)と同様です。
行頭、行末の処理や、改行については厳密に扱いたいところです。
小説としての見栄えをどこまで妥協するかによります。
場合によっては、p 要素でなく pre 要素で包含し、段落を行間(改行数)及び字下げ(行頭スペース)で表現するかもしれません。
HTMLにおける p 要素(段落)を用いて、小説の段落などを表現するのであれば、かぎ括弧などを用いるための作文用紙上での改行は、あくまで br 要素で行います。
<p>文章1。<span style="display: block;">文章2。</span>文章3。</p>
というのは、単に見かけ上のレンタリングに過ぎません。
そのように span 要素を用いるのは
<p>クラーク博士は、<br />
<span style="display: block; line-height: 2;">「Boys, be ambitious!」<br /></span>
と言った。</p>
というように、表現する上で視覚的な演出をしたい場合に限ると思います。
※ 例が例なので、このようなマークアップが広い意味で妥当とは言い切れませんが。
HTMLかCSSかという単純な疑問であれば、CSSが有効でないときにはどのように表示されるべきかを考えれば分かることです。
尤も、HTMLが内容の文書構造を明示する言語であると認識されていれば分かることかもしれませんが。
少し長くなりましたが、そのような場合は br 要素を用いるべきであると回答しておきます。
ご回答、どうもありがとうございます。
XHTMLに囚われずに、XMLでマークアップすれば解決できますね。
ご指摘の通り span 要素での改行は視覚的ということに気づきました。また、br での改行と、span での視覚的な改行とでは全く違うということに気づきました。
私が考えていた文章は、CSSが無効の場合でも改行させたいものでしたので、XHTMLの場合は br 要素を使おうと思いました。根本的に間違っていたみたいです。
また、HTMLでのマークアップが可能な文書は、非常に少ないことが分かりました。現在ウェブ上にある多くの文書は、XMLでマークアップされるべきですね。
ご指摘、本当にありがとうございました。
No.3
- 回答日時:
長文失礼します。
段落でない場所で改行したいなら<br />を使うべきですし、
改行の時の上下に幅を持たせたいならインライン要素で囲ってスタイルシートで高さを調整すべきだと思います。
日本語としても改行を伴う「」と改行を伴わない「」は意味やニュアンスが若干違いますしね。
私にとっては文章から登場人物や作者の意図をくみ取るのは最も苦手な分野なので、どう違うとか聞かれても答えられないですが、、、違うと言うことはわかります。その程度です
どのタグを使うか、の方が問題になりそうですけどね(^^;
つまるところ<span>でいいと思います。
上下に幅を持たせるときのスタイルシートはline-heightでいいんじゃないでしょうか。
前後に改行を入れてますので、display:blockは特に必要ありません。
改行の時の上下の幅をとりたくないなら、<span>もline-heightも不要だと思います。
<style>
.serifu {line-height:200%;}
</style>
<p>
本文<br />
<span class="serifu">「せりふ」</span><br />
本文
</p>
2行以上に渡るような長いセリフでは、line-heightでは表示がちょっと変になるので、
.serifu{
display:block;
margin-top:1em;
}
でもいいと思います。
margin-bottom;はセリフの後の<br />で1行あきますので入れてません。
HTMLタグは目下勉強中。というか永遠に勉強中。
良い書き方がありましたら私も教えていただきたいと思います>識者の方
ご回答、どうもありがとうございます。
<br />を使うことにします。小説をXHTML、CSSでマークアップするのは難しいですね。ですが、頑張ります。
私も、HTML勉強中でございます……。詳しいご説明、本当にありがとうございました。
No.2
- 回答日時:
XHTML 2.0であればl要素を使うべき…なんですねぇ?まぁ知らないけど。
で、XHTML 2.0でなければ<br />で構わないでしょう。CSSで行を折り返すとCSSを無効化したときに折り返しが効かなくなります。
XHTMLは文書構造の定義、CSSは見栄えの定義です。もちろん、視覚効果的なものを狙って改行する場合はCSSが適切だと思いますけどね。
ご回答、どうもありがとうございます。
CSSが無効の場合でも改行させたい文章でしたので、やはり<br />を使おうと思いました。根本的に間違っていたみたいです…。
どうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 分数が正常に表示されない。 6 2022/05/09 18:53
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- その他(パソコン・スマホ・電化製品) パソコン上のGoogleフォトについて Googleフォトをタブレット、スマホ、パソコンで使っていま 1 2023/06/29 05:21
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- 数学 一般的な行列の逆行列に関する質問 3 2022/04/21 14:53
- PHP PHPでテキストファイルに保存した時の改行問題 1 2022/11/19 15:07
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・思い出すきっかけは 音楽?におい?景色?
- ・あなたなりのストレス発散方法を教えてください!
- ・もし10億円当たったら何に使いますか?
- ・何回やってもうまくいかないことは?
- ・今年はじめたいことは?
- ・あなたの人生で一番ピンチに陥った瞬間は?
- ・初めて見た映画を教えてください!
- ・今の日本に期待することはなんですか?
- ・【大喜利】【投稿~1/31】『寿司』がテーマの本のタイトル
- ・集中するためにやっていること
- ・テレビやラジオに出たことがある人、いますか?
- ・【お題】斜め上を行くスキー場にありがちなこと
- ・人生でいちばんスベッた瞬間
- ・コーピングについて教えてください
- ・あなたの「プチ贅沢」はなんですか?
- ・コンビニでおにぎりを買うときのスタメンはどの具?
- ・おすすめの美術館・博物館、教えてください!
- ・【お題】大変な警告
- ・【大喜利】【投稿~1/20】 追い込まれた犯人が咄嗟に言った一言とは?
- ・洋服何着持ってますか?
- ・みんなの【マイ・ベスト積読2024】を教えてください。
- ・「これいらなくない?」という慣習、教えてください
- ・今から楽しみな予定はありますか?
- ・AIツールの活用方法を教えて
- ・最強の防寒、あったか術を教えてください!
- ・【大喜利】【投稿~1/9】 忍者がやってるYouTubeが炎上してしまった理由
- ・歳とったな〜〜と思ったことは?
- ・モテ期を経験した方いらっしゃいますか?
- ・好きな人を振り向かせるためにしたこと
- ・スマホに会話を聞かれているな!?と思ったことありますか?
- ・それもChatGPT!?と驚いた使用方法を教えてください
- ・見学に行くとしたら【天国】と【地獄】どっち?
- ・これまでで一番「情けなかったとき」はいつですか?
- ・この人頭いいなと思ったエピソード
- ・あなたの「必」の書き順を教えてください
- ・14歳の自分に衝撃の事実を告げてください
- ・人生最悪の忘れ物
- ・あなたの習慣について教えてください!!
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html タグの閉じスラッシュ前の...
-
含む含まないという概念自体の...
-
ホームページの下にあるcopy ri...
-
textareaの幅を画面と合わせたい
-
小説の行をマークアップ
-
マージソートの計算量について-...
-
textareaにタグを挿入したい。
-
エクセルでグラフにマークを入...
-
<H>タグの見出しと<P>タグの本...
-
"A style=" のタグの意味を調べ...
-
<div>の中の<div>の意味
-
smallにtext-allignが効かない
-
border: noneでボタンの境界線...
-
HTMLページ上でiframeを最前面...
-
テキストボックスの中にリンク...
-
取消し線に色を付ける
-
ホームページビルダー16の属...
-
「諸要素」とはどういう意味で...
-
CSS:overflow要素の印刷について
-
emとstrongの反対
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
含む含まないという概念自体の...
-
aの中にspan
-
smallにtext-allignが効かない
-
マージソートの計算量について-...
-
input type="hidden"で取得した...
-
改行ほどは行かないけど、若干...
-
質問1.
-
角丸画像の背景色を透明にした...
-
【ヒトの神秘】美男美女から何...
-
CSSで改行後の行間調整
-
HTMLページ上でiframeを最前面...
-
2個のFormを横並びにしたい
-
スタイルシートで文字色を指定...
-
ある要素の中身を全部グレーア...
-
html タグの閉じスラッシュ前の...
-
HTML の繰返し法???
-
テキストボックスの中にリンク...
-
H1タグを画像にしたい
-
emとstrongの反対
-
textareaの幅を画面と合わせたい
おすすめ情報