- ベストアンサー
動的にイメージが伸びるようにするには？
iphoneのiBookやNewsstandのように（添付画像参照）書籍ファイルを追加した時に、動的に本棚の長さが変わるようにするには、どのようにすればよいのでしょうか？ 書籍を棚に収めるためには、 ・1棚に収めることのできる最大の横幅を指定する。 ・その横幅を1棚に入れることのできる書籍アイコンの数で割って、1書籍アイコンの幅を決定する。 ・書籍ファイルにfloatを指定する。 といったことが想像できるのですが、書籍の増加に対して、本棚の数が動的に増えることに関しては, どうなんでしょうか。。。height: auto 等を使うのでしょうか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
簡単なサンプルを書いてみました。周囲(本棚の上と左右)の画像は手抜きしてありますが、示されたサンプルのようにも枠用の画像を作れば可能です。またフォームもHTMLから省いています。これも普通にフォームを記述して重ねればよいでしょう。 本来は、それぞれの画像にポインターを合わせれば、大きな画像や説明が現れればよいのですが、それは簡単なので省いています。 [HTML5+CSS3]で書いています。 ★タブは＿に置換してあります。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> ＿<!--[if IE]> ＿＿<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> ＿＿<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> ＿<![endif]-->＿<link rel="stylesheet" href="css/style.css"> <style media="screen"> <!-- nav ul,nav ul li{list-style:none;margin:0;padding:0;} nav ul{ display:block;width:90%; background:rgb(180,180,40) url(./images/backShelf.jpg);padding:20px;line-height:140px; border-image: url(./images/backShelfframe.jpg) 10; border-width:10px 10px 0 10px;border-style:solid; } nav ul li{display:inline-block;width:100px;position:relative;margin:0 50px; 15 round;} nav ul li img{display:block;width:100%;height:auto;box-shadow: 10px 10px 10px rgba(0,0,0,0.4);} --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿</header> ＿<section> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#"><img src="./images/hikari.jpg" width="180" height="254" alt=""></a></li> ＿＿＿＿<li><a href="#"><img src="./images/kurashis.jpg" width="160" height="217" alt=""></a></li> ＿＿＿＿<li><a href="#"><img src="./images/maters.jpg" width="180" height="245" alt=""></a></li> ＿＿＿＿<li><a href="#"><img src="./images/omosiro.jpg" width="210" height="291" alt=""></a></li> ＿＿＿＿<li><a href="#"><img src="./images/rika.jpg" width="182" height="245" alt=""></a></li> ＿＿＿＿<li><a href="#"><img src="./images/seibun.jpg" width="180" height="251" alt=""></a></li> ＿＿＿＿<li><a href="#"><img src="./images/sekken.jpg" width="180" height="249" alt=""></a></li> ＿＿＿＿<li><a href="#"><img src="./images/tubo.gif" width="178" height="245" alt=""></a></li> ＿＿＿＿<li><a href="#"><img src="./images/rika.jpg" width="150" height="214" alt=""></a></li> ＿＿＿</ul> ＿＿</nav> ＿＿<aside> ＿＿＿<h3>Something aside</h3> ＿＿</aside> ＿＿<h2>A smaller heading</h2> ＿＿<p> ＿＿</p> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
あまりやりたくはないけど・・ floatではなく、inline-blockで行うほうが良いでしょう。 複数の画像を横並びにし、その空白を均等にしたい - HTML - 教えて！goo ( http://okwave.jp/qa/q7797527.html ) をご覧ください。
お礼
ありがとうございます！！ まさか、丸ごとソースで教えてくださるとは思いもしませんでした！ 実際、要素数に応じて背景を動的に変化させるためには、特にheight:autoなどをしなくとも、このように動的に変わる部分の要素にbackgroudやborderを付ければよかったのですね！ 勉強になりました。 ありがとうございます。