align="justify" 指定について

質問

サイト・ページ上で、文章の体裁を整えるため、次のようなタグで指定で行っていました：

<div align="justify" class="abc">
文章…………<br>
文章…………</div>

この「文章…………」というのは、実際には複数行にまたがります。

class="abc" は、ＣＳＳでの行間指定などで、align="justify" で、以前は、一行が綺麗にジャスティフィケーションされていました。

そのときは、ブラウザーは、ＩＥ４．０１でした。

その後、ブラウザーをＩＥ５．５ＳＰ２、そして現在はＩＥ６ＳＰ１にしていますが、ジャスティフィケーション指定が有効になりません。

以前は、右端が、綺麗に揃っていたのですが、現在のブラウザーで見ると、右端が不ぞろいで、また、半角スペースなどが行のなかにあると、その部分が、もっと長いスペースになります（半角の英文などを入れると、スペース部分で、大きく開きができるのです）。

つまり、半角スペースなどがあれば、そこで、ジャスティフィケーションの効果が出るのですが、以前のような「文字全体での均等ジャスティフィケーション」になりません。

これは、ブラウザーがＩＥ６などである場合、どうしようもないことなのでしょうか。または、何かの方法で、「均等ジャスティフィケーション」が可能なのでしょうか。

ＯＳはＷＩＮ　ＭＥです。

回答No.4

leaz024 · ベストアンサー

> しかし、例えば、一行大体８０文字ぐらいだとして、最後の行には１０文字しかない場合、この１０文字を約８０文字の一行一杯に均等割付してしまうのです。

それは指定が「distribute-all-lines」（全行指定）だからです。
指定を「distribute」または「inter-ideograph」にしてみて下さい。
（これらは均等割付の方法が違うため表示が微妙に変わりますので、適切な方を指定してください。）

補足

回答たいへんありがとうございます。お礼が遅くなって申し訳ありません。

お教えいただいた、二つの指定値で試してみますと、両方ともに、所望の通りの均等割付が成立するようでございます。

つまり、最後の行は、均等割付されないで、それまでの行は均等割付されるようです。「distribute」の方を使ってみたいと思いますが、実際にホームページに適用してうまく行くようでしたら、これで質問を締め切らせていただきます。

本来、「お礼」に書くべきところですが、ＩＥ６で確認した分ではうまく行くということで、別のヴァージョンや、ブラウザーがＮＮなどでは、うまくいかない可能性が高いです。

（ＮＮでは、distribute-all-lines が不可のようですから、distribute も不可である可能性が高いですが、おかしなことが起こらなければ、それはそれで構わないことです）

その場合、最後の行の均等割付が起こるようでしたら、右端が揃わない形にした方がまだ、見栄えがよいので、その点、質問を締め切った後になって、経過情報を記すときのために、「お礼」は開けておきたく思います。

他の回答者の方にもメールが行くと思いますが、ご了承願います。

あらためて回答ありがとうございます。とりあえず問題が解決したように思えます。
(2002/1022/2022 maris_stella)

回答No.3

gakushaneko

ちょっと（かなり？）言葉足らずで申し訳ないです。

「例えば、一行大体８０文字ぐらいだとして、最後の行には１０文字しかない場合、この１０文字を約８０文字の一行一杯に均等割付してしまうのです。」って，これは当たり前ですよと書いたのは，例えば，１００文字分のところに８０文字を均等割り付けしている状態だったとして，最後の行が１０文字しか無ければ，その行はその１０文字が１００文字分のところに均等割り付けされてしまいます。
そのため，最後の行のみ，体裁を整えるためにはそれまでの行の均等割り付けされた１０文字分が実際の何文字分に当たるかを計算等で求め，その結果を指定しなければならないからです。
つまり，100文字分のところに80文字となるように指定するところを，求めた文字数分のところに10文字を均等割付するように再度指定しなければ，その行だけ間延びしてしまいます。
ワードなどであれば，小数点以下の文字数も有効になっているようですが，比較的単純に出来ているブラウザではそこまで指定出来るかは私にはわかりません。
と言うことで，私からのアドバイスは，80文字になるようにスペースを入れてはどうかというものです。（下の解答を書いた時点ではわかっていなかったので，こう書いておきます）

No.1のleaz024さんへの補足（最初からこれを書けばよかったですよね？本当に申し訳ないです）では，「この形の指定法は知っていまして、以前に試みてうまくいかなかったことを思い出しました。」と書かれていますので，技術もしくは知識はあると思いますから，上の方法のいずれかを試してみてください。
最後の行などには，その行だけのスタイルシートで「letter-spacing:（数字）pt;」を使うとうまくいくかもしれません。（数字は12.75ptのように小数点以下の数値も有効になるようです）
この部分については，一応，ワードで均等割付の編集をして，「ｗｅｂで保存」したところ，ＩＥ6で表示はされましたよ。

