２行にしたい要素、改行か分割すべきか

質問

質問が漠然としているかもしれません。

例えば、見出しや定義リストの一部（ＴＤ要素）で複数言語での表記を併記したい場合など、文書構造的に単一の要素だが行を分けたい場合

・改行タグをはさんで２行の単一要素にする
・複数の同じ要素に分割しCSSで見た目を操作する

のどちらが望ましいと考えますか。

回答No.7

神崎 渉瑠（@taloo） · ベストアンサー

連続で済みません。

見出しについてですが、
サブタイトル（補足事項）を、行を分けて書きたい場合はいくつかの方法があります。
（すべて文法上はOKです。）

<h1>タイトル - サブタイトルや補足</h1>

<h1>タイトル<br>
- サブタイトルや補足</h1>

<h1>タイトル</h1>
<h2>サブタイトルや補足</h2>

最後の<h1>と<h2>を分ける方法ですが、
本来のHTMLの文法で考えれば、「大見出し」「小見出し」ですので、サブタイトルでなくなってしまいます。

HTML5では、複数の見出しを<hgroup>でひとまとめにする事ができます。

<hgroup>
<h1>タイトル</h1>
<h2>サブタイトル</h2>
</hgroup>

ただ、これでも厳密にはサブタイトルではなくなってしまうと思いますので、私は、以下のいずれかをお勧めします。

<h1>タイトル<span> - サブタイトル</span></h1>

<h1>タイトル<br>
<span> - サブタイトル</span></h1>

あくまで私見ですので、
・「サブタイトル（補足事項）も含めた物が１つのタイトル（<h1>）」 ・・・私の考え方
・「サブタイトル（補足事項）はタイトル（<h1>）ではない、だから<h2>や<p>に分ける」・・・No.3の考え方と思います
のどちらか好きな方を選べばいいと思います。

お礼

※　「教えてｇｏｏ」から閲覧している方向け：全ての補足後、締め切り時にお礼しています。

回答No.４～７をまとめてのお礼になります。
ソースを見直した結果
・一続きの長い文面で、スタイルシートを切った場合でも１要素として見えてほしい場合（補足No.９）
（現行の主要ブラウザは要素を分けると見た目も分離してしまう）
と
・分離していても構わない場合（言語絡みはおおむねこれに該当）
に区別できそうなので、前者は<br>、後者は要素分割する形にしたいと思います。

回答No.3

ORUKA1951

＞文書構造的に単一の要素だが行を分けたい場合
　根本的な部分で矛盾があります。文書構造と、プレゼンテーションは車の両輪のようなもので、行を分けて表示したいと言うことは、必然的に
文書構造も異なるはずです。
^^^^^^^^^^^^^^^^^^^^^^^　
　とすると
「改行タグをはさんで２行の単一要素にする」
　は、ひとつの段落中での強制改行ですから、マークアップが間違っています。
「複数の同じ要素に分割しCSSで見た目を操作する」
　は、『異なる要素に分割し、見た目はCSSで操作する』

　よってマークアップ自体
<div class="hgroup">
　<h1>マニュアル</h1>
　<h1 lang="en">MANUAL</h1>
</div>
<div class="section">
　<h2>155G</h2>
　<h2 lang="en">155G</h2>
　<p>これは、キャンプストーブ155Gのマニュアルです</p>
　<p lang="en">This is manual about 155G.</p>
</div>
<dl>
　<dt>概要</dt>
　<dt lang="en">Abstract</dt>
・・・・・
　となるはずです。
　スタイルシートは、
div.section>p{text-indent:1em;line-height:2em;margin:0;}
div.section>p[lang="en"]{text-indent:0;}
div.section>p[lang="en"]:first-leter{font-size: 200%;float: left }
とか・・・

　他の部分と異なる表現をしたいと言うことは、必ずその要素は他の部分と異なる構成要素であるはずだと言うことがHTML/CSSの基本です。要素名(タグ)だけで足りない場合は、その属性(class,lang,id,title・・)で区別して文書構造をマークアップしてください。それが出来れば、スタイルシートのセレクタなどカスケーディングを活用することで表現は自在に操れます。
　上の場合、本文(section)中の直接の子供(>)である段落(p){}しろ【詳細度は[0,0,1,2]】、ただし属性[lang="en"]の場合は{}しろ【詳細度[0,0,2,2]】、さらに擬似要素:first-leterの場合は{}しろ【詳細度[0,0,2,3]】

