Q&A
こちらの複数の様々なサイズの画像同士の隙間を
均等にしつつ、尚且つ画像やテーブルはウィンドウサイズによって
可変する様に作成したいと考えておりますが、
どのように作成すればいいかが分かりません。。。
※ちなみにこちらのHTMLは完成後、
ページ上にはifreamで読み込みそちらも可変する様に
設置したいと考えております。
lang
1<html> 2<head> 3<meta charset="utf-8"> 4<title>無題ドキュメント</title> 5</head> 6 7<body> 8 9<table width="970" border="0" cellspacing="0" cellpadding="0"> 10 <tbody> 11 <tr> 12 <td colspan="2"><img src="http://placehold.jp/800x400.png" alt="" width="98%" border="0"/></td> 13 <td><img src="http://placehold.jp/400x400.png" alt="" width="98%" border="0"/></td> 14 <td><img src="http://placehold.jp/400x400.png" alt="" width="98%" border="0"/></td> 15 </tr> 16 <tr> 17 <td><img src="http://placehold.jp/400x400.png" alt="" width="98%" border="0"/></td> 18 <td><img src="http://placehold.jp/400x400.png" alt="" width="98%" border="0"/></td> 19 <td colspan="2"><img src="http://placehold.jp/800x400.png" alt="" width="98%" border="0"/></td> 20 </tr> 21 </tbody> 22</table> 23 24 25 26</body> 27</html>
以上、HTMLやCSSに詳しい方是非ご教授頂けましたら幸いです。
回答5件
0
テーブルタグは利用しない方が簡単に均等に配置することができます。
lang
1<div id="wrap"> 2 <img src="http://placehold.jp/800x400.png" alt=""/> 3 <img src="http://placehold.jp/400x400.png" alt=""/> 4 <img src="http://placehold.jp/400x400.png" alt=""/> 5 <img src="http://placehold.jp/400x400.png" alt=""/> 6 <img src="http://placehold.jp/400x400.png" alt=""/> 7 <img src="http://placehold.jp/800x400.png" alt=""/> 8</div>
lang
1#wrap { 2 width:100%; 3 display:-webkit-flexbox; 4 display:-moz-flexbox; 5 display:-ms-flexbox; 6 display:-o-flexbox; 7 display:flexbox; 8 display:flex; 9 justify-content:space-between; 10 flex-wrap:wrap; 11 align-items:center; 12}
あとは画像を調整すれば、画像のアスペクト比を保ちつつ、均等に配置できます。
投稿2015/05/08 09:02
総合スコア1698
0
こういうのはどうですか？
lang
1<html> 2<head> 3<meta charset="utf-8"> 4<title>無題ドキュメント</title> 5<style type="text/css"> 6 img { 7 display: inline-block; 8 margin: 1%; 9 height: auto; 10 vertical-align: bottom; 11 } 12 img[width="800"] { 13 max-width: 98%; 14 } 15 img[width="400"] { 16 max-width: 48%; 17 } 18</style> 19</head> 20 21<body> 22 23<img src="http://placehold.jp/800x400.png" alt="" width="800" border="0"/><img src="http://placehold.jp/400x400.png" alt="" width="400" border="0"/><img src="http://placehold.jp/400x400.png" alt="" width="400" border="0"/><img src="http://placehold.jp/400x400.png" alt="" width="400" border="0"/><img src="http://placehold.jp/400x400.png" alt="" width="400" border="0"/><img src="http://placehold.jp/800x400.png" alt="" width="800" border="0"/> 24 25</body> 26</html>
投稿2015/06/16 10:34
総合スコア52
0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body,html{
margin:0;
height:100%;
}
.wrapper{
position:relative;
height:100%;
}
.grid{
position:absolute;
box-sizing:border-box;
padding-left:5px;
padding-bottom:5px;
height:50%;
}
.grid.w1{ /* 幅がグリッド1つ分 */
width:25%;
}
.grid.w2{ /* 幅がグリッド2つ分 */
width:50%;
}
.grid.col1{ /* 1列目 */
left:0;
padding-left:0;
}
.grid.col2{ /* 2列目 */
left:25%
}
.grid.col3{ /* 3列目 */
left:50%
}
.grid.col4{ /* 4列目 */
left:75%
}
.grid.row1{ /* 1行目 */
top:0;
}
.grid.row2{ /* 2行目 */
top:50%;
padding-bottom:0;
}
.grid .inner{
height:100%;
background-repeat:none;
background-size:cover;
background-position:center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="grid w2 col1 row1">
<div class="inner" style="background-image:url(http://placehold.jp/800x400.png);"></div>
</div>
<div class="grid w1 col3 row1">
<div class="inner" style="background-image:url(http://placehold.jp/800x400.png);"></div>
</div>
<div class="grid w1 col4 row1">
<div class="inner" style="background-image:url(http://placehold.jp/800x400.png);"></div>
</div>
<div class="grid w1 col1 row2">
<div class="inner" style="background-image:url(http://placehold.jp/800x400.png);"></div>
</div>
<div class="grid w1 col2 row2">
<div class="inner" style="background-image:url(http://placehold.jp/800x400.png);"></div>
</div>
<div class="grid w2 col3 row2">
<div class="inner" style="background-image:url(http://placehold.jp/800x400.png);"></div>
</div>
</div>
</body>
</html>
投稿2015/06/12 10:03
総合スコア255
0
トリミングはされますが、画像を背景にしてこんな感じでどうでしょう？
lang
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 body,html{ 8 margin:0; 9 height:100%; 10 } 11 .wrapper{ 12 position:relative; 13 height:100%; 14 } 15 .grid{ 16 position:absolute; 17 box-sizing:border-box; 18 padding-left:5px; 19 padding-bottom:5px; 20 height:50%; 21 } 22 .grid.w1{ /* 幅がグリッド1つ分 */ 23 width:25%; 24 } 25 .grid.w2{ /* 幅がグリッド2つ分 */ 26 width:50%; 27 } 28 .grid.col1{ /* 1列目 */ 29 left:0; 30 padding-left:0; 31 } 32 .grid.col2{ /* 2列目 */ 33 left:25% 34 } 35 .grid.col3{ /* 3列目 */ 36 left:50% 37 } 38 .grid.col4{ /* 4列目 */ 39 left:75% 40 } 41 .grid.row1{ /* 1行目 */ 42 top:0; 43 } 44 .grid.row2{ /* 2行目 */ 45 top:50%; 46 padding-bottom:0; 47 } 48 .grid .inner{ 49 height:100%; 50 background-repeat:none; 51 background-size:cover; 52 background-position:center; 53 } 54 </style> 55</head> 56<body> 57 <div class="wrapper"> 58 <div class="grid w2 col1 row1"> 59 <div class="inner" style="background-image:url(http://placehold.jp/800x400.png);"></div> 60 </div> 61 <div class="grid w1 col3 row1"> 62 <div class="inner" style="background-image:url(http://placehold.jp/400x400.png);"></div> 63 </div> 64 <div class="grid w1 col4 row1"> 65 <div class="inner" style="background-image:url(http://placehold.jp/400x400.png);"></div> 66 </div> 67 <div class="grid w1 col1 row2"> 68 <div class="inner" style="background-image:url(http://placehold.jp/400x400.png);"></div> 69 </div> 70 <div class="grid w1 col2 row2"> 71 <div class="inner" style="background-image:url(http://placehold.jp/400x400.png);"></div> 72 </div> 73 <div class="grid w2 col3 row2"> 74 <div class="inner" style="background-image:url(http://placehold.jp/800x400.png);"></div> 75 </div> 76 </div> 77</body> 78</html>
投稿2015/06/11 01:20
編集2015/06/17 03:27
総合スコア127
0
lang
1<table> 2 <tbody> 3 <tr> 4 <td colspan="2"><img src="http://placehold.jp/800x400.png" alt=""/></td> 5 <td><img src="http://placehold.jp/400x400.png" alt=""/></td> 6 <td><img src="http://placehold.jp/400x400.png" alt=""/></td> 7 </tr> 8 <tr> 9 <td><img src="http://placehold.jp/400x400.png" alt=""/></td> 10 <td><img src="http://placehold.jp/400x400.png" alt=""/></td> 11 <td colspan="2"><img src="http://placehold.jp/800x400.png" alt=""/></td> 12 </tr> 13 </tbody> 14</table>
lang
1table { 2 width: 100%; 3 border-collapse: collapse; 4} 5table, tbody, tr, td { 6 margin: 0; 7 padding: 0; 8 border: 0; 9} 10td { 11 border: 4px solid transparent; 12} 13td > img { 14 width: 100%; 15}
このような感じでどうでしょうか。
隙間が均等ではありませんが、画像のアスペクト比を保つ関係で仕方のない部分です。
なおiframeは制御が面倒くさいので私はパスします。
余談ですが、tableタグをレイアウト調整に利用するのはお勧めしません。
本当に「表」そのものを表現したい場合に限り使用し、普段はできる限りdivなどを配置した方がいいです。
投稿2015/05/07 14:06
編集2015/05/07 15:54
総合スコア870
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。