と言うか，
<STYLE type="text/css">
<!--
.abc{
letter-spacing : （数字）px;
}
-->
</STYLE>
として，
<div class="abc">文章</div>
とする方法ではだめですか？
一応，ＩＥ６のみの確認ですが，均等割付らしくはなるようですよ。

お礼

回答たいへんありがとうございます。お礼が遅くなって申し訳ありません。

何度か回答を読ませていただいたのですが、理解力が不足なためか、よくわからない点があります。例として、１００文字分に８０文字を均等割付するという話があるのですが、これがよくわかりません。

つまり、一行だけの文字列の均等割付の場合だと、文字列を引き伸ばす範囲を別に指定する必要があります。指定なしだと、可能な幅一杯に均等割付するはずだと思います。

……と思ったのですが、実際には次のような変な結果になります。参考のため、あげておきます。四種類の書き方をしています。

１）は、テーブルをつくり、そのなかで、１行分の文章を入れた場合で、ＩＥ６では、均等割付は作用しません。
２）は、同じテーブルですが、そのなかで、複数行にまたがる文章を入れた場合で、均等割付は作用し、更に、最後の行にも均等割付が作用します。
３）は、普通の<div>の文章ですが、この場合、一行でも、均等割付が作用し、ディスプレイの端から端まで、文字が均等に割り付けられます。
４）は、普通の<div>の文章で、ただ、文章が二行にまたがるようにしています。すると、これも均等割付が作用し、最後の行にも均等割付が作用します。

不思議なのは、１）の場合で、テーブルの幅分のなかで、均等割付が起こると思ったのですが、実際には起こりません。（ここに書いているだけでなく、色々な書き方を試しています）。

（つまり、テーブルで幅指定をして、そのなかに文字列を均等割付するのに、一行だとテーブルではうまく行かないように見えるということです。これは単純に、テーブルのなかで、文字のあいだに半角や全角のスペースを入れると、見た目、均等割付になります）。

なお、テーブルは、枠が見えるように、border=1 にしています。

===============================================================

<style type="text/css">
<!--
.js {text-align: justify;
text-justify: distribute-all-lines; }
-->
</style>

<!-- ----------- -->

<!--　　　　　　　１） -->
<br>
<table border=1 width=400 align=center><tr><td>
<div class="js">可能なことは何か？</div>
</td></tr></table>

<!--　　　　　　　２） -->
<br>
<table border=1 width=400 align=center><tr><td>
<div class="js">可能なことは何か？　？？　abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef</div>
</td></tr></table>

<!--　　　　　　　３） -->
<br>
<div class="js">可能なことは何か？</div>

<!--　　　　　　　４） -->
<br>
<div class="js">可能なことは何か？　？？　abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef abcdef</div>
<br>

===============================================================

ところで、お教えくださった方法では、幾つかの点で問題が起こります。実は、最初の leaz024 さんの回答のとき、最後の行の終わりに全角スペースを必要な数、入れることは考えてみたのですが、次のようなことが問題になります：

１）均等割付する文章の段落数が少ない場合は、これでもよいかも知れませんが、何百とか、それを超える場合、いちいち訂正して行けないのです。わたくしは数えたことはありませんが、何百を超える段落の文章を扱っています。

２）上の１）よりも、もっと重要な問題が起こります。それは、最後の行に何文字が来るかは、ブラウザーの種類も関係しますが、それよりも、ユーザーのディスプレイの大きさで決まってくるということです。

わたしは現在は、ディスプレイの横幅１０２４ピクセルですが、ホームページは、昔から作っているので、横幅８００ピクセルで作っています。横幅１６００ピクセルの方もおり、ディスプレイの横幅ごとで、最後の行の文字数が変化してきます。

ディスプレイの横幅のピクセル数が色々ある現状では、どれかに合わせて最後の行に全角スペースを入れて調整しても、別のピクセル数のディスプレイで見ると、配置が壊れてしまいます。

均等割付をしないで、右端が少しぎざぎざになるのは、まだ見ていても極端に不自然ではありませんが、１０文字ほどが、左右の画面いっぱいに開くと、これはどうみても不自然なのです。

letter-spacing を使っても、同じ問題が起こると思えます。

とまれ、回答ありがとうございます。
(2002/1022/2007)

回答No.2

gakushaneko

横からゴメンね。

