- ベストアンサー
html言語で、画像とテキストを並べる場合
以下のようにテキストと画像を並べたい場合、ソースの記述はどのようにしたら良いでしょうか?どうも、HP作成のアプリケーションソフト(FrontPageExpress、マイクロソフトワードなど)では上手くいかなくて、タグ手打ちにしてやるう!と喚いているのですが。 ---text--- ■■■■■■■■ ---------- ■ ■ ■ 画像 ■ ■ ■ ■ ■ ■■■■■■■■ 両端に余白を持たせたくもあります。ソースを<blockquote></blockquote>で囲めばOK? 逆に、 ■■■■■■■■ ■ ■ ■ 画像 ■ ■ ■ ---text--- ■ ■ -------- ■■■■■■■■ と表示したい場合(下を揃える)、どう記述すればいいでしょうか? なるべく簡潔なタグになるようお願いします。 あと、FrontPageExpressはタグ手打ち入力は、出来ないんでしょうか…。
- unknown-2
- お礼率72% (324/449)
- HTML
- 回答数5
- ありがとう数5
- みんなの回答 (5)
- 専門家の回答
質問者が選んだベストアンサー
>文章|文 章 >になってしまいました! >二つ目のセル?が、どうも幅が狭いらしい… ならば、 <TABLE border="0" width="500" height="100"> <TBODY> <TR> <TD width="200">あああ</TD> <TD width="300">かかか</TD> </TR> </TBODY> </TABLE> <TABLE border="0" width="500" height="100"> →width="500"がテーブル全体の幅 <TD width="200">あああ</TD> →左のセル <TD width="300">かかか</TD> →右のセル なお、半角の英数字を使用した場合は 幅が指定した値より広がることがあります。
その他の回答 (4)
- ebis
- ベストアンサー率27% (17/61)
もう答えはでているようですが、余白を作る別の方法として。 <TABLE border=0> <TR> <TD width="50"> <TD> <table border=0> <tr><td> 文章・・・・ <td> <img src="画像ファイル"> </table> </TABLE> とか <TABLE border=0> <TR> <TD width="20%"> <TD width="60%"> <table border=0> <tr> <td> 文章・・・・ <td> <img src="画像ファイル"> </table> </TABLE> と記述する方法もあります。参考までにどうぞ。 (省略可能タグは省いてます)
お礼
いや!未だ出ておりません答え! さっきから必死に、行ったり来りを繰り返して 「うう…歪んだ!歪んだヨ~!!なぜ?なぜなのッッ!?」 とか叫んでます。 タグの記号の意味を今一つ理解していないので、ひたすら試行錯誤の繰り返しでございます。
- onimotsu
- ベストアンサー率36% (279/758)
補足ありがとうございます。 テーブルの外の余白ですね。 考え方がいろいろあるのですが、 テーブルの外の余白を設定するには スタイルシートを使用すれば良いと思います。 例えばこんな感じで。 <TABLE style="margin-top : 10px;margin-left : 10px;margin-right : 10px;margin-bottom : 10px;"> テーブルを中央に持ってくるには ( <CENTER> を使います) <CENTER> <TABLE style="margin-top : 10px;margin-left : 10px;margin-right : 10px;margin-bottom : 10px;"> </CENTER> >右端の線を基準に並べたいのですが ( <TD align="right"> を使います) <CENTER> <TABLE width="241" height="115" style="margin-top : 10px;margin-left : 10px;margin-right : 10px;margin-bottom : 10px;"> <TBODY> <TR> <TD>111111111</TD> <TD align="right"><IMG src="***.JPG" width="140" height="105" border="0"></TD> </TR> </TBODY> </TABLE> </CENTER> </BODY>
お礼
ぎゃー!ご呈示いただいたソースをコピー&ペーストしたら… 文章|文 章 になってしまいました! 二つ目のセル?が、どうも幅が狭いらしい…
- onimotsu
- ベストアンサー率36% (279/758)
上揃えの場合 <TABLE width="400" height="200"> <TBODY> <TR> <TD valign="top">11111111111111111</TD> <TD valign="middle"><IMG src="***.JPG" width="140" height="105" border="0"></TD> </TR> </TBODY> </TABLE> 下揃えの場合 <TABLE width="400" height="200"> <TBODY> <TR> <TD valign="bottom">11111111111111111</TD> <TD valign="middle"><IMG src="***.JPG" width="140" height="105" border="0"></TD> </TR> </TBODY> </TABLE> </BODY> border="0"で枠線消去です。 >両端に余白を持たせたくもあります。 どこの両端?でしょうか。 >FrontPageExpressはタグ手打ち入力は、出来ないんでしょうか…。 あまり使ったことがありませんがそのようですね。
お礼
>どこの両端?でしょうか。 テキストと、画像の、さらに両端です。 ■■テキスト 画像■■ ↑■で表示した領域です。一定の幅以内で収めたいのです。 >あまり使ったことがありませんが 私も初めて使ってます・・・ワードの使い勝手の悪さに「少しはましだろうか」と思ってこちらを使用したのですが・・・もしかしてワードの方がまだましだった?
- master-3rd
- ベストアンサー率35% (582/1641)
そのままだと面倒なので、整理しやすいように枠でくくってみてはどうでしょう。 枠を非表示にして、文字列が中央の場合 <TABLE> <TBODY> <TR> <TD>---------------------------<BR> -------------TEXT----------<BR> ---------------------------</TD> <TD><IMG src="/pict.gif"></TD> </TR> </TBODY> </TABLE> で。 文字列が上の場合 <TD valign="top">---------------------------<BR> に入れ替え。 文字列が下の場合 <TD valign="bottom">---------------------------<BR> で変更可能です。
お礼
えーと、つまり ーーーーーーーーーーー |テキスト | 画像| ーーーーーーーーーーー という表を作れ、ということですか? そしてその表のグリッド線を非表示に?
補足
それと、画像は画面右端に並べたいのです。 テーブルを使用すると、画面の大きさによって、いつも右端に来る、とは限らなくなってしまうでしょう? 画像が後から増える可能性もあるので、 ■■■画像1■ ■画像2■ ■■画像3■ という具合に右端の線を基準に並べたいのですが(・・・表示で歪まずでてくれるだろうか)。 ・・あ、歪んだ。なんで歪むのか・・・
関連するQ&A
- Dreamweaberでの背景画像固定について
よくこちらにも質問にあがってる「背景画像」の固定ですが、回答を拝見していると、手打ちタグでの回答ばかりですよね? 同じタグをDreamweaberで手打ち挿入してみましたが、背景固定は出来ませんでした。 (右下・左上等全部やってみましたが、どれも出来ませんでした) 画面をスクロールすると文字と一緒に画像も動いてしまいます。 手打ち挿入でなく、Dreamweaberのソフト上では出来ないものなのでしょうか? 詳しい方いらっしゃいましたら回答お願いいたします。 こちらの環境はi Mac/OS.9.2.2です。
- ベストアンサー
- HTML
- HTMLのテーブルに画像を挿入
IE6、タグは手打ちでHPを作成しています。 テーブルと画像について質問させていただきます。 <table width="180" border="0" cellspacing="0"> このようなソースのテーブルがあったとします。 その中に画像を入れるとします。 width="180" よりも大きな画像の場合、セルが 大きく広がってしまいます。 画像のサイズは変更できないので、セルの大きさに 合わせて画像を表示させたいのですが、その際の ソースを教えていただけないでしょうか? "画像サイズは変更不可"を前提にお願い致します。 また足りない情報がありましたら補足させて いただきますので、どうぞよろしくお願いします。
- ベストアンサー
- HTML
- 画像サイズに合わせてHTMLソースを修正
簡単なWebページ作成に、HTMLを主に手打ちで書いています。 いろんなサイズの画像を多く使うので、ソースを書くときは大ざっぱなサイズを記入しておいて、あとでまとめて正確なwidthとheightを入れたいと思います。 会社にAdobeのGolive5というソフトがあるんですが、画像の実サイズとソース記述が異なるものをレイアウトで選択してボタンを押すと、ソース修正できます。 このような機能のアプリを家庭用として使いたいのですが、Goliveはやや高価だと聞きましたので、も少し求めやすいアプリはありますでしょうか? WindowsXPを使っています。
- 締切済み
- その他(業務ソフトウェア)
- 自分の作ったソースが間違ってるかどうか調べるソフト
Firefoxの「ソースを見る」という機能で 自分の作ったソースが間違ってるかどうか調べられますが そのような機能のフリーソフトはありますか? タグは手打ちで作っていますが 生成されたタグにミスがないからをソフトで調べたいのですが その様なソフトはありますか?
- ベストアンサー
- フリーウェア・フリーソフト
- JPG画像の切り抜き
JPGファイルを画像の形通りに切り抜くことができるフリーソフトってありますか? マイクロソフトピクチャーマネージャー等で切り抜くと四角でしか切り抜くことができず余白部分が邪魔だと感じています。
- 締切済み
- フリーウェア・フリーソフト
- タグで数値の場合は""で囲む必要が無いのでしょうか?
タグで数値の場合は""で囲む必要が無いのでしょうか? 最近手打ちのソースを見て、どっちが正しいか疑問に思いました。 <table cellspacing="0" <table cellspacing=0 このようにHTMLの決まりごとは、どこを見ればよいのでしょうか? 上のような、細かいことは書かれているのでしょうか?
- ベストアンサー
- HTML
- 画像の位置を指定するCSS
画像の位置を指定するCSS 文字の前にポイント画像を<img src="~.gif" alt="" />のタグで置きたいんですが、ずれて文字の上のほうに表示されてしまいます。 すごく簡単に文字の中央に表示されるように指定できるCSSのタグがありますがどんな記述だったか忘れました。 検索しても出てこないので困ってます。 どなたか教えてください。 ちなみに background: url(hogehoge.gif) no-repeat 10px 0.5em;list-style: none;} これではないです。 もっと簡単でtext-alignのようなかんじの記述です。でもtext-alignではないです。 middleみたいな記述があった記憶があるのですが確かかどうか自信ないです。
- ベストアンサー
- HTML
- 画像と文字を中心に表示するには…?
いつもお世話になっています。 最近よく思うのですが「画像」と同じ行に文字を書くと文字が下詰めに配置されてしまうのですがこれを上下の余白均等にすることはできないでしょうか? <<現在>> ■■■■■■ ■■画像■■ ■■■■■■ 「文字を書くとこのように…」 ↓ <<希望>> ■■■■■■ ■■画像■■ 「文字がこの位置に配置したいです」 ■■■■■■ 今はタグで <img src="画像">文章~ という形で記述していますがもし修正できるようでしたらタグの方を教えていただければ助かります。 宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- 画像の下の余白
下記のソースの場合、画像の下に余白が出来てしまうのですが、どうすれば画像の下と『<div class=bar>画像</div>』の上の余白を削除してくっ付けるられるのでしょうか? 【index.html】 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=shift_jis"> <title>例題</title> <link rel="stylesheet" type="text/css" href="design.css" media="all"> </head> <body> <img src="gazou.jpg" class="name" width="1024" height="768"> <div class="bar">画像</div> </body> </html> 【design.css】 .bar{ background-color: #ff0000; }
- ベストアンサー
- HTML
- オンマウスで画像変更(CSS)
リンク画像にカーソルを乗せると画像が変わる、というものをやりたいのです。 シンプルに記述できる分JavaScriptよりもCSSの方がいいのかなと思ったのですが、 CSSだとimgタグではなくbackgroundを入れ替える形になり、 そうするとaタグでテキストを使い、そのテキストを隠さなければいけません。 display:none;やtext-indent:-9999px;は使いたくないのですが、 他の方法はありますか? また、こういうオンマウスで画像変更ってJavaScriptとCSSどちらが主流なのでしょうか? よろしくお願いします。
- 締切済み
- CSS
お礼
何度も有り難うございました。 やっつけ仕事ながらどうにかこうにか、ええもう。 ひとまずは質問を締め切りますが、また何か判らないことがあったら厄介になりたいと思います。