画像+説明を追加した時に自動で下に移動

締切済

質問者：master-3rd
質問日時：2013/06/15 17:46
回答数：2件

「画像<br>説明<br>(新着の物に関しては)新着マーク」　を１つのセルに入れて横４セルの表を作っています。
これがたまに増えていくのですが、新しいものを左上に置き古いものをどんどん右もしくは下に落としていくのを手動で(1つ１つコピペで)やっています。

これをCSSやJavaスクリプトなどで自動で下に押しやる事は出来ないでしょうか?
それともCGIやphpでないと無理でしょうか?

何か方法があれば教えてください。

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： DrFell
回答日時：2013/06/15 18:57

それて、表じゃないので……

表じゃないものを表として、マークアップするのが間違い。

察するに、箇条書きかな？と思いますので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>
を追加するだけで、ご希望の形になると思います。

マークアップ（タグつけ）は、表現したい形に対してつけるのではなく、文脈につける。それをスタイルシートで表現したい形にデザインするのが、コツ。

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2013/06/16 00:50

そんな、本来表でないものを表にするから無理が来る。

表は、二次元以上のデータを整理する仕組みですよ。!!!
　　たとえば1列目はタイトル、2列目は画像、3列目は説明、4列目は撮影日時。そして、各行にデータを追加していくという場合です。
＞「画像<br>説明<br>(新着の物に関しては)新着マーク」　を１つのセルに入れて横４セルの表を作っています。
　ひとつのセルに入れるのでしたら、それはリストですよ。
　また、そのマークアップじゃ、そのデータが「画像」なのか「説明」なのか「新着マーク」なのかがわかりませんよ。

★単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　その様な場合は、画像リストですから
<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">

＿</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>