Googleのイメージ検索のように画像と文字をくっつけて表示したい

解決済

質問者：ggenelove
質問日時：2008/12/19 15:27
回答数：3件

Googleのイメージ検索のように、画像の下に任意の文字を表示させ、
ウィンドウの大きさを変えても画像とくっついて動く記述をしたいのですが、
記述方法や参考になるサイトなどありましたら教えていただけますでしょうか。

また可能であれば、Microsoft FrontPage 2003やExpression Webで同様の機能があるとしたら、
機能の名前を教えていただけますでしょうか。
よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： adcha128
回答日時：2008/12/19 16:42

ちょっとよくわからないのですが、tableタグじゃダメなんですか？

この回答への補足

ご回答ありがとうございます。
普段はエディタとファイルメーカー任せなので（言い訳になりませんですが）、
tableを使うという発想が沸いてきませんでした。
もうちょっと勉強してみます。

補足日時：2009/01/07 09:19

通報する

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2008/12/19 19:11

HTML4.01Strict+CSSでのサンプルだよ。

なお、Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )とW3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/validator.htm … )、W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/validator.htm … )でチェックすみ。

　とても、簡単なソースです。CSSの記述方法はサンプルを元に調べること。
　ここではスペース的に記述しきらない。

★tableと異なり、ウィンドウの幅に依存しない。

★CSS部分を削除すると、シンプルなHTMLとして表示され、携帯電話やテキストブラウザや読み上げソフトにも対応、SEOも当然OK

※概略説明は下記HTMLを表示してみること。

以下＿＿＿＿＿＿＿HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>画像を含むリストの表示</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">

</style>
</head>
<body>
<h1>画像を含むリストの表示</h1>
<h2>画像リストのfloatでの配置</h2>
<p class="abstract">画像を含むリストを説明つきで枠内に表示するには、floatを使う</p>
<div class="ImageList">
<ol>
<li>gooアイコン
<ol>
<li><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" alt="gooアイコン" width="71" height="37"></li>
<li>gooのサイトで・・</li>
</ol>
</li>
<li>goo辞書
<ol>
<li><img src="http://cmm001.goo.ne.jp/img/sn/sn_31.gif" width="64" height="24" alt="goo辞書"></li>
<li>goo辞書のアイコン</li>
</ol>
</li>
<li>教えてgoo
<ol>
<li>
<img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" width="139" height="24" alt="教えてgooアイコン">
</li>
<li>教えてgooで使用される。</li>
</ol>
</li>
<li>gooアイコン
<ol>
<li><img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" alt="gooアイコン" width="71" height="37"></li>
<li>gooのサイトで・・</li>
</ol>
</li>
<li>goo辞書
<ol>
<li><img src="http://cmm001.goo.ne.jp/img/sn/sn_31.gif" width="64" height="24" alt="goo辞書"></li>
<li>goo辞書のアイコン</li>
</ol>
</li>
<li>教えてgoo
<ol>
<li>
<img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" width="139" height="24" alt="教えてgooアイコン">
</li>
<li>教えてgooで使用される。</li>
</ol>
</li>
</ol>
<hr>
<h2>ウィンドウ幅が異なっても・・</h2>
<p>
ウィンドウ幅が異なっても、「画像とその説明」ごとに移動して配置される。ここではその内部での細かい配置は指定してない。
</p>

<div class="memo">
<ol>
<li>リストを入れ子にするなどして画像と説明を一つのブロック要素に入れておく</li>
<li>そのリスト全体をブロック要素に入れる</li>
<li>一項目ごとにブロックにしてfloatさせる。</li>
<li><strong><hr>等でfloatを解除すること</strong></li>
</ol>
</div>
</div>
</body>
</html>

この回答への補足

ご回答ありがとうございます。
普段はエディタとファイルメーカー任せでパズルを組むようにサイトを作ってますので（言い訳になりませんですが）、
tableを使うという簡単な発想が沸いてきませんでした。
いただいた記述を使ってみます。

補足日時：2009/01/07 09:25

通報する

- 0
- 件

通報する

No.2

回答者： eg_nn
回答日時：2008/12/19 19:00

テーブルで表を組めばいいと思います。

Googleもテーブルでやっていますね。

HTMLの知識はどれくらいおありでしょうか？
タグ打ちができるなら、以下のようにやってみてはどうでしょう。
※CSSの記述方法をご存じない場合の記述です

<table width="100%" cellspacing="0" cellpadding="0" border="0">

<tr>
<td width="16%" valign="bottom" align="center" style="padding-top: 0px;">画像1</td>
<td width="16%" valign="bottom" align="center" style="padding-top: 0px;">画像2</td>
<td width="16%" valign="bottom" align="center" style="padding-top: 0px;">画像3</td>
<td width="16%" valign="bottom" align="center" style="padding-top: 0px;">画像4</td>
</tr>
<tr>
<td width="16%" valign="top" align="center">テキスト1</td>
<td width="16%" valign="top" align="center">テキスト2</td>
<td width="16%" valign="top" align="center">テキスト3</td>
<td width="16%" valign="top" align="center">テキスト4</td>
</tr>


<tr>
<td width="16%" valign="bottom" align="center" style="padding-top: 0px;">画像5</td>
<td width="16%" valign="bottom" align="center" style="padding-top: 0px;">画像6</td>
<td width="16%" valign="bottom" align="center" style="padding-top: 0px;">画像7</td>
<td width="16%" valign="bottom" align="center" style="padding-top: 0px;">画像8</td>
</tr>
<tr>
<td width="16%" valign="top" align="center">テキスト5</td>
<td width="16%" valign="top" align="center">テキスト6</td>
<td width="16%" valign="top" align="center">テキスト7</td>
<td width="16%" valign="top" align="center">テキスト8</td>
</tr>

</table>

※<table>～</table>までをソースコードの表を挿入した部分に入れてください。
行を増やしたい場合は～をコピー＆ペーストしてください。

Microsoft FrontPageの機能ですと「表」という挿入メニューがあると思います。
表のプロパティで様々な設定ができるので、HTML初心者でしたらそちらでやったほうが簡単かもしれません。

テーブルタグについては、TAG index様のテーブルタグをご覧頂くと理解しやすいと思います。
HTMLタグ/テーブルタグ - TAG index
http://www.tagindex.com/html_tag/table/