アプリ版：「スタンプのみでお礼する」機能のリリースについて

初歩的な質問ですみません。部分的な文字の右寄せです

解決済

  • 質問者：daisy8888
  • 質問日時：
  • 回答数：7件

初歩的な質問ですみません。。

メールマガジンで添付の画像のようなレイアウトを
しなければなりません。　

テキストの最終行のところに「詳しくはコチラ」を
右寄せで配置する作業なのですが、何をやっても上手
く行きません。　

もし、これがいいですよ！という方法がありましたら、
どうか教えて下さい。

↓これでは、もちろん上手く行くわけないですね。。

<body>
<table width="640">
<tr>
<td>
<p style="font-size:14px;margin:0;padding:0;">
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト。
<span style="text-align:right"><a href="@">詳しくはコチラ </a>
</span>
</p>
</td>
</tr>
</table>
</body>

「初歩的な質問ですみません。部分的な文字の」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.4ベストアンサー

  • 回答者： naokita
  • 回答日時：

<td>


<p style="font-size:14px;margin:0;padding:0;">
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト。
<a href="@" style="display: block; margin-top: -1em; text-align:right;">詳しくはコチラ </a>
</p>
</td>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました、試した所、求めていた一番近い形に
なりましたのでベストアンサーとさせていただきました。




※　naokitaさんをはじめ、回答していただいた方々、本当に
どうもありがとうございました。m(_ _)mm(_ _)m


1つのケースに対して様々な方法があると改めて実感しました。

tableは先方さんのどうしてもの要望でしたので仕方なく。。
　
分業でデザインの方に集中していましたが、コーディングの
勉強も少しずつしたいと思いますので、また、よろしければ
また、いろいろ教えていただけましたらと思います。

まとめたお礼ですみません。

本当にどうもありがとうございました。
　

通報する
お礼日時：2013/06/05 20:30

No.7

  • 回答者： taloo
  • 回答日時：

<p style="float:left">テキスト・・・<span style="float:right">詳しくはこちら</span></p>




ウインドウサイズと文字数の関係で、『テキスト・・・』が右端でちょうど終わっても『詳しくは』と重なる事もないと思います。

<td>の中なのでclearは不要だと思います。

<span>を使わずに<a style="float:right">でも良いと思います。
（タグ数を減らしシンプルにするために、できるだけ<span>を使わない方を推奨です。）

※line-height、font-sizeが異なる場合、その影響を受けるかもしれません。
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： ORUKA1951
  • 回答日時：

ちょっと書き間違えた


<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>
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： ORUKA1951
  • 回答日時：

いくらメルマガでも--メルマガならなおさら--tableじゃまずいでしょう。

tableをデザインに使用すると大変困ったことになります。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

<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>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： warpspace
  • 回答日時：

<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
    • good
    • 0
    • 件
通報する

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>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： tanuhei
  • 回答日時：

『text-align』プロパティは、右寄せしたいテキストの親要素（ブロック要素）に指定しなければなりません（たしか…笑）。



<span style="display:block;text-align:right"><a href="@">詳しくはコチラ </a>

と、してみて下さい。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報