補足

回答有難うございます。
ですが、
「行を分けて表示したいと言うことは、必然的に
文書構造も異なるはずです。」
この部分に納得できません。

回答内容から、解答者の方は
「見出しを執筆者が明示的に行を変える事自体間違っている」
と認識していると判断しましたがよろしいでしょうか。

※　HTMLの理念うんぬんはこのカテゴリ内の他の質問解答で何度となく拝見しましたので
　この質問スレッドにおいて再掲の必要はありません。

回答No.2

Chaire

No.1 補足より：
> 全ての内容を同時に表示する

No.1 は例示として言語切り替えのスタイルを書いたまでのことです。全てを表示したければ例示のスタイルを消すだけです。

そんなのは表面上の話にすぎず、キモは lang 属性です。lang 属性は、言語の書記法に合ったレイアウトをブラウザに指示します。例えば：

・日本語ではソース上の改行が無意味ですが、英語では単語間空白として扱わねばならない。
・日本語・英語混在に適したフォントと、英語のみに適したフォントの切り替え（合字を含む）。
・日本語の引用符「...」と、英語の引用符 "..." の区別（音声読み上げ時など）。
・スペルチェッカなど補助ツールの選択。

だから、どのみち『複数言語での表記を併記したい場合』なら lang 属性が必要なのです。

<dt>
　<span lang="ja">日本語</span>
　<br>
　<span lang="en">English</span>
</dt>

br で改行しただけでは、どちらのテキストが何の言語表記であるか分かりません。

<dt>
　日本語？ English?
　<br>
　日本語？ English?
</dt>

ご質問では『など』がついていますが、こののように「何をしたいか」で方法が変わるため、とりあえず「言語併記」のみを考えています。

---
なお、以下はダメです。

<dl>
　<dt lang="ja">日本語</dt>
　<dt lang="en">English</dt>
　<dd lang="ja">駅</dd>
　<dd lang="en">Station</dd>
</dl>

この場合、「日本語」に属する dd はなく、「English」に属する dd が「駅」と「Station」の 2 つ、という意味になります（HTML5 の意味論）。

<dl>
　<dt lang="ja">日本語</dt>
　<dd lang="ja">駅</dd>
　<dt lang="en">English</dt>
　<dd lang="en">Station</dd>
</dl>

こちらであれば、「日本語」に属する dd が「駅」、「English」に属する dd が「Station」になります。まあ、ご質問の意図とは異なるでしょうが。

<ul>
　<li lang="ja">
　　<span id="l1">日本語</span>
　　<span aria-labelledby="l1">駅</span>
　</li>
　<li lang="en">
　　<span id="l2">English</span>
　　<span aria-labelledby="l2">Station</span>
　</li>
</ul>

lang 属性は子孫に及ぶため、このように祖先に 1 個付けておけば楽です。

お礼

※　「教えてｇｏｏ」から閲覧している方向け：全ての補足後、締め切り時にお礼しています。

回答No.１、２をまとめてのお礼になります。
質問の本題と離れた部分になりますが、
html3.2で書かれたサイトを縮小ついでに4.01フレームへ（最終更新のため手間を省きたく）書替えている途中での質問でした。
（CSSもこの更新で初導入になります）
lang属性については失念していました。有難うございます。

回答No.1

Chaire

<p>
<span lang="ja">駅</span>（<span lang="en">Station</span>）
</p>

*:not(:lang(ja)) { display: none }

原則論として lang 属性のコンテナが必要な以上、こうなると思います。

今は亡き XHTML 2.0 の l 要素（line）の再評価。

補足

※「教えてｇｏｏ」で閲覧している方向け：お礼前に補足しています。

回答有難うございます。

すいません、これは片方だけの表示になりますか？
質問は行を分けたい全ての内容を同時に表示する必要がある場合になります。