テーブルを使わずに、CSSで画像を自由に配置する方法がわからず困っています。
下記のようなイメージで配置したいです。6列。行は可変。
■…画像
画像の数に応じて、はみだした画像は自動的に下に改行される感じです。
■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■
HMTLソースは以下のとおりです。
<ul>
<li><a href="*"><img src="img/01.jpg" /></a></li>
<li><a href="*"><img src="img/02.jpg" /></a></li>
<li><a href="*"><img src="img/03.jpg" /></a></li>
<li><a href="*"><img src="img/04.jpg" /></a></li>
<li><a href="*"><img src="img/05.jpg" /></a></li>
<li><a href="*"><img src="img/06.jpg" /></a></li>
<li><a href="*"><img src="img/07.jpg" /></a></li>
<li><a href="*"><img src="img/08.jpg" /></a></li>
<li><a href="*"><img src="img/09.jpg" /></a></li>
<li><a href="*"><img src="img/10.jpg" /></a></li>
<li><a href="*"><img src="img/11.jpg" /></a></li>
</ul>
どのようにCSSを定義すればスマートでしょうか?
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
列数も考慮して画像の大きさや均等、隙間も考えなければいけませんが、
方法は沢山ありますのでお好みです。
ul li でリストを使うのでしょうか?
ul li だと縦並びになるのでリストをCSSでつくるなら横並びに設定します。
li {float: left; margin: 0 20px 20px 0; padding: 0; list-style:none; }
イメージはこんな感じでmarginの数値を調整すれば隙間が出来て列数を上手く調整。
----------------------------------------------------------
下記が一番単純な方法
.xxx img{ margin: 0 20px 20px 0; border-style: none; }
<div class="xxx">
<a href="*"><img src="img/01.jpg" /></a>
<a href="*"><img src="img/02.jpg" /></a>
<a href="*"><img src="img/03.jpg" /></a>
<a href="*"><img src="img/04.jpg" /></a>
<a href="*"><img src="img/05.jpg" /></a>
<a href="*"><img src="img/06.jpg" /></a>
<a href="*"><img src="img/07.jpg" /></a>
<a href="*"><img src="img/08.jpg" /></a>
<a href="*"><img src="img/09.jpg" /></a>
<a href="*"><img src="img/10.jpg" /></a>
<a href="*"><img src="img/11.jpg" /></a>
</div>
-----------------------------------------
隙間nargin値の調整やdiv枠のwidthで幅を調整したりして6列にすれば良い。
質問の意味がイメージと違っていましたか?
この回答への補足
丁寧な回答ありがとうございます。
おかげ様でリストでも横並びで均等に配置することができました。
※1点追加で質問させてもらっていいですか?
右端の画像には右のマージンを空けず、div枠の幅にぴったりとくっつけたいのですが、この場合どう指定すればいいのでしょうか?
No.3
- 回答日時:
間違いです。
訂正。<a href="*"><img src="img/06.jpg" style="margin-right: 0;" /></a>
No.2
- 回答日時:
#1です。
補足への回答色々方法があるので、その後どんなHTMLを書いたかわかりませんが
6列が並んでいる状態で6番目の右マージンだけを無くしたいのならば
6番目だけ右マージンを解除すれば良い。 img/06.jpg のマージンを 0 設定。
その分、全体枠 width の幅を小さくするか、画像の隙間を広げて均等にするか。
<a href="*"><img src="img/06.jpg" margin-right: 0; /></a>
各々配置するなら、各 a を display blockにし width で好きなように配置。
htmlでアンカー を改行して書くか一列に書くかによっても各画像間の隙間が違うので注意。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MFCで画像を表示させているので...
-
JavaScriptで変更した属性の元...
-
(javascript)HTMLで指定した...
-
onclickで画面が固まる・・・ら...
-
OpenCVでサンプルコードを使う...
-
error LNK2019 未解決のシンボ...
-
指定したフォルダの画像を一括...
-
画像が表示でnull; this.src
-
createElementによる空要素の生...
-
画像がうまく表示されないのですが
-
HPにスライドショーが反映され...
-
MAX関数を使ってからLEFT JOIN...
-
Gifアニメ、最後のコマに行った...
-
クリックで色変更後に既に変更...
-
createElementが一瞬で消えてし...
-
複数のバナーをリロードする度...
-
デフォルト非表示にしたい。【t...
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
-
Slick.jsのオプションrtlについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
MFCで画像を表示させているので...
-
画像が表示でnull; this.src
-
error LNK2019 未解決のシンボ...
-
(javascript)HTMLで指定した...
-
外部javascriptの重複を防ぐには
-
libjpegライブラリの使い方につ...
-
Vb.net2005での画像の合成方法
-
外部ファイルにしたら文字化け...
-
jQuery 複数のfind()
-
HTMLからimgのsrcのみを正規表...
-
html内にスライドショーを複数設置
-
条件分岐でキーが入力されてい...
-
複数画像のランダム複数表示(...
-
ダイアログから画像ファイルは...
-
【OpenCV】二値画像後、白の部...
-
"lightbox"の"CLOSE"ボタンクリ...
-
onclickで画面が固まる・・・ら...
-
pythonで、tkinterとpillowの組...
-
imgボタンにfocusの当て方
おすすめ情報