文章のマークアップについて

質問

<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作家です。

タグと具体例を示して頂けるとありがたいです。

回答No.6

shokodei · ベストアンサー

一番、最初の例で、全然オッケーだと思います。誤りではありません。
または、「あ…、雪だ」までをひとつの段落と見なす場合は、

<p><span class="red">「今日は寒いね」</span><br>
　彼はそう言って笑った。<br>
<span class="blue">「あ…、雪だ」</span></p>

で、まったく問題ないでしょう。

ここで、"彼はそう言って笑った。"の後に、「間」の意味合いで空行を入れたいのなら、

<p><span class="red">「今日は寒いね」</span><br>
　彼はそう言って笑った。<br>
<br>
<span class="blue">「あ…、雪だ」</span></p>

としても、なんら問題はありません。

むしろ、

<div>　彼はそう言って笑った。<div>
<br>
<div class="blue">「そうだね」<div>

というような<br>の使い方は、僕は推奨しません。
この場合は、divのmarginで余白を調整した方がスマートですね。

段落（P）の中の改行（br）は、連続しようが何個出現しようが、
それは作者の意図であり、言語構造によるものなので、仕様的には問題無しです。

お礼

ありがとうございます！

２冊持っているテキストの内１冊に「詩や小説など表現上で使用が必要な場合は<br>も<p>も使用して構わない」このような記述がありました。事実、作中に登場する私の詩は…空白行がなかったら見栄えが良くない(というより描写部分と分けるためにも必要)。

貴重な御意見をありがとうございます。あまり他の人の意見に左右されずに『自分の考え』と言うものをしっかり持つようにします。

タグの置き換え作業はもう少し考えてみます。

回答No.5

神崎 渉瑠（@taloo）

>話しを戻します。空白行を１行空けたい箇所と空けたくない箇所があり、且色を変更したい場合は。。。？

それぞれスタイルシートを書いてclass分けすればいいと思います。

<style>
.akeru{margin-top:1em;}
.akenai{margin-top:0em;}
.iro{color:red;}
</style>

<p class="akeru iro">１行開ける</div>
<p class="akenai">１行開けない</div>
<div class="akeru">１行開ける</div>
<div class="akenai iro">１行開けない</div>

お礼

度々ありがとうございます。
HTML5のテキストには『<div>の制限が厳しくなる』というようなことが書かれておりまして、具体的にどう厳しくなるのか？ということまで理解していませんけれども。。。

重ね重ねありがとうございます。
私のサイトは4.1ですけれどHTML5への移行も見込んでおります。
shift_JISも非推奨だなんて世界における日本の立ち位置が表れているような…。確かに使える文字が増えることはメリットですれどもファイルが大きくなってしまうことは痛手です。

回答No.4

神崎 渉瑠（@taloo）

DIV病は<h1>などや<p>、<table>、<ul>などで表すべきであろう所まで、全て<div>を使うことです。
「適したタグがない場所に<div>を使う」のは、HTMLの文法として正しい方法です。

私なら、こうでしょうか。

<style>
p{margin-top: 0.5ex; marign-bottom: 0.5ex;}
.serif{font-style: italic;}
.chara1{color: red;}
.chara2{color: blue;}
</styule>

としておいて、

<div class="serif chara1">「今日は寒いね」</div>
<p>　彼はそう言って笑った。</p>
<div class="serif chara2">「そうだね」<div>

または、

<p class="serif chara1">「今日は寒いね」</p>
<p>　彼はそう言って笑った。</p>
<p class="serif chara2">「そうだね」</p>

via: http://oshiete.nikkeibp.co.jp/qa6381065.html

＊redとかblueを否定しているわけではありません。
<span class="red">赤い</span>傘が落ちていた。
などと書くこともありますし。
ただ、キャラクター名を付けた方が、誰の台詞かというのがわかりやすかろうと思っただけです。

HTMLに「台詞を意味するタグ」は存在しません。
また、HTML文法の基準になっている英語（英語小説）の文法は、日本語小説と全く違う所がありますので、
日本語小説のルールをそのままHTMLで表せないことが多いです。
（たとえばルビ（日本語と中国語だけ）がHTMLに適用されたのもXHTML1.1というごく最近の物から。HTML4では文法違反するか、<span>で何とかするしかない。）
そう言うところは、結局<p>か<div>で表すしかないと思います。

余談ですが。
台本（話者・台詞・ト書き）を書いていますが、該当するHTMLタグがなくて、どのタグを使うか決めるのに苦労しますね。。。

WHATWG（HTML5を制定している団体）によると、英語（アメリカの）台本の書き方はこうらしいです。
マージンを使った日本の台本と全然違う。。。

<style>
p b{display:block; text-align: center;}
</style>

<p>
<b>話者</b>
台詞
</p>
<p>
<b>話者</b>
台詞
</p>

どうでも良いが、いや個人的に良くないが、CSS3に「縦書き」を入れて欲しかった。。。

お礼

