Webサイト制作 強制改行を求める客に…

質問

サイト制作業です。
皆さんもそうだと思いますが、客から文章中の「四字熟語や単語を改行しないで」とか「ナナメに並べて」とか指示される事があります。
私も一度は「ホームページというのは…」と説明しますが、あまり上手く伝わりません。皆さんはどのように説明されますか。またはこういった指示には何も言わず最初から従いますか？
※説明した上で「それでもいいので（強制）改行して」という場合は改行します。
何が何でも改行が嫌なのではなくて、Webと紙の違いを上手く説明できたらいいなとおもいます。

例1）
四字熟語です四字熟語です四字熟
語です四字熟語です。

↓
四字熟語です四字熟語です
四字熟語です四字熟語です。

例2）
りんご
みかん
すいか

↓

りんご
　みかん
　　すいか

回答No.7

metametamu · ベストアンサー

提示されている例に関して言えばある程度実現は可能でしょうが、だいたい無理な注文は実現する場合の環境が限られてしまうと思います。
スマートフォン等でレイアウト崩れを起こすサンプルでも作ってその場で見せるといいんじゃないでしょうか。

お礼

回答ありがとうございます。
私のお聞きしたかった「説明をするか」「どのように説明するか」に対してお答えいただけたのでベストアンサーに選ばせていただきます。

回答No.9

ORUKA1951

＞例）
＞「ななめに並べて」も、その希望をされる内容見えてこない。
＞隣接セレクタでの対応は示しました。

＞という2行の普通の文章を

＞（りんごのイラスト）「ななめに並べて」も、その希望をされる内容見えてこない。
＞　　（みかんのイラスト）隣接セレクタでの対応は示しました。

＞と並べてほしいというのです。
＞お客様が自分でワードで作ったときにそれがかっこよかったからと。。。

　あくまでこの例で答えると、たとえばこの場合、明らかに一行目は、要望と解決策になります。このような場合に、わかりやすくして欲しいというのは、それをどのように表現するかのプレゼンテーションとは切り離して、「区別して欲しい」と考えればよいです。
<dl class="QA">
　<dt>「ななめに並べて」も、その希望をされる内容見えてこない。</dt>
　<dd>要望と対策を字下げして示す
　　<ul>
　　　<li>CSS2.1で登場した隣接・兄弟セレクタを使う</li>
　　　<li>dl(定義リスト)で対応する<em>HTML5では、dlで会話のようなものをマークアップするのは好ましくないとされている</em></li>
　　</ul>
　</dd>
</dl>
<div class="QA">
　<li>「ななめに並べて」も、その希望をされる内容見えてこない。
　　<ol>
　　　<li>要望と対策を字下げして示す
　　　　<ul>
　　　　　<li>CSS2.1で登場した隣接・兄弟セレクタを使う</li>
　　　　　<li>dl(定義リスト)で対応する<em>HTML5では、dlで会話のようなものをマークアップするのは好ましくないとされている</em></li>
　　　　</ul>
　　　</li>
　　</ol>
　</li>
</div>

　とマークアップするとかでしょう。

　客先の要望は、多くの場合、理不尽なものではなく、そのふたつの文は意味が違うから、それを区別できるようにして欲しいと言う場合が多いです。そのために最適なマークアップは何かないかと、自分の知識をフル動員して探します。どうしてもなければ

<p class="Question">「ななめに並べて」も、その希望をされる内容見えてこない。</p>
<div class="Answer">
　<p>要望と対策を字下げして示す</p>
　<ul>
　　<li>CSS2.1で登場した隣接・兄弟セレクタを使う</li>
　　<li>
　　　dl(定義リスト)で対応する<em>HTML5では、dlで会話のようなものをマークアップするのは好ましくないとされている</em>
　　</li>
　</ul>
</div>
とするかもしれません。

　ここは臨機応変に対応していきます。

あるいは、
<div class="QA">
　<p class="demand">「ななめに並べて」も、その希望をされる内容見えてこない。</p>
　<p>要望と対策を字下げして示すことにしました。「CSS2.1で登場した隣接・兄弟セレクタを使う」か「dl(定義リスト)で対応する<small>HTML5では、dlで会話のようなものをマークアップするのは好ましくないとされている</small>を検討してみました。</p>
</div>
としておいて、スタイルシートで
div.DA p.demand:first-letter{
　　font-size: 200%;
　　float: left;
}
div.DA p:first-letter{font-size:100%;float:none;}
なんて、提案をすることもあるでしょう。

