- ベストアンサー
Googleのイメージ検索のように画像と文字をくっつけて表示したい
Googleのイメージ検索のように、画像の下に任意の文字を表示させ、 ウィンドウの大きさを変えても画像とくっついて動く記述をしたいのですが、 記述方法や参考になるサイトなどありましたら教えていただけますでしょうか。 また可能であれば、Microsoft FrontPage 2003やExpression Webで同様の機能があるとしたら、 機能の名前を教えていただけますでしょうか。 よろしくお願いいたします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ちょっとよくわからないのですが、tableタグじゃダメなんですか？
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML4.01Strict+CSSでのサンプルだよ。 なお、Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )とW3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/validator.html#validate_by_input )、W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/validator.html#validate-by-input )でチェックすみ。 とても、簡単なソースです。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"> <!-- p{ text-indent: 1em;} body>h1,body>h2{ text-align:center;} p.abstract{ margin-left: 20%; margin-right: 20%;} div.ImageList{ position: relative; margin-left:20%;margin-right:10%;width: auto; border: solid 2px blue;} div.ImageList ol{ display:block; margin:0px; padding:0px;} div.ImageList>ol>li{display: block; margin: 2px;padding:0px;border:solid 1px gray; width:160px;height: 100px;float:left;text-align:center;} div.ImageList>ol>li>ol>li{display:block;font-size:0.8em;text-align:left;padding:0.2em;text-indent:1em;} div.ImageList hr{ clear:both;visibility:hidden;} div.ImageList div{ position: absolute; width: 21%; left: -23%;top: 0px;font-size:0.9em} --> </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を使うという簡単な発想が沸いてきませんでした。 いただいた記述を使ってみます。
- eg_nn
- ベストアンサー率81% (27/33)
テーブルで表を組めばいいと思います。 Googleもテーブルでやっていますね。 HTMLの知識はどれくらいおありでしょうか？ タグ打ちができるなら、以下のようにやってみてはどうでしょう。 ※CSSの記述方法をご存じない場合の記述です <table width="100%" cellspacing="0" cellpadding="0" border="0"> <!--line1--> <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> <!--/line1--> <!--line2--> <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> <!--/line2--> </table> ※<table>～</table>までをソースコードの表を挿入した部分に入れてください。 行を増やしたい場合は<!--line-->～<!--/line-->をコピー＆ペーストしてください。 Microsoft FrontPageの機能ですと「表」という挿入メニューがあると思います。 表のプロパティで様々な設定ができるので、HTML初心者でしたらそちらでやったほうが簡単かもしれません。 テーブルタグについては、TAG index様のテーブルタグをご覧頂くと理解しやすいと思います。 HTMLタグ/テーブルタグ - TAG index http://www.tagindex.com/html_tag/table/
補足
ご回答ありがとうございます。 普段はエディタとファイルメーカー任せでパズルを組むようにサイトを作ってますので（言い訳になりませんですが）、 tableを使うという簡単な発想が沸いてきませんでした。 いただいた記述を使ってみます。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
補足
ご回答ありがとうございます。 普段はエディタとファイルメーカー任せなので（言い訳になりませんですが）、 tableを使うという発想が沸いてきませんでした。 もうちょっと勉強してみます。