実際には文字色ではなくキャラクター名を付けております。
上記の例は大げさであり、実際には文字色の差異はあまりないです。ただ読み手に分かりやすいよう色分けしていまして…気付いたら長編になっていまして。。。

話しを戻します。空白行を１行空けたい箇所と空けたくない箇所があり、且色を変更したい場合は。。。？

回答No.3

kmee

Another HTML-lintでチェックしているようですが
http://openlab.ring.gr.jp/k16/htmllint/faq.html
は御読みになりましたか?
他にも、結果などの解説も参考になるはずです。

環境の選択の余地があるなら、青空文庫などが使っているような形式とか、PDF等の方がレイアウトへの融通が効くのですが。

お礼

ありがとうございます！
…Another HTML-lint。。。今、文字化けしていて読めません(文字エンコードを変えても変わりません)。
(直して直して)１００点になりました。
けれど<p>は段落タグであって。。。

と、色々悩みもあり。。
作家なのにHTMLを考え過ぎの感もあります。自分でもそう思います。

ただケータイサイト(執筆)→PCサイト(保険&バックアップ)のため、ケータイサイトのｆｏｎｔタグやbrタグの置き換え作業だけでも大変です。

助言をありがとうございます。

回答No.2

ORUKA1951

HTMLの最も基本的なところが？のようですね。
<div class="script"><!-- 台本 -->
<p class="lines　person1">「今日は寒いね」</p><!-- せりふ 登場人物1 -->
<p>彼はそう言って笑った。</p>
<p class="lines　person2">「あ…、雪だ」</p>
<p>彼女は空を見上げてそう言った</p>
</div>
とマークアップするとかします。

後で見直して
・セリフのブロックはどこからどこまで
・セリフはどこか？
・どの登場人物の会話か
が分かりやすい。HTMLのマークアップはこのようにするものです。
<span class="red">とか<div class="red">じゃ、<font color="red">と同じレベルです。

そのうえで、スタイルシートで
div.script p { margin-top:2ex;margin-bottom:1ex;}
div.script p.lines { font-size:1.2em;}
div.script p.person1{ color:blue;}
div.script p.person2{ color:red;}
とかすると、後で色を変えようがデザインを変えようが好きにできる。青で書いていた部分を緑にしたくなってもよいでしょ。

お礼

ありがとうございます！

試してみます。

補足

今…、テストページにて試してみましたけれど、行間が１律固定になってしまっています。marginの値をいじってみましたけれど変わりません。

「今日は寒いね」
　彼はそう言って笑った。

「あ！雪だ…」

―キーンコーンカーンコーン―
「うわ、もうそうな時間!?」
　２人で走る。

↑台詞も描写も短いですけれど、例えばこのように表示をさせたい場合に…、行間が一律ではなく、且色分けする方法(HTMLの件のストレスで発熱してしまったので)、なるべく著者である私がケータイサイトからバックアップを取る際に手直しは最小限にしたいんです。

何か良い案が見つかるまで。。。というかタグの付け方はソフトにも癖がありますし人にもあるようですね。つまりルールは決まっているものの目に余るほどでなければ「許容範囲」と言ったところでしょうか。「い」抜き「ら」抜き言葉のように。。。

回答No.1

naokita

日本語での段落で賛否両論があるようです。
この辺が段落と改行の違いです。
本来は段落が<p></p>という事を前提にしますが、
ウェブサイトの場合は、ユーザー環境に左右されない仕様が良いので、改行を多用しない事が求められますが、PCのウェブブラウザを前提として、改行を利用し、日本語的な文章の読み易さを求める考えもあります。
例えばですが、「五七五」など日本語は独自の改行があり、英語の改行には適応されない考えです。
その改行を作者が段落と判断するか、改行にするかの問題です。
（古文とか専門外ですが・・・）

ケースバイケースですが、
＞１行開けたい場合
なら段落と判断しますので、

<p><q class="red">今日は寒いね</q><br>彼はそう言って笑った。</p>
<p><q class="blue">あ…、雪だ</q></p>

こうすれば、デフォルトでスペースが空きますし、
マークアップで段落と判断します。
あとは、CSSで margin で調整して下さい。<q></q>もCSSで。

お礼

ありがとうございます(感謝感激です)。

<q>の存在は知っておりましたけれど意味まで知らなかったものですから。。。
作家故、段落でもないのに<p>を使うべきか。ここ数日ほど悩んでおりまして。

ただ日本でいう「段落」の概念は英語圏に無い。ということは感覚的になんとなく理解しておりました。

「<p>を空白行目的で使用してはいけない」…という人も中にはおりますけれど、日本では「段落→空白１行」は小学校で習う常識です。

仰るとおり<p>タグも賛否を呼んでいますよね。
私はweb作家であるため、「空白行不必要論」に賛同しかねます。私自身視力がかなり弱いですし、文字を大きくするだけでなく適度な行間や読みやすい文字サイズを心掛けております。

本当に感謝で言葉もございません。