- 締切済み
画像+説明を追加した時に自動で下に移動
「画像<br>説明<br>(新着の物に関しては)新着マーク」 を１つのセルに入れて横４セルの表を作っています。 これがたまに増えていくのですが、新しいものを左上に置き古いものをどんどん右もしくは下に落としていくのを手動で(1つ１つコピペで)やっています。 これをCSSやJavaスクリプトなどで自動で下に押しやる事は出来ないでしょうか? それともCGIやphpでないと無理でしょうか? 何か方法があれば教えてください。
- master-3rd
- お礼率39% (524/1325)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そんな、本来表でないものを表にするから無理が来る。 表は、二次元以上のデータを整理する仕組みですよ。!!! たとえば1列目はタイトル、2列目は画像、3列目は説明、4列目は撮影日時。そして、各行にデータを追加していくという場合です。 ＞「画像<br>説明<br>(新着の物に関しては)新着マーク」 を１つのセルに入れて横４セルの表を作っています。 ひとつのセルに入れるのでしたら、それはリストですよ。 また、そのマークアップじゃ、そのデータが「画像」なのか「説明」なのか「新着マーク」なのかがわかりませんよ。 ★単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 ) その様な場合は、画像リストですから <ul id="photoList"> <li> <img src="" width="" height="" alt=""> <p>画像の説明・・・</p> </li> <li> <img src="" width="" height="" alt=""> <p>画像の説明・・・</p> </li> <li class="new"> <img src="" width="" height="" alt=""> <p>画像の説明・・・</p> </li> ・・・ </ul> 程度で十分ですよ。これだったら簡単でしょ!!! そしてスタイルシートで、ボックスにして並べればよい。ウィンドウ幅が狭ければ2列や3列に並び替えられるし。どの位置だろうが画像は追加できるし、削除も出来る。 もちろん、他のデザインも自由にも変更できます。(サンプルにはありませんが、画像の縦横比関係なしに納めるとか、画像にマウスオーバーすると画像を拡大するとか・・・ ★タブは＿に置換してあるので戻してください。 ★印刷では表にはならないようにしてある。 ★画像はファイル名だけ適当なものを・・テストですからサイズは当たらなくて良いです。 ★スマホだと2列になるかな <!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>サンプル0</title> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- #photoList{background-color:gray;width:90%;min-width:480px;max-width:840px;margin:0 auto;} #photoList ul,#photoList ul li{ display:block;list-style:none;margin:0;padding:0; } #photoList ul li{width:200px;height:200px;float:left;background-color:silver;margin:5px;position:relative;overflow:auto;} #photoList ul li img{display:block;border:white 5px solid;box-shadow: 3px 3px 3px rgba(0,0,0,0.4);margin:2px auto;} #photoList ul li p{font-size:0.9em;text-indent:1em;line-height:1.6em;margin:0 1em;} #photoList ul:after{content:"A";width:100%;display:block;clear:left;} #photoList li.new p:after{content:"新着";color:red;background-color:yellow;position:absolute;top:5px;right:5px;text-indent:0;font-size:0.9em;padding:2px;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div id="photoList"> ＿＿＿<ul> ＿＿＿＿<li class="new"> ＿＿＿＿＿<img src="./images/1.jpg" width="180" height="115" alt="海"> ＿＿＿＿＿<p>画像の説明</p> ＿＿＿＿</li> ＿＿＿＿<li class="new"> ＿＿＿＿＿<img src="./images/2.jpg" width="180" height="115" alt="海"> ＿＿＿＿＿<p>画像の説明・・・</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="./images/3.jpg" width="180" height="115" alt="海"> ＿＿＿＿＿<p>画像の説明・・・</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="./images/4.jpg" width="180" height="115" alt="海"> ＿＿＿＿＿<p>画像の説明・・・</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="./images/5.jpg" width="180" height="115" alt="海"> ＿＿＿＿＿<p>画像の説明・・・</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="./images/6.jpg" width="180" height="115" alt="海"> ＿＿＿＿＿<p>画像の説明・・・</p> ＿＿＿＿</li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
- DrFell
- ベストアンサー率55% (305/551)
それて、表じゃないので…… 表じゃないものを表として、マークアップするのが間違い。 察するに、箇条書きかな？と思いますのでul,liでやってみます。ほんとのことは、master-3rd さんじゃないとわからないですがね。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> ul{ width:511px; margin:0; padding:0; } li{ display:inline-block; width:100px; height:100px; margin:4px 2px; padding:10px; list-style-type:none; border:0px; background:#eeeeee; } </style> </head> <body> <ul> <li>画像<br>説明<br>new</li> <li>画像<br>説明<br>new</li> <li>画像<br>説明<br>new</li> <li>画像<br>説明<br>new</li> <li>画像<br>説明<br> </li> <li>画像<br>説明<br> </li> <li>画像<br>説明<br> </li> <ul> </body> </html> </ul> </html> これで、 <li>画像<br>説明<br>new</li> を追加するだけで、ご希望の形になると思います。 マークアップ（タグつけ）は、表現したい形に対してつけるのではなく、文脈につける。それをスタイルシートで表現したい形にデザインするのが、コツ。
