- ベストアンサー
初歩的で申し訳ありませんが・・
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ついでに、表の枠を消しました。 ***************************** <table><tr> <td> <TABLE> <TBODY> <TR> <TD><img src="/cat.gif"></TD> <TD>ＯＫ！ ＣＯＭＥ ＯＮ！</TD> <TD><img src="/cat.gif"></TD> </TR> </TBODY> </TABLE> </td> </tr></table> ****************************
その他の回答 (3)
- himajin100000
- ベストアンサー率54% (1660/3060)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> table,th,td{border-style:solid;} table{margin:auto;} /* marginやpaddingの関係でひょっとしたらうまくいかないかも。 そのときは50pxでもお好きなように */ tr{line-height:30px;} td{font-size:10px;width:200px;} img.pigeon{vertical-align:middle;} tr.fried td{text-align:center;} </style> <title>実験</title> </head> <body> <table> <caption>鳥一覧</caption> <thead> <tr><th>項目名</th><th>値</th></tr> </thead> <tbody> <tr><td>名前</td><td>種別</td></tr> <tr><td>キジ</td><td>鳥<img src="pheasant.png" alt="100 * 30の雉の画像 " /></td></tr> <tr><td>ハト</td><td>鳥<img src="pigeon.png" alt="100 * 30のハトの画像 " class="pigeon"/></td></tr> <tr class="fried"><td>焼き鳥</td><td>鳥<img src="fried.png" alt="100 * 30の焼き鳥の画像 " class="fried"/></td></tr> </tbody> </table> <!-- 言われていることが良く判らん。 画像のvertical-alignは初期値がmiddleではないようだが・・・そういう話ではないのか？ img要素にvalign属性はないんじゃないかな？ また、alt属性が必須なので注意 --> </body> </html>
お礼
vertical-align ではできませんでしたが、解決いたしました。 ありがとうございました。
- amigo8823
- ベストアンサー率100% (1/1)
表を使えばいかがでしょうか？ １行3列 下記で試してみてください。 *********************** <table><tr> <td> <TABLE border="1"> <TBODY> <TR> <TD><img src="/cat.gif"></TD> <TD>ＯＫ！ ＣＯＭＥ ＯＮ！</TD> <TD><img src="/cat.gif"></TD> </TR> </TBODY> </TABLE> </td> </tr></table> ****************************
- pasocom
- ベストアンサー率41% (3584/8637)
<img src="/cat.gif" valign="middle"> ではないでしょうか。
お礼
表現がしづらいのですが、「 凹 」みたいなかんじになってるので、 「 Ｈ 」のような感じにしたいと思ってます。 文字を中に浮かせるといいましょうか・・。 わかりにくいですが、よろしくお願いします。
補足
「 ｜＿｜ 」 となってるのを、「 ｜ー｜ 」ですね。すみません。
関連するQ&A
- 背景画像に任意の位置でテキストを配置する
CSSで背景画像を読み込み、に任意の位置でテキストを配置するには テーブルでとspace.gifを使ってやるしかないのでしょうか？ もっとスマートな方法はないんでしょうか？ CSS .ac1 { background-image: url(images/index_main01_02.jpg); width: 629px; height: 390px; } HTML <table class="ac1"> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr> <tr><td valign="top">これはテストですこれはテストですこれはテストです</td></tr> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr></table>
- ベストアンサー
- CSS
- 同じ<table align="center">を用いていますが、セルの中身の行揃えが代わってしまいます。
どちらも<table align="center">を用いています。 ですが、タグ１は特にセルの位置を指定せずとも、セルの中身が自動的に左詰めになりますが タグ２のセルの中身は、中央ぞろえになってしまいます。 タグ１のように、<table align="center">を用い、セルを左詰め指定（<align="left">）をせずとも なぜセルの中身が左詰めになるのか分かりません。。。 -------------タグ１------------- <table width="600" border="0" align="center" cellpadding="0" cellspacing="5"> <tr> <td width="10"><img src="img/concept_title.gif" width="10" height="30"></td> <td><img src="img/concept_title01.gif" alt="テキスト" width="127" height="16"></td> </tr> <tr> <td width="10"> </td> <td class="t01">テキスト</td> </tr> </table> ------------------------------ -------------タグ２------------- <table width="640" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="3" rowspan="2" valign="top"><img src="image/grade_line.gif" width="3" height="177" /></td> <td width="8" valign="bottom"><img src="image/grade_line30.gif" width="20" height="2" /></td> <td width="368"><img src="image/kisyo/01t.gif" width="368" height="32" /></td> <td align="left" valign="bottom"><img src="image/grade_line_right.gif" width="42" height="2" /></td> </tr> <tr> <td> </td> <td height="145" align="left">テキスト <td rowspan="2"><img src="image/kisyo/01_ph.jpg" alt="井戸" width="200" height="139" /></td> </tr> <tr> <td valign="top"><img src="image/grade_line_bottom02.gif" /></td> <td> </td> <td> </td> </tr> </table> ------------------------------ 初心者的な質問・タグで恐れ入りますが、ご助力頂けますと幸いです。 宜しくお願い致します。
- ベストアンサー
- HTML
- 縦方向の位置決め
何故か<td>の中の文字が上に寄っているんです。 こういう時、物の本によると、vertical-align属性とかvalign属性とかを使うそうです。 で、使ってみたんですけど、何も変わらないのは何故？ すみません。教えてください。 ***************************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <style type="text/css"> <!-- *{ font-size: 12px; font-weight: normal; } body { width: 476px; } img { float: left; } h1 {margin: 0px; } h2 {float: left; font-weight: bold; } .divTitle { border: 1px solid #999999; } .divTitle tr { vertical-align: middle; } .date {float: right; } --> </style> </head> <body> <table class=divTitle width="476" cellpadding="0" cellspacing="0"> <tr valign="middle"> <td> <img src="img/w_name.gif" width="80" height="23" alt="投稿者"> <h2>관리자</h2> <div class="date">(2009-04-26 13:47:39, Hit : 6, Vote : 0)</div> </td> </tr> <tr> <td height="24" valign="top"> <img src="img/w_subject.gif" width="80" height="23" alt="タイトル"> <h3>[re] 다시 문의요-</h3> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- 助けてください＞＜IE上で1pxのズレ
こんにちわ。 組んだテーブルに謎の１ｐｘがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします＞＜ <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>
- 締切済み
- HTML
- 画像の高さと文字位置
方法として思いつかないため、良いアイディアか方法があればご教授ください。ブラウザや環境により見え方がまちまちなのも承知の上です。 現在以下のような感じに文字と画像を組んでいるのですが、 <table> <tr><td valign="middle"><img src="**.gif" width="10" height="10"></td> <td valign="middle">てきすとてきすとてきすとてきすとてきすとてきすと</td> </tr></table> てきすとが２行になった時も画像が当然ながら高さの中央に配置されるため不自然になっています。できれば２行目が存在することになっても画像の高さをテキスト１行分の中央におきたいのですが何か方法ありませんでしょうか。 スタイルシート記述でもタグでも構いません。
- ベストアンサー
- HTML
- オブジェクトを指定してください、のエラーについて
HTML作業中、下記のようなエラーメッセージが表示されます。 エラー：オブジェクトを指定してください。 文字：3 コード：0 恐らく↓この辺りでエラーが起きているのだとは思うのですが… どなたか分かる方はいらっしゃいますでしょうか？それと、 ライン：200 ↑この数値は、ソースを表示させたときの行数でいいのでしょうか？ メモ帳で開くと「行へ移動」ができなかったもので… 他にエラー場所を知る方法があれば教えてください。 <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align="right"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','img/click2.gif',1)"><img src="img/click1.gif" alt="クリック！" name="Image46" width="64" height="49" border="0"></a></td> <td colspan="2" align="right"><img src="img/suga-3.gif"></td> </tr> </table> <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="12" colspan="4"><img src="img/ue.gif" width="179" height="12"></td> </tr> <tr> <td width="14" height="124" background="img/hidari.gif"><img src="img/hidari.gif" width="14" height="7"></td> <td width="146" background="img/back.gif"><table width="145" height="110" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="img/main1.gif" width="70" height="102" hspace="2"></td> <td valign="top" class="text12">画像</td> </tr> </table> <img src="img/botan.gif" width="146" height="17"></td> <td width="19" background="img/migi.gif"> </td> </tr> <tr> <td height="12" colspan="4"><img src="img/sita.gif"></td> </tr></table>
- 締切済み
- HTML
- HTML：：テーブルのセルスペーシング、セルパディングについて
テーブルについてお聞きします。どうか助けてください。 以下のようなソースがあります。 <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#DED6BF"> <tr> <td><table width="600" border="0" cellpadding="3" cellspacing="1" bgcolor="#DED6BF"> <tr> <td width="150" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話開始時間</strong></font><img src="image/spacer.gif" width="136" height="1"></td> <td width="150" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話終了時間</strong></font><img src="image/spacer.gif" width="136" height="1"></td> <td width="100" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話先</strong></font><img src="image/spacer.gif" width="86" height="1"></td> <td width="100" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>通話時間</strong></font><img src="image/spacer.gif" width="86" height="1"></td> <td width="100" valign="top" bgcolor="#F7F7F7"><font size="2"><strong>料金</strong></font><img src="image/spacer.gif" width="86" height="1"></td> </tr> </table></td> </tr> </table> 一番左のセル（通話開始時間）の幅は150で、そのセルに透明gifをいれて、テーブルがくずれないようにしています。その透明gifの長さは"136"です。 なぜ透明gifの長さは136なのでしょうか？14を引く理由がわかりません。 テーブルのcellpadding="3"とcellspacing="1"なので透明gifの長さは"143"なのではないでしょうか？
- 締切済み
- HTML
- tableがずれる理由がわかりません
上のテーブルはずれないのですが 同じレイアウトの下のテーブルはずれます。 widthの指定がききません。 なぜでしょう？？ 前からこの現象はしていたのですが理由が知りたいです。 <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> </tr> </table> <br /> <br /> <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> </table>
- ベストアンサー
- その他([技術者向] コンピューター)
- imgタグについて
imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2～ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか？ もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>
- ベストアンサー
- HTML
- DIVで同一ページ内にポップアップってできる？？
普通ポップアップをするときには別ウィンドウを立ち上げますが、DIVを使ってリンク元があるhtmlに別のhtmlを立ち上げることは可能でしょうか？？ 画像のポップアップを同一ページに立ち上げるポップアップは既に手元にあります。 それを立ち上げるのを画像ではなくhtmlにしたいんです。 ----ソース---- 【HTML】 <div id="pWindow" style="position:absolute; visibility:hidden; width:100%; height:100%;"> <table style="width:100%; height:100%;" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center" valign="middle"> <table style=" background-color:#FFF; border:1px solid #000;" border="0" cellspacing="15" cellpadding="0"> <tr><td align="center" valign="middle"> <img src="img/loading.gif" width="400" height="300" id="lPhoto"> </td></tr> <tr><td align="center" valign="middle"> <a href="javascript:cls()"><img src="img/close.gif" width="53" height="17" border="0"></a> </td></tr> </table> </td></tr> </table> </div> 【JavaScript】 //拡大画像を表示する function pwinOpen(imgSrc){ var lgPhoto=document.getElementById('lPhoto'); lgPhoto.src = imgSrc; var pWin=document.getElementById('pWindow'); pWin.style.visibility = 'visible'; } //拡大画像を閉じる function cls(){ var pWin=document.getElementById('pWindow'); pWin.style.visibility = 'hidden'; var lgPhoto=document.getElementById('lPhoto'); lgPhoto.src = "img/loading.gif"; } 分かる方、お忙しいところ申し訳ないんですがご教授ください！！
- ベストアンサー
- JavaScript
お礼
テーブルの背景画の関係で、できればこれを使わずにと思っています。 説明不足でした、申し訳ありません。
補足
何度もすみません。スタイルの間違えで、ご支持の通り変更したところ問題なくできました。 ありがとうございました。