ブラウザの横幅に合わせて画像を等間隔に配置する方法とは？
- ブラウザの横幅に合わせて画像を等間隔に配置する方法について教えてください。画像同士の間隔がブラウザの横幅に合わせて伸縮し、常に等間隔になるようにしたいです。
- また、横幅が狭くなった場合には画像を一列に表示したいです。どのようなテンプレートやjQueryプラグインを使えば実現できるでしょうか。
- これまでに見つけたテンプレートやプラグインでは画像同士の間隔が固定であり、求めているものと異なりました。参考になる情報を教えてください。
- ベストアンサー
ブラウザの横幅に合わせて等間隔に画像を配置したい
やりたいことは、 画像A［］画像B［］画像C［］画像D・・・ 余白：［ ］ という形で、複数の画像を等間隔で並べて（画像は全て同じサイズ）、 ブラウザの横サイズを変えたら、それに合わせて画像の間のマージンが伸縮し、 常に画像同士が等間隔に並ぶようにしたいです。 そして、余白が一定以下になった場合は、 画像A［］画像B［］画像C 画像D［］ という形で１つずつ左下に表示されるようにしたいと考えています。 画像と画像の間のマージンが固定のものは色々なサイトで見かけたのですが、 上記のように可変のものを見つけることが出来なかったので質問を投稿しました。 上記を実現できる（または参考になるような）テンプレートやjQueryプラグイン、参考サイトなどを ご存知の方はおられないでしょうか。
- hoshio99
- お礼率100% (43/43)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
mediaqeryを使用して、幅によってスタイルシートを変えれば出来ますが勧めません。 普通にfloatにしましょう。
関連するQ&A
- 画像間の間隔を消す方法（HTML）
以下のようなことをしたいのですが、 [ a ] [b][c][d][e][f] 上部にaという大き画像を、その下にb～fのように（数は任意）小さな画像をすべて間隔をなくしてひとつの絵になるように（パズルの感覚で）したいのですが、どうしてもaと、b～fの上下の間に間隔があいてしまいます。b～f間の横の場合には間隔を消すことができるのですが・・・ この説明でお分かりいただけるか心配です。どのようにすれば解決するかご存知の方、よろしくお願いいたします。
- ベストアンサー
- HTML
- 画像の間隔を詰めたい
以下の画像の間隔を詰めたいのですがb-95.gifとその左右にあるb-305.gifとの間隔が埋まりません。 この画像はアイコンで、提供してくれるサイトにある見本ではちゃんと 感覚が埋まっているのですが、どうすればいいのでしょうか？ <img src="hiyo_43.gif"> <img src="b-325.gif"><img src="b-305.gif"> <a href="index.html"> <img src="b-95.gif" border="0" onmouseover="this .src='b-105.gif'"> </a> <img src="b-305.gif"><img src="b-102.gif">
- ベストアンサー
- HTML
- 画像イメージの上下左右、欲しいところに好きな間隔を入れられますか？
こんにちは。タイトルの通りサイト作成で、 画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。 参考までに、DreamWeaver（ドリームウィーバー）2004MXです。 画像とテキストの兼ね合いで、画像の右側や左側に、 ところどころで間隔が欲しいと思っています。 間隔をいじれるところといえば縦間隔、横間隔になりますが、 縦間隔なら「上」と「下」、横間隔なら「右」と「左」、 これらが一度に動いてしまうのです。 片方には確かに欲しい間隔が得られるのですが、 ほう片方に要らない間隔ができてしまい困っています。 例えば右だけに間隔が欲しい。 左だけに間隔が欲しい。 こういう場合って、何かやり方があるのでしょうか。 もともと余白込みの画像を用意するという手も講じましたが、 その場合はその場合で、その画像が他のレイアウトに流用しづらい という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので 対症療法としてはうまくいきませんでした。 また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、 セルがあまりにも絡まりあってしまい、 かなりぐちゃぐちゃなものになるためうまくいきませんでした。 やはりもうちょっと詳しい方にお訊きしようと思いまして 質問を立てさせていただきました。 素人質問で大変申し訳ありません。 どうぞ宜しくお願いいたします。
- ベストアンサー
- HTML
- ワードで画像を2 or 4分割で綺麗に配置したい
ワード2013で画像を2分割もしくは4分割で綺麗に配置する方法を教えてください。 画像をドラッグ＆ドロップして手作業でサイズを合わせようとしたのですが 画像の間に余白ができてしまったり サイズが揃わなかったりでうまくいきません。 「表の挿入」も試してみましたが余白をなくすことができませんでした。 目的はワードで作ったファイルを元に自費出版の写真集を作ることです。 用紙サイズはB6、余白は上下左右に3mmずつの設定とします。 （ページの端まで印刷したい場合は 仕上がりより少し大きめサイズで作成した上で余白が必要とのことです。） 一つのワードファイル内に2分割のページと4分割のページを混在させたいです。 また、ページ数が多くなる予定なので 一ページあたりの手間はなるべく少なくできるとありがたいです。 良いやり方や機能があれば教えていただけないでしょうか。 よろしくお願いいたします。
- 締切済み
- Word（ワード）
- ブラウザのサイズによって伸縮させる方法
下記のサイトのようにウィンドウの大きさに合わせて伸縮するサイトが作りたいのですが、コードの記述が分かりません。 http://www.cocoro-gift.com/ ブラウザのサイズによって背景画像が伸縮するやり方は載っていたのですが、今回作りたいのは右側にもムービークリップがあり、ウィンドウの大きさを変えてもステージの右端にくっついていくような作りです。 上記サイトのsakeのメニューを開いていくと、左下にボタン、右にお酒の画像が出てくるのですが、ウィンドウの大きさを変えてもそれぞれの位置は固定されたまま、ステージだけが伸縮する形です。 そのようなflashをつくるには、どんなコードにすればいいのでしょう？ 分かる方どうかよろしくお願いいたします。
- 締切済み
- その他([技術者向] コンピューター)
- イラレ：間隔の大きさを指定してオブジェクトを並べたい
整列パレットで「等間隔に揃える」は便利でよく使うのですが、 そのときに、その間隔の幅を指定できたらいいのになぁと思っています。 たとえば、オブジェクトA、B、Cを並べるときに、 AとB、BとCの間の間隔を３mmで揃える！などということです。 そのような機能ってあるんでしょうか？？
- ベストアンサー
- グラフィックソフト
- WORD2000で表と表との間隔を１ミリにするには？
WORD２０００でA,B,C,D表（それぞれ違う内容のもの）を作成した結果,それぞれの間隔が,１センチ程度（改行1つぐらいの大きさ程度）あいてしまいます。 この間隔を,５ミリにしたいのですが,ぜんぜんうまくいきません． どのようにすれば,うまくいきますか？ 今週いっぱいで,完成しなければならない資料でたいへん困っています． どうか,ご存知の方、お教えくださいますよう宜しく御願いします． 例示） A表 B表 C表 D表 AとB,BとC,CとDの間隔を１ミリにしたいのです．
- ベストアンサー
- オフィス系ソフト
- XMLに記述されているサムネイル画像を等間隔に並べるには？
XMLに記述されているサムネイル画像（複数）を帯状に（フイルムのネガの様に）縦に等間隔に並べたいのです。 XMLは各ノードに画像名とサイズが属性として記述されており、 画像サイズは横幅は同じですが、高さがそれぞれ異なるので、単純に箱に入れるわけにはいかないようです。 そこで、 1.伸縮可能な箱を用意する。 2.XMLから、属性[高さ]を取得し、1の伸縮可能な箱に設定 3.2つめからは、箱のy座標を、足していく。 4.これを繰り返す。 帯状に並べた画像には後々上下にスライドをさせたいと思います。 ところが、この方法ですと、3つめ以降が意図しない位置に表示されたり、あるいは表示すらされなかったりします。 どなたか力を貸してください。 後々、この帯状の画像（群）を上下にスライドさせたりもしようと思っています。 Flashは8.0です。
- ベストアンサー
- Flash
- フィルでの等間隔コピー
エクセル初心者の私にお知恵を貸して下さい。 どの様に説明していいかも分らないので 簡単に質問させていただきます。 以下の様な表があるとします。 A B C 1 10 2 10 3 10 4 10 5 10 6 10 これをC1、D1、E1にA1、A3、A5と1行ずつ空けた等間隔で C2、D2、E2にA2、A4、A6と1行ずつ空けた等間隔で 値を返して行きたいのですがフィルを使って可能でしょうか？ A B C D E 1 10 A1 A3 A5 2 10 A2 A4 A6 3 10 4 10 5 10 6 10 C1からの列には、IF関数を使用して A1～A300までの数値で10以上なら○ 10以下ならブランクとしたいのですが C1=IF($A1>=1,"○","")と数式を入れて フィルで列方向に引っ張ると D1=IF($A1>=1,"○","")となってしまうので A1をA3に置き換える作業がでてしまって困ってます。 $A1部分を関数に置き換えてのやり方もあるようでしたら ご教授いただけると幸いです。
- ベストアンサー
- オフィス系ソフト
お礼
›普通にfloatにしましょう。 ありがとうございます。 素直にfloatを使うことにします