• ベストアンサー

表示するテキストをきれいに揃えるには

ご挨拶文のようなものを、表内にテキストで表示させます。 その際に、ワードのような箱組み（両端の文字が揃う状態）を しなければいけなくなりました。 ＤＴＰではありませんので、普通に考えますとＨＴＭＬの仕様上 不可能ではと思いますが、スタイルシートや何らかの工夫をして 解決できる方法をご存知の方いますでしょうか。 運用上の問題から、テキストの画像化による対応ができず、 当然一般公開のため、仮にブラウザをＩＥのデフォルトである 環境設定とした場合でも、思いつきませんでした。 完璧ではないにしても、何らかの対応を行った経験者の方や 知識をお持ちの方がいましたら、何卒宜しくお願いします。

  • HTML
  • 回答数5
  • ありがとう数5

質問者が選んだベストアンサー

  • ベストアンサー
  • NYOI
  • ベストアンサー率58% (56/96)
回答No.3

No1,2さんの回答を合わせたような感じですが、スタイルシートで text-align: justify; を指定したあと、 text-justify: "値" を指定するといいと思います。 text-justifyに指定する値は各種ありますが、日本語の場合inter-ideographが言いと思われます。 .justify{ text-align: justify; text-justify: inter-ideograph; } スタイルシートはこんな感じで。 あとは均等揃えが必要な箇所のタグのプロパティにclass="justify"を。

ele_ele
質問者

お礼

回答ありがとうございます。 月曜日にリトライしてみます。

その他の回答 (4)

  • bunoo
  • ベストアンサー率60% (3/5)
回答No.5

すいません。前回テーブルタグと言うトンチンカンな回答をしたものです。 今日、たまたま「Mozilla, Opera でも日本語を均等割付」という記事が書かれたサイトを見つけました。私自身は試していないのですが、参考ＵＲＬに書いておきますね。

参考URL：
http://www.faireal.net/articles/4/25/#d20217
ele_ele
質問者

お礼

アドバイスありがとうございます。 本件に関わらず、頂いた情報は今後活用して参ります。

ele_ele
質問者

補足

こちらにまとめてご報告致します。 各種対応の結果、text-justifyの利用が非常に有効的でした。 Dreamweaverの古いバージョンを利用していたのですが、今回の text-justifyがコードになく、自身の勉強不足を知らされました。 最近はＩＥ７もテスト版が出ており、各種ブラウザも細かい設定が 色々簡単に出来てしまうなか、今回のtext-justifyもそれらの設定に 対しては難しい所もあり、いろいろと考えるきっかけとなりました。 ご回答頂いたみなさま、改めてありがとうございました。

  • bunoo
  • ベストアンサー率60% (3/5)
回答No.4

質問の意味を履き違えているかもしれませんが、両端の文字をそろえたいだけなのであれば、スタイルシートが難しいようでしたら、テーブルタグで誤魔化す手もあります。 --------- <html> <head> <title>タイトル</title> </head> <body> <table width="500px" border="1" bordercolor="black" align="center"> <tr><td> ここに書きたい文章を書く…… </td></tr> </body> </html> ------------ 以上のような感じです。 widthで指定している数字を変えれば横幅を変えられます。周りの枠線の太さはborderで指定している数字を変えてください。ゼロにすれば、枠線を見せずにテキストをそろえることも可能です。bordercolorの指定を変えることで枠線の色を変えられます。質問からして、ワードのように箱組み（表）を真ん中に寄せたいのかと思いましたので、alignにcenterを指定しておきました。align="left"で左側に、"right"で右側に寄せられます。 ただ、実際はtableタグは表をあらわすためのタグで、この使い方は邪道です（笑）。

参考URL：
http://capsule.chips.jp/
ele_ele
質問者

お礼

アドバイスありがとうございます。 例えば、このページのように左端か右端だけあわせる事は容易に できます。しかし、ワードのように文字の折り返し位置を全て 均等にする（３０行文の文章の各行の終わりが凸凹にならない） という話になってしまい、悩んでいる所です。 皆様のご回答を元に、来週挑戦してみます。

  • jprr
  • ベストアンサー率51% (108/210)
回答No.2

text-align:justify は依存性があるので text-justify:… …は属性 が良いと思います。

ele_ele
質問者

お礼

回答ありがとうございます。 月曜日に頂いた情報からリトライしてみたいと思います。

noname#20925
noname#20925
回答No.1

スタイルシートで <text-align:justify;> ↓を参考に。 http://www.htmq.com/style/text-align.shtml 当方の知識は完璧ではないので、 当然「自信なし」で。

