初歩的な質問ですみません。文字の右寄せについて
- メールマガジンで添付の画像のようなレイアウトをしなければなりません。テキストの最終行のところに「詳しくはコチラ」を右寄せで配置する作業なのですが、うまく行かないです。
- テキストを右寄せで配置する方法について教えてください。
- このレイアウトで「詳しくはコチラ」を右寄せで配置する方法が分かりません。
- ベストアンサー
初歩的な質問ですみません。部分的な文字の右寄せです
初歩的な質問ですみません。。 メールマガジンで添付の画像のようなレイアウトを しなければなりません。 テキストの最終行のところに「詳しくはコチラ」を 右寄せで配置する作業なのですが、何をやっても上手 く行きません。 もし、これがいいですよ！という方法がありましたら、 どうか教えて下さい。 ↓これでは、もちろん上手く行くわけないですね。。 <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>
- daisy8888
- お礼率48% (14/29)
- CSS
- 回答数7
- ありがとう数1
- みんなの回答 （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/2281)
<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> と、してみて下さい。
関連するQ&A
- 文字の右寄せの書き方
次のようにすると「2009年7月5日」の文字が右寄せされると思うのですが、右寄せされません。どこが間違っているのでしょうか。 <head> <style type="text/css"> <!-- p.2 {line-align:right; } --> </style> </head> <body> <p class="2">2009年7月5日</p> </body>
- ベストアンサー
- HTML
- コード整理・修正おねがいします。
<html> <head><title>Century_1974のHP</title></head> <body bgcolor="#afafb0" text="#ffffff" link="#0033ff" vlink="#0000ff" alink="#ccff00"> <p></p> <p><br /><br /><br /></p> <div align="left"> <table height="76" width="1033" border="5"> <tbody> <tr> <td bgcolor="#0f2350" align="center"><span style="font-size: 300%;" size="7"><b><i> <i>Century_1974のホームページ</i></i></b></span></td> </tr> <tr> <td align="center"><marquee scrollamount="1">ようこそ。この度はアクセス有り難うございます。こまめに更新しているので、ブックマークへの登録を是非どうぞ。また、Twitterなどもやっております。そちらのフォローも是非よろしくお願いします。</marquee></td> </tr> </tbody> </table> </div> <hr /> <p>ようこそ。貴方は<a href="http://www.mini-counter.com/" target="_blank"><img src="http://www.mini-counter.com/group3/counter2.cgi?TAZ=85=5" alt="mini-counter" height="17" width="75" border="0" /></a>人目のお客様。</p> <hr /> <p>特に書くことも今のところ見当たらない。だけど、いまこういうシンプルなサイトって見直されていいと思う。</p> <hr /> <p>掲示板</p> <table height="118" width="718"> <tbody> <tr> <td bgcolor="#0f2350" align="center"><span style="font-size: 300%;" size="7"><b><i>Contents<br /></i></b></span></td> </tr> <tr> <td bgcolor="#ffffff"><a href="jikoshoukai.html"><span style="font-size: x-large;">自己紹介</span></a></td> </tr> <tr> <td bgcolor="#ffffff"><a href="gakkoukiroku.html"><span style="font-size: x-large;">学校記録</span></a></td> </tr> <tr> <td bgcolor="#ffffff"><a href="kaihatu.html"><span style="font-size: x-large;">開発室</span></a></td> </tr> <tr> <td bgcolor="#ffffff"></td> </tr> <tr> <td bgcolor="#ffffff"> <p><a href="mailto:n***@excite.co.jp"><span style="font-size: x-large;">リンク<br /></span></a></p> </td> </tr> <tr> <td></td> <td></td> </tr> </tbody> </table> <p></p> </body> </html> <body oncontextmenu="alert('右クリックは禁止です。');return false;"> <!-- text below generated by geocities.jp --></object></layer></div></span></style></noscript></table></script></applet><script language="javascript" src="http://bc.geocities.yahoo.co.jp/js/geov2.js"></script><script language="javascript">geovisit();</script> 誰かコード整理お願い。 右クリ禁止を正しく設定してください。 宜しくお願いします。
- 締切済み
- HTML
- 楽天のバナーを縦帯から横縦帯にする方法
楽天のバナー<table border="0" cellpadding="0" cellspacing="0"><tr><td valign="top"><div style="border:1px solid;margin:0px;padding:6px 0px;width:120px;text-align:center;float:left"><a href="***%3f_ex%3d64x64" alt="【SALE】MAX82%OFF!!税込10,500円以上ご購入で送料無料！CECIL..." border="0" style="margin:0px;padding:0px"></a><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px"><a href="***" target="_blank">【SALE】MAX82%OFF!!税込10,500円以上ご購入で送料無料！CECIL...</a><br><span style="">価格：2,940円（税込、送料別）</span><br></p></div></td></tr></table> 縦帯から横縦帯にする方法を教えてください。どこの場所を変更すれば縦帯から横縦帯にできるのか誰か教えてください。 よろしくお願いします。
- 締切済み
- CSS
- <p>要素をインライン要素にしての右寄せ
<p>要素をインライン要素にしての右寄せ 【以下、HTML】 .text{ font-size:12px; font-weight:normal; margin:0px; padding:25px 0px 0px 35px; } <div class="text"> <img src="-" style="vertical-align:-2px;margin:0px 10px 10px 15px;"><a href="-">リンク</a><p style="text-align: right;display:inline;">あいうえお</p><br></div> 上記の「あいうえお」の部分を画像やリンクと並列したく、インライン要素で右寄せしたいんですがどうしたらいいでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- オンマウスでプルダウンメニューを作りたいのですが？
オンマウスでプルダウンメニューを作りたいのですが、作って見た所表示はしますが、消えません。 それと、横に同様なメニューを作る場合の方法を申し訳ありませんが教えてください 以下がソースです。 <HTML> <HEAD> <TITLE>メニュー</TITLE> </HEAD> <BODY> <A href="#" onMouseover="window['table'].style.display='none'" onMouseout="window['table'].style.display=''"> ●●情報</A> <TABLE id="table" border="1" style="display:" align="left" cellpadding="0" cellspacing="0" width="180"> <TR> <TD CLASS="td9" COLSPAN="3" ALIGN="left"><a href="http://www.goo.ne.jp"></a>●●</TD> </TR> <TR> <TD CLASS="td9" COLSPAN="3" ALIGN="left">▲▲</TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
- ＜TR>のマージン設定したい
<table border=1 width=100% style="margin:10px"> <tr style="margin:10px"> <td width=30>a</td><td>a</td><td>a</td> </tr> <tr> <td>a</td><td>a</td><td>a</td> </tr> </table> この2行のテーブルなのですがtrの間を広げたいのですが 何か方法は無いでしょうか。 styleでmarginやpaddingがあったのですが、テーブル全体にたいしてはできるのですが、 テーブルの中身に対しては、出来ないみたいで困っています。 よろしくお願いいたします
- ベストアンサー
- HTML
- スタイルシート
<!-- span#k-11 { background-image : url("a.gif")} span#k-12 { background-image : url("b.gif")} span#k-21 { background-image : url("c.gif")} span#k-22 { background-image : url("d.gif")} --> <body> <table> <tr> <td><a href=""><span id="k-11" style="width:192; height:33;"></span></a></td> <td><a href=""><span id="k-12" style="width:192; height:33;"></span></a></td> </tr> <tr> <td><a href=""><span id="k-21" style="width:192; height:33;"></span></a></td> <td><a href=""><span id="k-22" style="width:192; height:33;"></span></a></td> </tr> </table> </body> 外部スタイルシートで、 同じ大きさ（width:192; height:33; gif画像の大きさ）のgif画像を、縦２×横２のテーブルを表示して、その個々の画像にリンクを貼りたいと思っています。 一応これできますが、もう少しbody内のテーブルを簡略したいと思いますが、なかなかうまいきません。 １．大きさの部分（width:192; height:33;）をスタイルに入れると、何故か画像が表示されなくなります。 ２．リンクの部分もスタイルに入れたいのですが、どのようにすればよいかわかりません。 どうぞご指導よろしくお願いします。
- 締切済み
- その他（プログラミング・開発）
- 可変長要素を中は左寄せのまま中央寄せ
widthが可変長の要素があって、その中は左寄せのまま、中央寄せにしたいです。 次のようにテーブルを使えばできたのですが、 テーブルを使わずにやることはできますか？ <style> .outer{ width:500px; margin:0 auto; background:#eee; text-align:center; } .inner{ background:yellow; margin:0 auto; text-align:left; } </style> <div class='outer'> <table class='inner'> <tr> <td>可変長の文字列・・・・・・・・・・</td> </tr> <tr> <td style='padding:20px 0;'>aaa</td> </tr> <tr> <td>bbbbbbbbbbbbbb</td> </tr> </table> </div> display:inline-blockを使っても中央寄せにはなりますが、 「行間」の設定が困難でこれではだめでした。 （１行だけならline-heightで設定できるが、複数行になったとき意図したものではなくなる） <div class='outer' > <span class='inner' style='display:inline-block'> <span>可変長の文字列・・・・・・・・・・・・・・</span><br> <span>「行間」の設定はできないのでだめ</span> </span> </div> 宜しくお願いします。
- ベストアンサー
- CSS
- <td>中の文字列に<p>は必要?
テーブルの<td></td>タグ中の文字列は、<p></p>タグで囲むべきでしょうか? <p></p>タグで囲まない場合の例： <body> <table border="4" width="250"> <tr> <td align="left"> ここの文字について質問しています。 </td> </tr> </table> <p></p>タグで囲む場合の例： <body> <table border="4" width="250"> <tr> <td align="left"> <p> ここの文字について質問しています。 </p> </td> </tr> </table> </body> どちらが、良いのでしょう? よろしくお願いします。
- ベストアンサー
- HTML
- テーブルの線について
下記のようなＨＰをつくっています。 一番大きなテーブルの上下の線を消すにはどこをどのようにすればいいのでしょうか？ ご回答いただけると嬉しいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="100%" cellspacing="1" cellpadding="1" width="730" align="center" bgcolor="#c0c0c0" border="0"> <tr> <td bgcolor="#ffffff" colspan="2"> </td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" height="120" background="sozai/title_back.gif"> <p align="center"><img height="50" alt="" src="sozai/title.gif" width="369" border="0"></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" valign="top" align="left"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｔｏｐ</font></td> </tr> <tr> <td><a class="menu" href="">Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="">作品集</font></a></td> </tr> <tr> <td><a class="menu" href="">お教室情報</font></a></td> </tr> <tr> <td><a class="menu" href="">Ｓｈｏｐｐｉｎｇ</a></td> </tr> <tr> <td><a class="menu" href="">お友達サイト</a></td> </tr> </table> <p align="center"> <img src="http://counter1.fc2.com/counter_img.php?id=47426"><br> </p></td></tr></table> <table cellspacing="1" bgcolor="#c0c0c0" border="0" cellpadding="20" width="565" align="left"> <tr> <td bgcolor="#ffffff" ><br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> </td> </tr> </table> </td></tr> <tr> <td bgcolor="#ffffff" colspan="2"> <p align="center"> <font color="#808080">Copyright © 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2"><br> </td> </tr> </table> </body></html>
- ベストアンサー
- HTML
お礼
ありがとうございました、試した所、求めていた一番近い形に なりましたのでベストアンサーとさせていただきました。 ※ naokitaさんをはじめ、回答していただいた方々、本当に どうもありがとうございました。m(_ _)mm(_ _)m 1つのケースに対して様々な方法があると改めて実感しました。 tableは先方さんのどうしてもの要望でしたので仕方なく。。 分業でデザインの方に集中していましたが、コーディングの 勉強も少しずつしたいと思いますので、また、よろしければ また、いろいろ教えていただけましたらと思います。 まとめたお礼ですみません。 本当にどうもありがとうございました。