「例えば、一行大体８０文字ぐらいだとして、最後の行には１０文字しかない場合、この１０文字を約８０文字の一行一杯に均等割付してしまうのです。」って，これは当たり前ですよ。
だったら，文章の後ろに全体で８０文字になるように，（全角）スペースでも入れてください。
また，フォントによっては，（全角）スペースを入れても構成が崩れることがあります。
例えば，「MS Pゴシック」などがそう。
ですから，構成が崩れにくいフォントを探し出し，そのフォントを指定してください。
でも，これをしても，例えばWindowsで作製したものならMACで見たとき，場合によっては構成が崩れることも考えられます。

ホームページのデザインは，何処まで妥協できるかが問題ですね。
妥協できる範囲は広い方がいいのですが・・・。

お礼

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

ただ、何を述べられたいのか不明です。

＞「例えば、一行大体８０文字ぐらいだとして、最後の行には１０文字しかない場合、この１０文字を約８０文字の一行一杯に均等割付してしまうのです。」って，これは当たり前ですよ。

どういう意味で、「あたりまえ」なのでしょうか？

わたくしは、質問の前提に、環境を記して、こういう環境の場合は、あなたが「できるはずがない」等の断言を行っていることが「できていた」ので、何とか、そういう設定ができないかと、長く自分で調べてみても、うまく行かないので、ここで質問させていただきました。

ＩＥとＮＮで見れば、画面が違うし、タグの有効性も違うというのは、ごくごく初歩的な常識で、ページのデザインは、どこかで妥協しなけれなならないというのも、ごくごく初歩的な自明のことです。

（初歩的な自明のことというのは、タグ辞典などは普通、ＩＥとＮＮで有効・非有効の表示があり、またヴァージョンでも有効・非有効があり、サンプル画面もＩＥとＮＮの二種類用意しており、ブラウザーによって見え方が違う、というのは、参考書を少しでも使った人なら知っているのが当然だからです）。

（企業のサイトだと、アプリを判定して、条件分岐で、それぞれに適した環境のページへと誘導するよう、JavaScript か JAVA で分岐させていることが多いです。ソースを見れば、そういうことは一目瞭然です）。

回答してくださるのは、ありがたいことですが、わたしは決して、何が問題になっているのか、質問内容が何なのか、「分からない」ような形では、質問させていただいていないはずです（何を質問しているのか、曖昧でわからない方が多いというのも事実です）。

まったく、初めてホームページを作る人なら、あるいは、自分に見えているページが、異なる環境の人には「別の形に見えている」という可能性に気づいていないことは考えられます。

しかし、そういう初歩的なことも気づいていないほど、無知にわたしは見えたのでしょうか。

（わたしの尋ねていることは、「一般的」にはできない、ことかも知れません。しかし、ある環境では「できた」のだということを、質問の最初に述べさせていただいています。少なくともＩＥ６環境で実現できないだろうかという質問です。現に「distribute-all-lines」という指定値にしても、辞典では、ＩＥ３，ＩＥ４、またＮＮでは、非有効です）。

ともあれ、gakushaneko さまのご回答、ありがたく思いますが、もう少し、質問者の意図をお汲み取りくださいますよう、お願い申し上げます。
(2002/1019/2148) 1356

回答No.1

leaz024

スタイルシートのabcクラス定義部分に、
text-align: justify;
text-justify: distribute-all-lines;
を追加してみて下さい。

text-align や text-justify の他の値については、参考URL「とほほのWWW入門＞スタイルシート＞テキスト配置」をご参考ください。

参考URL：

http://tohoho.wakusei.ne.jp/wwwcss2.htm#text-align

補足

早速の回答、ありがとうございます。アドヴァイス通りに、スタイル指定してみましたが、問題が起こります。

スタイル・シート辞典で調べてみると、最初に書けばよかったのかも知れませんが、すっかり忘れていたのですが、この形の指定法は知っていまして、以前に試みてうまくいかなかったことを思い出しました。

どういう問題かと言いますと、複数行の文章にジャスティフィケーション（均等割付）をかけると、途中の行はうまく行くのです。

しかし、例えば、一行大体８０文字ぐらいだとして、最後の行には１０文字しかない場合、この１０文字を約８０文字の一行一杯に均等割付してしまうのです。

<div align="justify">
文章…………</div>

の形のジャスティフィケーション指定では、途中の行はうまく均等割付され、最後の行は、一行一杯には均等割付がなかったのです（また、印刷物などで、文章に均等割付を使う場合は、これは当然のことなのです）。

最後の行に、均等割付が作用しないように色々指定を変えてみましたが、どうもうまく行きません。

印刷された文章などは、普通、右端も揃っているわけで、こういう形のジャスティフィケーションをと考えているのですが、上記のように、うまく行きません。何か、他に方法はないでしょうか。

本来、お礼に書くべき内容も含みますが、回答たいへんありがとうございます。
(2002/1018/2222)