初歩的な質問ですみません。文字の右寄せについて

2013/06/03 20:11

このQ&Aのポイント

メールマガジンで添付の画像のようなレイアウトをしなければなりません。テキストの最終行のところに「詳しくはコチラ」を右寄せで配置する作業なのですが、うまく行かないです。
テキストを右寄せで配置する方法について教えてください。
このレイアウトで「詳しくはコチラ」を右寄せで配置する方法が分かりません。

daisy8888
お礼率48% (14/29)

CSS
回答数7
ありがとう数1

みんなの回答 （7）
専門家の回答

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

ベストアンサー

naokita
ベストアンサー率57% (1008/1745)

2013/06/04 02:00 回答No.4

<td> <p style="font-size:14px;margin:0;padding:0;"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 <a href="@" style="display: block; margin-top: -1em; text-align:right;">詳しくはコチラ </a> </p> </td>

質問者

お礼 2013/06/05 20:30

ありがとうございました、試した所、求めていた一番近い形になりましたのでベストアンサーとさせていただきました。 ※　naokitaさんをはじめ、回答していただいた方々、本当にどうもありがとうございました。m(_ _)mm(_ _)m 1つのケースに対して様々な方法があると改めて実感しました。 tableは先方さんのどうしてもの要望でしたので仕方なく。。　分業でデザインの方に集中していましたが、コーディングの勉強も少しずつしたいと思いますので、また、よろしければまた、いろいろ教えていただけましたらと思います。まとめたお礼ですみません。本当にどうもありがとうございました。　

ログインすると、全ての回答が全文表示されます。

その他の回答 (6)

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2013/06/05 13:43 回答No.7

<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)

2013/06/04 18:36 回答No.6

ちょっと書き間違えた <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)

2013/06/04 09:05 回答No.5

いくらメルマガでも--メルマガならなおさら--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)

2013/06/03 22:15 回答No.3

<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の表示のされ方が確認できますので活用してください。

参考URL：: http://www.tagindex.com/training/room.html

ログインすると、全ての回答が全文表示されます。

noname#187562

2013/06/03 21:44 回答No.2

<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>

ログインすると、全ての回答が全文表示されます。