ele_ele
質問者

お礼

アドバイスありがとうございます。 チェックが遅くなり申し訳ありません。 解説サイトの通りではなかなかうまくできませんでした。 難しいですね・・・

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • firefoxでサイトを見ると表示されないテキストの直し方

    ホームページを作り、IE以外にどう見えるかfirefoxで見てみましたら、テキストの表示されないエリアがあったりして、スタイルシートの設定が悪いのかと思います。forefoxだと見えなくてIEだとちゃんと見えるというのはｈｔｍｌのどこかが間違っていると思うのですが、もし、同じようなご経験のある方いらっしゃいましたらご教授お願いいたします。

  • テキストをボーダーで囲むCSS

    CSSを本を見ながらやっていますが、 下記の例文でテキストをボーダーで囲むものをやってみました。 この中で、 margin-left:100px; margin-right:100px; というころですが、これはブラウザに対しての両サイド空きを意味していると思うのですが、逆に囲んでいる幅のほうを指定するにはどうしたらよいのでしょうか。 または、そのようなことはできないのでしょうか。 <STYLE TYPE="text/css"> <!-- P.text {text-align:justify; text-justify:distribute; line-height:154%; margin-left:100px; margin-right:100px; border-style:solid; border-width:2px; border-color:#dd8888; padding:10px} --></STYLE> *****HTML <P CLASS="text"> テーブルみたいになるテキスト</P>

    • ベストアンサー
    • HTML
  • テキストのデフォルト非表示に関して

    テキストのデフォルト非表示に関して 以下のように、プルダウンの選択によってテキストの表示、非表示をjavascriptを使って コントロールしようとしていまいすが、そもそもデフォルトでテキストを非表示にしたい場合は どのように記述すれば良いでしょうか。。。 初歩的な質問で申し訳ありません。 よろしくお願いします。 《内容》 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function ChangeSelection(form, selection) { if (selection.value=="休み") { document.getElementById("text_note").style.display = "block"; }else if (selection.value=="出張") { document.getElementById("text_note").style.display = "block"; }else { document.getElementById("text_note").style.display = "none"; } } </SCRIPT> </HEAD> <BODY> <FORM NAME="fm_a" ACTION="koudou_update2.php" METHOD="POST"> <TD NOWRAP SIZE="30"><input name="text_note" style="width:100%" VALUE=$out_goto></input></TD> <TD><select name="am_note" ONCHANGE="ChangeSelection(this.form, this)" style="width:145px;"> <option value=""></option> <option value="自席" style="background-color:#FFFFFF; color:#3366FF" $sqlline1>自席</option> <option value="離席" style="background-color:#3366FF; color:#FFFFFF" $sqlline2>離席</option> <option value="帰宅" style="background-color:#FFFFFF; color:#3366FF" $sqlline3>帰宅</option> <option value="午前休暇" style="background-color:#3366FF; color:#FFFFFF" $sqlline4>午前休暇</option> <option value="午後休暇" style="background-color:#FFFFFF; color:#3366FF" $sqlline5>午後休暇</option> <option value="休み" style="background-color:#3366FF; color:#FFFFFF" $sqlline5>休み</option> <option value="出張" style="background-color:#3366FF; color:#FFFFFF" $sqlline13>出張</option> </select></TD> </FORM> </BODY>

  • Outlookでテキスト形式Mailの設定

    OutlookExpress6で送信メールをオプション設定にてテキスト形式に指定しても「ひながた」が優先されてデフォルトでHTML形式になってしまいます。デフォルトで送信メールをテキストに設定するにはどうしたらよいでしょうか？

  • JSP:　テキストからPDF作成

    以前も質問してJSPでテキストファイルから、PDFを作成できるようになったのですが。 HTMLタグ(主にテーブルタグです。)が書いてあるテキストファイルを読み込み、PDFファイルにブラウザでの表示と同じようにテーブルを出力したいのです。 現在、1行ごとに判定して<tr>や<td>がでたらcell.setRowspan();とかで作り直す方法を考えていますが、この場合、その他のタグに対応しきれないと思います。 何か良い方法をご存知の方教えてください。よろしくお願いします。

  • 【MS Outlook】リッチテキスト形式とHTML形式の実用上の違い

    リッチテキスト形式とHTML形式の実用上の違いは何でしょうか？ 仕事でOutlook 2002を使用しています。 メール形式の選択で「テキスト形式」「リッチテキスト形式」「HTML形式」の 3種類が選べるのですが、 リッチテキストとHTMLの実用上の違いが分かりません。 いろいろ調べてみたのですが リッチテキストはMSが、HTMLはW3Cが定めた仕様といったとろが限界で、 実用上使う上での違いが見えてきませんでした。 分かる方いらっしゃいましたら、よろしくお願い致します。

  • 外部テキストに書いたHTMLタグがそのまま表示されてしまう。

    現在、Flash作成フリーソフト「Suzuka」で、Flashを作成中なのですが、 どうしても分からない箇所がありますので、アドバイスをよろしくお願いします。 以下のことでつまずいてます。 ダイナミックテキストに外部テキストを読み込ませることは出来るのですが、 外部テキスト内に書いているHTMLタグが、そのまま表示されてしまい、困っています。 外部テキストの内容はこんな感じです。 total=4& &txt0=<font color="#ff0000">文字の色を赤に変えたいです</font>& &txt1=あいうえお& &txt2=かきくけこ& &txt3=さしすせそ テキストのプロパティで「HTML」にチェックをいれてプレビューまたは、パブリッシュ後にブラウザで確認しても、 どうしてもタグが解釈されずに、そのまま<font color="#ff0000">文字の色を赤に変えたいです</font>で表示されてしまいます。 Suzukaのヘルプには、<font>タグがサポートされていると書いてあるのですが…。 Flashに詳しい方、アドバイスをよろしくお願いいたします。

    • ベストアンサー
    • Flash
  • うざいフォーカスを勝手にテキストボックスへ移動させないようにするには？

    「OKWeb」だけでなく「Yahoo! Japan」「Google」など一部のHPを開いたりリロード（更新・再読み込み）したりする際、クリックしていないにもかかわらず検索用のキーワードを入力するテキストボックスへフォーカス（カーソル？）が勝手に移動し、クリックしたのと同じ状態になってしまいます。 どうにかしてこのうざいフォーカスを移動させないようにする方法ってないのでしょうか？ 当方のブラウザは Internet Explorer 6.0 (IE6 SP1) ですが、これはブラウザかHTML、あるいはJavaといった言語の仕様で起こるものしょうか？

  • Keynoteで図形にテキストが入らない

    macosx 10.9.5 keynote 6.2.2 を使っています。 「図形」のスタイルで「塗りつぶしなし」＋「枠線あり」にするとテキストが入力できず、困っています。 ただし「塗りつぶしあり」または「塗りつぶしなし」＋「枠線なし」だと入力できます。 またテキストを入力した後で「塗りつぶしなし」＋「枠線あり」にしてもテキストは残りますし、全部消さない限り編集も出来ますが、全部消してしまうとまた入力出来なくなります。スライドは真っ白のテンプレート（デフォルトのタイトルなどの部品は全部削除したもの）を使っています。 これはやり方が悪いのでしょうか？それともバグあるいは仕様でしょうか？ 書いている図は、枠線が黒の白い四角にテキストのある図形を複数置いてそれらを線で繋いぐ単純なダイアグラムです。 この図形を多用するので、今はコピーして使い回していますが、できれば私としては何も文字のない四角い枠を置いてからおもむろに文字を入力したい（前の文字が残っているとどうも感じが悪く、思考の妨げになってしまう）ので、質問させて頂きました。よろしくお願い致します。

    • ベストアンサー
    • Mac
  • CSSにおいて、画像とテキストの配置（回り込み）について

    ＣＳＳ＋ＨＴＭＬによって、ＨＰを作成しております。 ＨＰ作成ソフトはDream Weaver8です。 画像をテキストの左に回りこませる技術。 （例） ■■■■　テキストテキスト ■画像■　テキストテキスト ■■■■　テキストテキスト はスタイルシートで、画像にスタイルシートの ボックスのfloat定義でleftをつけて <div class="header" id="pageName"> <div id = "left"></div> <span class="style3">テキスト</span><br/> </div> このように設定すればよいのかと思ったのですが （headerは外部スタイルシートで、読み込み） 十分に画像をおくスペースがないと、 画像に、テキストがかぶってしまう場合や、（レイヤーが働いてしまう。）うまく、回り込まないのですが、どの設定が足りないのでしょうか。 ちなみにたっぷりとスペースをとった、ｄｉｖですと、 回り込ませることができたりしましたが、メニューdivなど 小さいスペースや縦幅が足りないとだめなのでしょうか。 画像のレイヤーの解除指定などをした方がよろしいのでしょうか。 まだ、初心者ですが、もし、ヒントだけでも、教えていた だけますと幸いです。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する