画像、文字などを並べて表示する方法がわかりません、、、。
どのようなタグにするのか教えてください、、、。
お願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

文字を並べるのに、支障はないと思います。


写真の横に文字を並べたいのではありませんか?
位置関係をきちんとレイアウトしたいなら、テーブルで囲んで、右に写真、左に文字…とするのが良いと思います。
#1の方が書かれている
<TR>
<TD>こんにちは</TD>
<TD>さようなら</TD>
</TR>
で、<TR>は、テーブルの縦列を表します。<TD>は、横列の区切りです。ここで、「こんにちは」のところに、
<img src="○○.jpg">などと、画像挿入のタグを書き込めば、画像が入ります。そして、右が文章になるわけですね。画像の大きさを指定しなければ、その画像のピクセル数の枠の大きさになり、右の文字枠も、その高さになります。

テーブルを使わずに、画像の脇に文字を回り込ませたいなら、
<img src="rim00001.jpg" align="left">
align="leftで、画像が左により、右スペースに文字が入ります。
<img src="rim00002.jpg" align="right>
align="rightで、画像が右により、文字が左に入ります。
この両方を同じ行に書けば、両端に画像が入って、真ん中に文書が入ります。
    • good
    • 0

具体的にどうしたいのかわかりませんとお答えできないので、もっと詳しく教えてください。

文字と画像をどう並べたいのですか?

・文字と画像を横に並べたい。
・画像を左側(あるいは右側)に寄せ、文字を流し込みたい。
・TABLEタグを使って綺麗にレイアウトしたい。

などなど・・・。
    • good
    • 0

TABLEを使って、border属性をゼロにすると、それらしく見えますよ。


たとえば
<TABLE border="0">
<TR>
<TD>こんにちは</TD>
<TD>さようなら</TD>
</TR>
</TABLE>
と言うようなソースでしたら、
こんにちは さようなら
と、横に並んで出力されるはずです。
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QIE6でaタグのvisitedより、aタグ内のクラスに指定した文字色を優先する方法について

CSSで一箇所分からない所がございましたので、ご教示いただける方がいらっしゃいましたら、よろしくお願いします。

【やりたいこと】
1. ページ内の特定の箇所(下記のソースでは「1」の文字)のリンクのみ文字色(aタグの「未訪問」、「訪問済み」、「訪問中」、「マウスがリンクに乗っている」をすべて同一にしたい)を変えたいと思います(他の大半のリンク色は特定の色が指定されています)。

【状況】
下記のソースをコピペしたhtmlをIE6で立ち上げ、「1」の文字をクリックすると「1」の文字が緑色に変わりました。
多分a:visitedが効いているのだと思います。
一方Firefox2で同じ動作をした所、「1」の文字色は赤色となります。
これはaタグ内のクラスの指定が優先されているのだと思います。
なおIE7はFirefox2と同様の動作となりました。
ちなみに私はこの部分を赤色にするつもりで記述しておりますので、Firefox2とIE7は意図したとおりの動作となり、IE6は意図していない動作となります。

こちらで検証した所、該当箇所のクラスをインラインスタイルシートで記述しなおせばIE6でも赤色で表示されたのですが、「デザインを一元管理したい」「変更箇所が多い」などの関係上、インラインスタイルシートではなく、クラスで記述したいと思います。
↓IE6では緑色(Firefox2, IE7では赤色)になります(NG)。
<a class="fontcolor" href="index.html">1</a>
↓IE6,Firefox2, IE7で赤色になります(OK)。
<a style="color:#FF0000" href="index.html">1</a>

