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

解決済

質問者：ichido_dake
質問日時：2011/09/24 15:32
回答数：14件

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

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (14件中11～14件)

ベストアンサー優先
最新から表示
回答順に表示

No.4

回答者： taloo
回答日時：2011/09/25 11:31

ある問題を別の方法で解決しようとすると、どこかで矛盾が生じると思います。

（たとえばHTMLの問題をスタイルシートやJavaScriptで解決するなど。）

スタイルシートを使わないときにどのような表示になってほしいか、何を意味したいかで決めればいいと思います。

（<html lang="ja">と指定してある場合。）

例1：
<dt>色<br>
<span lang="en-us" class="en en-us">(color)</span>><br>
<span lang="en-uk" class="en en-uk">(colour)</span></dt>
<dd>光の波長の違い（色相）によって目の受ける種々の感じ。</dd>
<dd>人の肌の色。人の顔の色つや。</dd>

例２：
<dt>色</dt>
<dt lang="en-us" class="en en-us">color</dt>
<dt lang="en-uk" class="en en-uk">colour</dt>
<dd>光の波長の違い（色相）によって目の受ける種々の感じ。</dd>
<dd>人の肌の色。人の顔の色つや。</dd>

（MacOS X 付属辞書（小学館大辞泉））

これらの違いは、
「２つの補足を含む用語が１つ」なのか、「同じ意味の用語が３つ」なのかだと思います。

国語辞典のようなものであれば、前者のような書き方が適切だと思いますし、また一般的だと思います。
（多くは言語などを問わない）学術用語集などであれば、後者の方がふさわしいと思います。

なお、HTMLに日本語のカッコ書き（補足など）を意味するタグはありませんので、<span>を使う事になります。

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2011/09/25 09:22

＞文書構造的に単一の要素だが行を分けたい場合

　根本的な部分で矛盾があります。文書構造と、プレゼンテーションは車の両輪のようなもので、行を分けて表示したいと言うことは、必然的に
文書構造も異なるはずです。
^^^^^^^^^^^^^^^^^^^^^^^　
　とすると
「改行タグをはさんで２行の単一要素にする」
　は、ひとつの段落中での強制改行ですから、マークアップが間違っています。
「複数の同じ要素に分割し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の理念うんぬんはこのカテゴリ内の他の質問解答で何度となく拝見しましたので
　この質問スレッドにおいて再掲の必要はありません。

補足日時：2011/09/27 01:16

通報する

- 0
- 件

通報する

No.2

回答者： Chaire
回答日時：2011/09/25 00:11

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 個付けておけば楽です。

- 0
- 件

通報する

この回答へのお礼

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

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

通報する

お礼日時：2011/10/01 16:53

No.1

回答者： Chaire
回答日時：2011/09/24 16:57

<p>

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

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

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

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