こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

テーブル内の文字列の均等割り付けについて

【環境】Windows10,Microsoft Expression Web 4

【状況】
 Microsoft Expression Web 4において、テーブルの<td>タグ内にある文字列に均等割り付けを行いたいとのユーザーからの要望があります。
 テーブルにおいて、「text-justifyプロパティ」を案内しましたが、テーブルでは「text-justifyプロパティ」は機能しません。

 調べたところ、Javaを使用すればできそうなのですが、ユーザーはJavaなどプログラミング経験がありません。

 そのため、Microsoft Expression Web 4でそのような「ビヘイビアー」がないか確認しましたが、見当たりませんでした。


【ご教示いただきたい点】
 1.Microsoft Expression Web 4においてテーブルの<th> <td>タグ内にある文字列に均等割り付けするような「ビヘイビアー」はないのでしょうか。

2.Javaなどプログラミングの経験がないユーザーにおいて、簡単にテーブルの<th> <td>タグ内にある文字列に均等割り付けするような方法はないでしょうか。

投稿日時 - 2018-06-30 10:27:27

QNo.9513687

困ってます

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.5

三つ目の回答で書いたURLはHTMLやCSSの仕様を策定しているW3C(World Wide Web Consortium)のサイトですよ。
そこに書かれていますから、仕様にないという事はありません。
問題は仕様にどれだけ準拠できたブラウザがどれだけあるかという事だけです。

今は時間がないので、夕方以降に時間がとれたらまた書き込むかも知れません。

投稿日時 - 2018-07-02 05:52:04

補足

ありがとうございます。

Firefox,Google Chromeでは、CSSに「 text-align-last: Justify;」「text-justify: inter-ideograph;」で均等割り付けが行えました。

Internet Explorer11,Egeでは、CSSに「 text-align-last: Justify;」「text-justify: inter-ideograph;」で均等割り付けが行えませんでした。

以下のサイトの情報では、CSS3の仕様で「text-justifyプロパティに指定できる値は、まだ規格としては固まっていません」の記述があるようです。
ーーーーーーーーーーーーーーー
https://allabout.co.jp/gm/gc/24009/3/

CSS3の仕様では、まだ固まっていない

このtext-justifyプロパティに指定できる値は、まだ規格としては固まっていません。このプロパティ自体は、CSS3のTextモジュールの最終草案には含まれています。しかし、将来的には削除されるかも知れないとの注釈付きで掲載されているものです。

また、「inter-ideograph」は、W3Cによる最終草案での仕様には含まれていません。しかし、Microsoftによる仕様には含まれていました。ただし、今では「非標準の古い仕様である」との注釈があります。したがって、現時点では「IE・Edge用の独自仕様」であり、将来的には別の記述方法になると考えておく方が良いでしょう。
ーーーーーーーーーーーーーーー


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="ja" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>TEST</title>
<style type="text/css">
.auto-style1 {
border: 1px solid #000000;
text-align-last: Justify;
text-justify: inter-ideograph;
}
.auto-style2 {
border: 1px solid #000000;
}
</style>
</head>
<body visible="true">
<table style="width: 100%" class="auto-style2">
<tr>
<td class="auto-style1">山田太郎</td>
<td class="auto-style2">東京都千代田区</td>
</tr>
<tr>
<td class="auto-style1">花田次郎</td>
<td class="auto-style2">東京都港区</td>
</tr>
</table>
</body>
</html>

投稿日時 - 2018-07-06 23:43:55

お礼

ありがとうございます。

この件について、他のメンバーに相談したところ、「HTMLタグ、CSSで、テーブルのセルの文字列に対して均等割り付けする方法はない」との回答が返ってきたので、Javaなどほかの言語で実現できないかに切り替えて方法を探していたため、仕様にないと思い込んでいました。

方法がないのではなく、「HTMLタグ、CSSで、テーブルのセルの文字列に対して均等割り付けする仕様はあるが、その仕様通りにブラウザで機能しない」という回答を相談したメンバーが回答していればよかったのですが・・・。

現状ではInternet Explorer、Google Chrome,Firefoxともに機能しなかったので、Javaなどでも検討をしてみます。

投稿日時 - 2018-07-03 20:09:06

ANo.4

text-align justifyを指定して後、併記してみて下さい。

投稿日時 - 2018-07-01 19:53:45

補足

ありがとうございます。

以下にしましたが変わりませんでした。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="ja" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>TEST</title>
</head>
<body visible="true">
<table style="width: 100%" class="auto-style2">
<tr>
<td text-align-last="Justify">山田太郎</td>
<td>東京都千代田区</td>
</tr>
<tr>
<td text-align-last="Justify">花田次郎</td>
<td>東京都港区</td>
</tr>
</table>
</body>
</html>

投稿日時 - 2018-07-01 21:22:46

お礼

以下のサイトを見ると、「普通のHTML+CSSでは、均等割付が簡単に出来るタグやプロパティなどはありません。」と記載されています。
なので、タグや、プロパティではできないのではないでしょうか。

tableなどに便利な、文字の均等割り付けをするjQueryプラグイン

