- ベストアンサー
初歩的な質問ですみません。文字の右寄せについて
- メールマガジンで添付の画像のようなレイアウトをしなければなりません。テキストの最終行のところに「詳しくはコチラ」を右寄せで配置する作業なのですが、うまく行かないです。
- テキストを右寄せで配置する方法について教えてください。
- このレイアウトで「詳しくはコチラ」を右寄せで配置する方法が分かりません。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
<td> <p style="font-size:14px;margin:0;padding:0;"> テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト。 <a href="@" style="display: block; margin-top: -1em; text-align:right;">詳しくはコチラ </a> </p> </td>
その他の回答 (6)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
<p style="float:left">テキスト・・・<span style="float:right">詳しくはこちら</span></p> ウインドウサイズと文字数の関係で、『テキスト・・・』が右端でちょうど終わっても『詳しくは』と重なる事もないと思います。 <td>の中なのでclearは不要だと思います。 <span>を使わずに<a style="float:right">でも良いと思います。 （タグ数を減らしシンプルにするために、できるだけ<span>を使わない方を推奨です。） ※line-height、font-sizeが異なる場合、その影響を受けるかもしれません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ちょっと書き間違えた <div style="border:ridge 2px gray;position:relative;padding:0.5em 1em;line-height:1.4em;"> <p style="text-indent:1em;margin:0;"> 単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。 </p> <p style="width:10em;position:absolute;bottom:-0.5em;right:-1em;background-color:white;text-align:left;"> ・・・・ <a href="@">詳しくはコチラ </a></p> </div> 下記だと、文字数に関係なく５行で打ち止め・・・メーラーの読み取りスペースが狭かろうが広かろうが・・ <div style="border:ridge 2px gray;position:relative;padding:0 1em;line-height:1.4em; height:7em;overflow:hidden;"> <p style="text-indent:1em;margin:0;"> 単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。 </p> <p style="width:10em;position:absolute;bottom:-1em;right:0;background-color:white;text-align:left;"> ・・・・ <a href="@">詳しくはコチラ </a></p> </div>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いくらメルマガでも--メルマガならなおさら--tableじゃまずいでしょう。tableをデザインに使用すると大変困ったことになります。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )］より <div style="border:ridge 2px gray;position:relative;padding:05em 1em;line-height:1.4em;"> <p style="text-indent:1em;margin:0;"> 記事 </p> <p style="width:10em;position:absolute;bottom:1px;right:1px;background-color:white;text-align:left;"> ・・・・ <a href="@">詳しくはコチラ </a></p> </div>
- warpspace
- ベストアンサー率56% (83/147)
<div style="position:relative;"> <p style="font-size:14px;margin:0;padding:0;"> テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト。</p> <div style="position:absolute;right:0px;bottom:0px;"> <a href="@">詳しくはコチラ </a> </div> </div> ちなみに下記のページを使うと、簡単にHTMLの表示のされ方が確認できますので 活用してください。
<table width="640"> <tr> <td> <p style="font-size:14px;margin:0;padding:0;"> テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテ。</p> <a style="text-align:right;" href="@">詳しくはコチラ </a> </td> </tr> </table>
『text-align』プロパティは、右寄せしたいテキストの親要素（ブロック要素）に指定しなければなりません（たしか…笑）。 <span style="display:block;text-align:right"><a href="@">詳しくはコチラ </a> と、してみて下さい。
お礼
ありがとうございました、試した所、求めていた一番近い形に なりましたのでベストアンサーとさせていただきました。 ※ naokitaさんをはじめ、回答していただいた方々、本当に どうもありがとうございました。m(_ _)mm(_ _)m 1つのケースに対して様々な方法があると改めて実感しました。 tableは先方さんのどうしてもの要望でしたので仕方なく。。 分業でデザインの方に集中していましたが、コーディングの 勉強も少しずつしたいと思いますので、また、よろしければ また、いろいろ教えていただけましたらと思います。 まとめたお礼ですみません。 本当にどうもありがとうございました。