　もし、その要望が本当に理不尽なものであるなら、それが間違いである事を説明するのは容易ですし、それを説明するのはデザイナーの義務でもあるでしょう。
　なぜ、その要望をされるのかも話を聞き、対応すべきです。class名や、idは、そのためにあるのですから・・

『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-DIV )』

お礼

丁寧にアドバイスいただき本当にありがとうございました。

回答No.8

ORUKA1951

その後反応がないのですが・・・
最初の質問で、何を聞かれたいかが、実を言うと、伝わってこないのです。
「四字熟語や単語を改行しないで」
「ななめに並べて」
また別の段落で
「強制改行して」
と、連続して客先からの要望が書かれていますが、
『説明した上で「それでもいいので（強制）改行して」という場合は改行します。』
と、対応されています。

　実際は、まったく個別の問題で、しかも実際の事例によって異なります。たとえば<br>なんて通常は使わない(空)要素です。使うとしたら
<address>
　東京都品川区
　東品川5-5-5
</address>
とかでしょう。それ以外に具体的に必要な場面を思い浮かべません。
逆に詩のような場合は、
<PRE>
　　　Higher still and higher
　　　　From the earth thou springest
　　　Like a cloud of fire;
　　　　The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
</PRE>
　とマークアップすべきでしょう。(仕様書の用例--9.3.4 Preformatted text: The PRE element ( http://www.w3.org/TR/1999/REC-html401-19991224/struct/text.html#h-9.3.4 )から

また、会話の場合は各自の発言を<p></p>で括ればよいです。(dlはHTML5で明確に否定された)

★「それでもいいので（強制）改行して」という場合
　という状況は考えられないのです。よって「という場合は改行します。」という対処はありえない、起こりえないでしょう。

「四字熟語や単語を改行しないで」
についても、それが<a href="#product1">製品名</a>であったり、<span class="compound_word">四字熟語<span>、あるいは<span class="mark">用語の定義</span>である場合は、そのようにマークアップされていれば、No.3の回答のようにスタイルシートで対処できるはずですし、スタイルシートの適用対象をscreenに限定しておけば印刷時には改行されるでしょう。

「ななめに並べて」についても、その希望をされる内容がまったく見えてこないので、隣接セレクタでの対応は示しましたが、まったく不可能なわけではありません。

　肝心なことは、依頼される当事者がHTMLやスタイルシートを知っていれば、そのようなトラブルは起きること自体が想像できないと言うのが本音です。
「ホームページというのは…」なんていいませんし。

　文書構造上、正しければ対処できますが、正しくなければ対処しようがないということですから・・。と言うのが一般論です。一般論でしか堪えられません。

　それでも、こんな場面があったといわれる場合は、具体的な事例を挙げてください。どう対処すべきかは相談に乗れます。

補足

たくさん回答ありがとうございます。
とても参考になっています。

具体的な例は
りんご、みかん、と最初の質問で書いたものは、

例）
「ななめに並べて」も、その希望をされる内容見えてこない。
隣接セレクタでの対応は示しました。

という2行の普通の文章を

（りんごのイラスト）「ななめに並べて」も、その希望をされる内容見えてこない。
　　（みかんのイラスト）隣接セレクタでの対応は示しました。

と並べてほしいというのです。
お客様が自分でワードで作ったときにそれがかっこよかったからと。。。

りんごやみかんなら最初からリストタグを使っているでしょうからまだいいのですが、本来は<p>タグで書くべきものをリストタグに変えてまでそうしているということを、みなさんなら説明するか、説明するならばどのように伝えるのかを教えていただけると助かります。

本当に私はうまく説明ができなくて申し訳ないです。

回答No.6

tracer

例に挙げられたことが出来ないことを前提で仰られていますが、その理由が「技術上不可能」という意味なのか、「文法上おかしい」という意味なのかどちらでしょうか。

まず、既に回答が出ているように、技術的には可能です。
次に、文法的なことですが、確かに「あいうえ<br>お」とするのは、文脈上誤りですね。HTML云々の前に、文章中の改行や段落には必ず意味があります。なので「見た目に美しくない」という理由で改行を用いるのは、少なくとも文法上は誤りです。
場合にもよりますが、多くのクライアントさんは、日本語として通じないレベルを除いては「HTMLの文法の正確さ」なんてものは求めていません。それを押し付けるのは制作者の単なるエゴです。
例えば、似たような例としてブログツールで有名なWordPressでは、投稿に改行(br)を連続して挿入することができません。これはHTML以前の文章ルールとして正しいです。厳密な文章では文頭から改行までが段落なので、空行なんてものは存在しません。しかしながら、「改行を連続して使いたい」というクライアントさんに、そんなルールは通じないのが実際です。どうすればいいのでしょうか。

一番の理想は、「この人が言うなら間違いない」という信頼を得ることです。そもそも普段PCを使わないクライアントさんに対して、いくら細かく説明しても通じるはずがないのです。逆に言えば、話が通じない理由は「信頼されていない」からです。とはいえ、すべてのクライアントさんから同様の信頼を得るのもまた難しい話ですね。
私ならこう言います。
「そうすることは難しいですが、こういう感じにならできますよ」と。
「出来ません」で終わるのはマイナスイメージを残すだけです。

回答No.5

ORUKA1951

例２です。
<dl class="step">
　<dt>果物(好きな順)</dt>
　<dd>りんご</dd>
　<dd>オレンジ</dd>
　<dd>かき</dd>
</dl>
ol.step dd{margin:left:0;}
ol.step dd+dd{margin:left:1em;}
ol.step dd+dd+dd{margin:left:2em;}

これは無理栗です。
　本来は、文書構成上の意味を考えてマークアップをしてデザインすべきです。

補足

私もこの方法を使いました。

回答No.4

ORUKA1951

HTMLちょっと間違えてましたね。
　NOBRやWBRは、HTML4.01にはありませんので、ウェブ標準なら使えないです。
<div class="section">
<p>皆さんもそうだと思いますが、客から文章中の「<span class="mark">四字熟語</span>や<abbr title="word">単語</abbr>を改行しないで」とか「<strong class="trademark">ナナメに</strong>並べて」とか指示される事があります。</p>
</div>

<h2>HTML5</h2>
<section>
<p>皆さんもそうだと思いますが、客から文章中の「<mark>四字熟語</mark>や<mark title="word">単語</mark>を改行しないで」とか「<strong class="trademark">ナナメに</strong>並べて」とか指示される事があります。</p>
</section>

としてください。

[CSS]
div.section p,section p{text-indent:1em;}
div.section p span.mark,
div.section p strong.trademark,
div.section p abbr[title="word"],
section p strong.trademark,
section p mark{white-space:nowrap;}

回答No.3

ORUKA1951

どちらも、最もな意見です。
しかし、英文のように単語境界のある言語と異なり日本語の文章ではありません。ところが重要な語句などは確かに折り返してほしくない場合があります。
　スタイルシートでは、そのような場合も設定できます。

<h2>HTML4.01</h2>
<div class="section">
<p>文章中の「<span class="mark">四字熟語</span>や<abbr title="word">単語</abbr>を改行しないで」とか「<strong class="trademark">ナナメに</strong>並べて」とか指示される事があります。</p>
</div>

<h2>HTML5</h2>
<section>
<p>文章中の「<mark>四字熟語</mark>や<mark title="word">単語</mark">を改行しないで」とか「<strong class="trademark">ナナメに</strong>並べて」とか指示される事があります。</p>

とか、特定の単語に最も適したセマンティック(意味のある)なマークアップをしておきます。

その上でCSSにて、
div.section p span.mark,
div.section p strong.trademark,
div.section p abbr[title="word"],
section p strong.trademark,
section p mark{white-space:nowrap;}

とでもして置けば良いです。

改行したくないと言うことは、何らかの文書構造上の意味があるはずですから、その意味を最もよく表すタグでマークアップして、スタイルシートで表現します。
　上記の例の場合、本文(div.section　section)内の段落内にある、他から参照される可能性のある単語、トレードマークである重要単語は単語の途中で改行しないということです。

　他の場所では改行しても構わないことが多いでしょうから、きちんと詳細度を計算して特定されるようにしましょう。

回答No.2

noname#147388

例１は"nobr -> wbr" 　と "&shy;" で対応可能だとおもいますよ。

回答No.1

kentkun

発注する側の責任者です。

WEBサイトにはいろんな制約があるのは承知しています。
しかし「出来ない」という返事はなるべく最後にしてもらって
なんとか要望通りに頑張ってみる、というのがクライアントの求める姿勢だと思います。

例に挙げられた「熟語は中途で改行しない」などは
工夫すれば可能なことであると認識していますし
例のりんご・・の件も可能だと思っていますが・・

補足

回答ありがとうございます。

りんごのこと、文章を途中で改行することも技術的には可能です。
発注側からの意見を聞くことができ参考になります。
結果的には、お客様の要望どおりに作りますが、それをすることは正しいルールではないと先に説明をしておきたいと思っています。