【ソースコード(index.html)】
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>sample</title>
<style type="text/css">
<!--
.wrapper a {
color:blue;
}
.wrapper a:visited {
color:green;
}
.wrapper a:hover {
color:yellow;
}
.wrapper a.fontcolor {
color:red;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<!-- 略 -->
<a class="fontcolor" href="index.html">1</a>
<a href="index.html">2</a></div>
<!-- 略 -->
</body>
</html>


なお<div class="wrapper">内には(省略しておりますが)多数のリンクがある関係上、下記の条件を満たしている方法をご存知の方がいらっしゃいましたら、ご教示いただければと思います。
1. wrapperのaタグのスタイルシートの記述はそのままでお願いします
(ここですべてのリンクの文字色を一括制御し、特定の箇所のリンク色のみ変えるという記述をしている関係上、ここを変更すると多数の記述を修正しないといけなくなると思う為です)。
2. インラインスタイルシートで記述すると、デザインを一元管理できなくなるなどの関係上、クラスで対応したい(一箇所の修正ですべてのページを反映させたい)とおもいます。

以上、よろしくお願いします。

CSSで一箇所分からない所がございましたので、ご教示いただける方がいらっしゃいましたら、よろしくお願いします。

【やりたいこと】
1. ページ内の特定の箇所(下記のソースでは「1」の文字)のリンクのみ文字色(aタグの「未訪問」、「訪問済み」、「訪問中」、「マウスがリンクに乗っている」をすべて同一にしたい)を変えたいと思います(他の大半のリンク色は特定の色が指定されています)。

【状況】
下記のソースをコピペしたhtmlをIE6で立ち上げ、「1」の文字をクリックすると「1」の文字が緑色に変わり...続きを読む

Aベストアンサー

IE6で試してないんですが…、これでどうでしょう?

----------------------------------------------------
.wrapper a.fontcolor {
color:red;
}
----------------------------------------------------

----------------------------------------------------
.wrapper a.fontcolor, .wrapper a.fontcolor:visited {
color:red;
}
----------------------------------------------------

Q画像を複数横に並べ、かつそれぞれの画像の下に文字を表示する

はじめまして!!質問のとおりです。

画像を横に複数表示しつつ、さらにそれぞれの画像の下に文字を表示(それそれの画像の横幅の範囲内に)するには、どうすればいいのでしょうか??

回答よろしくお願いしますm(_ _)m

Aベストアンサー

TABLEタグで横並びの1画像ずつ区切ってみてはいかがでしょう?
最小の画像横幅より狭くTD の幅指定をして画像の下に回り込みで
テキストを入れる形を取りborder=0に指定すれば罫線は表示されません。

http://www.geocities.co.jp/SiliconValley-Bay/7770/file/hf.html
http://www.tagindex.com/hp_guide/menu/02.html

QIPなどを表示するタグ

サイトにアクセスした人の自分のIPやUAが表示されて確認できるタグを教えてください。
確認君や診断君のようなものです。

Aベストアンサー

ユーザーエージェントは、
<script language="JavaScript">
<!--
document.write("UA:"+navigator.userAgent);
//-->
</script>
でいいかも

Q画像を表示するための一番適切なタグは何?

(例)
<div id="TOP">空</div>

<div id="MID">たくさんのコンテンツ</div>

<div id="BTM">空</div>

#TOPは背景画像の一番上

#MIDは真ん中の画像をリピートさせる

#BTMは背景画像の一番下

このような組み合わせでページを作成したいことがあります。
例えばこのOKWaveの質問欄の灰色の部分です。(PC版)

記載したコードではdivタグを使用していますが

divタグは要素のグループ化に用いるものなので向いていないと思います。

pタグは1つの段落を示すのでそれも不向きかなと・・・

そんなこんな考えていたら意味のない装飾のためだけの画像を入れるのに向いているタグってないんじゃないかな?って思えてきました。

皆さまのご意見をお聞かせ下さい。

Aベストアンサー

>そんなこんな考えていたら意味のない装飾のためだけの画像を入れるのに向いているタグってないんじゃないかな?って思えてきました。
 わかってらっしゃる。
 HTMLは、文書構造だけ記述し、それをスタイルシートでプレゼンテーションする。これがウェブページの「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」という大原則です。
 DIVはデザインのためではなく文書構造をマークアップするために用意されています。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
 そして、HTML5では文書構造を示す要素が追加されたためDIVは、原則として使えなくなります。
「NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )」

 ページに3つの背景の異なるブロックがあるという事は、3つの異なる文書構造上のブロックがあるという事ですから
HTML4.01でしたら
<body>
 <div class="header">
  文書のヘッダ
 </div>
 <div class="section">
  本文
 </div>
 <div class="footer">
  文書のフッタ
 </div>
</body>
とマークアップされてきたはずです。
HTML5では、divを使わなくても、文書構造をあらわせますので
<body>
 <header>
  文書のヘッダ
 </header>
 <section>
  本文
 </section>
 <footer>
  文書のフッタ
 </footer>
</body>
とあらわせるので楽になります。もっと複雑な場合は
<body>
 <header>
  文書のヘッダ
  <nav>ナビゲーション</nav>
 </header>
 <section>
  本文
  <section>
   階層ひとつ下
  </section>
  <section>
   階層ひとつ下
   <article>
    <header></header>
    <section></section>
    <footer></footer>
   </article>
  </section>
  <aside>
   本文と関係ない記事
  </aside>
 </section>
 <footer>
  文書のフッタ
 </footer>
</body>
となります。
 HTML4.01の場合はclass名で!!。headerもsectionも何度も登場する可能性があるのでidじゃまずい。

 文字通り、背景だけでコンテンツがひとつしかなければ
<html>
 <body>
  <h1>見出し</h1>
  <p>・・・</p>
 </body>
</html>
は最低限あるはずですから
html,bodY{margin:0;padding:0;width:100%;height:100%;position:relative;}
html{background:url(./images/background/underGreen.gif) repeat-x 0 top;padding-top:100px;}
body{background:url(./images/background/gradiation.gif) 0 bottom repeat-x;padding-bottom:39px;}
underGreen.gifは高さ10px;
gradiation.gifは高さ39px;

とか・・

>そんなこんな考えていたら意味のない装飾のためだけの画像を入れるのに向いているタグってないんじゃないかな?って思えてきました。
 わかってらっしゃる。
 HTMLは、文書構造だけ記述し、それをスタイルシートでプレゼンテーションする。これがウェブページの「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」という大原則です。
 DIVはデザインのためではなく文書構造をマークアップするために用意されています。
『DIV要素とSPAN要...続きを読む

Qtableタグ内で、空白セルでも罫線を表示させられるためのタグは

次のように、1行×5列のテーブルがあります。

<html><body>
<table border="1">
<tr>
<td>1</td>
<td></td>
<td> </td>
<td> </td>
<td></td>
</tr>
</table>
</body></html>


1列目:文字列 1
2列目:未記入
3列目:半角スペース
4列目:全角スペース
5列目:文字実体参照の

2列目と3列目だけ、罫線が表示されないですが(セルがつぶれてみえる)
わざわざとかで<td>と</td>の間を埋めなくても、
罫線を明示的に表示させられるタグがあったと思いましたが、何だったでしょうか。

Aベストアンサー

タグではないが、対応してれば希望の形になるでしょう。

CSS2リファレンス 空セルのボーダーと背景を制御
http://hp.vector.co.jp/authors/VA022006/css/tables.html?jouyou_l#empty-cells
CSS2リファレンス 付録:empty-cellsプロパティ対応状況
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/tables.html?jouyou_l#empty-cells


余談
HTML4.01邦訳 空白類
http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/struct/text.html#h-9.1


人気Q&Aランキング

おすすめ情報