https://www.sandalot.com/%E6%96%87%E5%AD%97%E3%81%AE%E5%9D%87%E7%AD%89%E5%89%B2%E3%82%8A%E4%BB%98%E3%81%91%E3%82%92%E3%81%99%E3%82%8Bjquery%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/

投稿日時 - 2018-07-01 21:26:13

ANo.3

ダメと言うのではなく、手元の環境で効かなかったからそのように書いたのですが、私の認識も問題だらけだったようです。
幾つか調べたところ、複数行の文章を前提として、最後の行については均等割り付けすると違和感のある行になる場合がある事から特別扱いで、一行物はtext-align-lastを使用する必要があるようです。
https://www.w3.org/TR/css-text-3/#propdef-text-align-last

投稿日時 - 2018-07-01 14:57:47

補足

ありがとうございます。

以下にしましたが、均等割り付けにはなりませんでした。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="ja" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>TEST</title>
<style type="text/css">
.auto-style1 {
border: 1px solid #000000;
text-align-last: Justify;
}
.auto-style2 {
border: 1px solid #000000;
}
</style>
</head>
<body visible="true">
<table style="width: 100%" class="auto-style2">
<tr>
<td class="auto-style1">山田太郎</td>
<td class="auto-style2">東京都千代田区</td>
</tr>
<tr>
<td class="auto-style1">花田次郎</td>
<td class="auto-style2">東京都港区</td>
</tr>
</table>
</body>
</html>

投稿日時 - 2018-07-01 16:38:03

お礼

以下も試しましたが、Internet Explorer11,Edge,Firefox,Google chromeで均等割り付けが行えませんでした。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="ja" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>TEST</title>
<style type="text/css">
.auto-style1 {
border: 1px solid #000000;
text-align: Justify;
text-justify: inter-ideograph;
}
.auto-style2 {
border: 1px solid #000000;
}
</style>
</head>
<body visible="true">
<table style="width: 100%" class="auto-style2">
<tr>
<td class="auto-style1">山田太郎</td>
<td class="auto-style2">東京都千代田区</td>
</tr>
<tr>
<td class="auto-style1">花田次郎</td>
<td class="auto-style2">東京都港区</td>
</tr>
</table>
</body>
</html>

投稿日時 - 2018-07-07 23:10:34

ANo.2

trはスタイルシートで指定ではなくtrの属性で指定します。
<tr align="justify"><td>商品</td><td>生産者</td>

投稿日時 - 2018-07-01 01:00:58

補足

ありがとうございます。

以下で行いましたが、均等割り付けできませんでした。
また、CSSではなぜ、ダメなのでしょうか。
HTML内でデザイン、スタイルを分けるためにCSSがあるのではないでしょうか。

Microsoft Expression Web 4において「セルのプロパティ」の「レイアウト」の「横位置」を「両端揃え」にすると、Microsoft Expression Web 4が自動的にCSSが作成されて、それが<td>タグにスタイルとして適用されます。
--
.auto-style1 {
border: 1px solid #000000;
--
結果 <tr>タグでも均等割り付けできませんでしたが、もし行えた場合、
商品も生産者も均等割り付けされてしまうのではないでしょうか。

均等割り付けしたいのは、商品の箇所で生産者は均等割り付けしません。
また、justifyですが、日本語をターゲットにしていないので、ブラウザによっては均等割り付けできないのではないでしょうか。
Microsoft Edge,Microsoft Internet Explorer11では、均等割り付けできませんでした。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="ja" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>TEST</title>
</head>
<body visible="true">
<table style="width: 100%">
<tr align="justify">
<td >山田太郎</td>
<td>東京都千代田区</td>
</tr>
<tr align="justify">
<td >花田次郎</td>
<td>東京都港区</td>
</tr>
</table>
</body>
</html>

投稿日時 - 2018-07-01 13:32:52

ANo.1

Expressionを触った事はありませんが、hrタグはスタイルシートのtext-justify指定が有効なはずですけれどね。
tdの場合は個々に<td align="justify">指定するしかありませんが、trを使えば一括指定できます。

投稿日時 - 2018-06-30 18:45:19

補足

ありがとうございます。

Microsoft Expression Web 4において「セルのプロパティ」の「レイアウト」の「横位置」を「両端揃え」にしましたが、均等割りはされませんでした。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="ja" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>TEST</title>
<style type="text/css">
.auto-style1 {
border: 1px solid #000000;
text-align: justify;
}
.auto-style2 {
border: 1px solid #000000;
}
</style>
</head>

<body visible="true">

<table style="width: 100%" class="auto-style2">
<tr>
<td class="auto-style1">山田太郎</td>
<td class="auto-style2">東京都千代田区</td>
</tr>
<tr>
<td class="auto-style2">花田次郎</td>
<td class="auto-style2">東京都港区</td>
</tr>
</table>

</body>

</html>

投稿日時 - 2018-06-30 23:17:17

お礼

ありがとうございます。

以下でも均等割り付けできませんでした。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="ja" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>TEST</title>
</head>
<body visible="true">
<table style="width: 100%">
<tr>
<td align="justify">山田太郎</td>
<td>東京都千代田区</td>
</tr>
<tr>
<td align="justify">花田次郎</td>
<td>東京都港区</td>
</tr>
</table>
</body>
</html>

投稿日時 - 2018-07-01 13:16:18