4枚の画像を一列に並べようと思います。
4枚に与えられたスペースは550pxです。画像の下のコンテンツも550pxを基準に配置するので、4枚のうちの両側の2枚は550pxの両端に配置しようと思います。
この趣旨でコーディングしたのが下記URLです。
http://makoji.web.fc2.com/test/test_18/test.html
他の画像を
margin-right: 14px;
とすると綺麗に並びました。ただ確認をとったのは最近のブラウザだけで、古いブラウザでどうなっているのか分かりません。過去の例でうまく並んだと思ったらIE6.0で4枚目が2列目に改行されてしまっていたことがあります。
そこでmarginをブラウザに自動割り振りさせることが出来ないものかと思案するのですが・・・
とりあえず右端の画像を右端に寄せるために
margin-right: 0px;
margin-left: auto;
としてみましたがダメでした。でも
width: 125px;
もしくは
float: right;
を挿入すれば解決できます。
しかしながら真ん中の2枚をどうすれば均等に配置できるかが分かりません。
この場合、古いブラウザを試せる環境を全部揃えて片っ端からチェックを入れるしかないのでしょうか。
--------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
* {
font-size: 14px;
font-wight: 100;
color: #000000;
}
.wrap {
margin: 0px auto;
width: 700px;
}
.logo {
border: solid 1px #FF0099;
}
.main {
padding-top: 15px;
padding-bottom: 15px;
border: solid 1px #FF0099;
}
.main img {
margin-right: 2px;
float:left;
display: block;
}
.menu {
float: left;
margin-top: 0px;
margin-left: 10px;
padding-left: 0px;
}
.menu li {
margin-bottom: 2px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
width: 100px;
list-style-type: none;
background-color:#FFCCFF;
}
.list span {
color: #FF0099;
}
.menu a:link {
color: #FF0099;
}
.menu a:visited {
color: #FF0099;
}
.menu a:active {
color: #FF0099;
}
.menu a:hover {
color: #FF0099;
}
.clear {
clear: both;
}
/* インデックス */
.index_body {
margin-top: 15px;
padding-left: 133px;
}
.sample {
margin-bottom: 10px;
width: 550px;
text-align:center;
background-color: yellow;
}
.sample a {
text-decoration: none;
}
.sample img {
border: solid 1px #FF0099;
float: none;
}
.sample .left {
float: left;
margin: auto auto auto 0px;
text-align: center;
}
.sample .middle {
float: left;
margin: auto;
text-align: center;
}
.sample .right {
margin-right: 0px;
margin-left: auto;
text-align: center;
}
-->
</style>
</head>
<body>
<div class="wrap">
<div class="logo">
<img src="dot_999999.gif" width="698" height="120">
</div><!-- end of "logo"-->
<div class="main">
<ul class="menu">
<li>ああ</li>
</ul><!-- end of menu -->
<div class="index_body">
<div class="sample">
<div class="left">
<img src="dot_999999.gif" width="123" height="170" alt="ああああ">
<div>aaaaa</div>
</div><!-- end of "left" -->
<div class="middle">
<img src="dot_999999.gif" width="123" height="170" alt="ああああ">
<div>aaaaa</div>
</div><!-- end of 1of"middle" -->
<div class="middle">
<img src="dot_999999.gif" width="123" height="170" alt="ああああ">
<div>aaaaa</div>
</div><!-- end of 2of"middle" -->
<div class="right">
<img src="dot_999999.gif" width="123" height="170" alt="ああああ">
<div>aaaaa</div>
</div><!-- end of "right" -->
</div><!-- end of "sample" -->
<div><img src="dot_999999.gif" width="550" height="450" alt="" /></div>
<div class="clear"></div>
</div><!-- end of "index_body" -->
</div><!-- end of "main" -->
</div><!-- end of "wrap" -->
</body>
</html>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
とりあえず古いIE環境での動作チェックというのであれば。
IETester
http://www.my-debugbar.com/wiki/IETester/HomePage
画像を一列に並べる件については下記URLの方法ではどうでしょうか?
http://www.yomotsu.net/lab/css/layout_justify-im …
この回答への補足
以下のようにして見ました。
.sample {
margin-bottom: 10px;
width: 550px;
border-style: none;
background-color: yellow;
}
.sample A {
TEXT-DECORATION: none;
}
.sample ul {
margin-right: 2px;
padding: 0px;
text-align: justify;
text-justify: distribute-all-lines;
}
.sample ul:after{
content: url("css_justify.png");
line-height: 10px;
}
.sample ul li{
display: inline;
}
.sample ul img {
width: 123px;
height: 194px;
border: solid 1px #FF0099;
}
.sample ul div {
display: inline-block;
width: 123px;
text-align: center;
}
<div class="sample">
<ul>
<li>
<div>
<img src="dot_999999.gif" alt="ああああ">
aaaaa
</div>
</li>
<li>
<div>
<img src="dot_999999.gif" alt="ああああ">
aaaaa
</div>
</li>
<li>
<div>
<img src="dot_999999.gif" alt="ああああ">
aaaaa
</div>
</li>
<li>
<div>
<img src="dot_999999.gif" alt="ああああ">
aaaaa
</div>
</li>
</ul>
</div>
これをFC2にアップしたのが以下のURLですが、何故か上手く表示されません。
http://makoji.web.fc2.com/test/test_18/test2.html
ローカルサーバー(An Httpd)で実行すると、4枚横に並び、右端・左端も下の画像とあっているのですが。
そこでリモートサーバーにアップしてみました。
http://kojima.sppd.ne.jp/test3.htm
こちらでは4枚横に並んでいますが、右端がズレています。
ローカルサーバーで編集していた際に、div.sampleの右端が微妙に右にはみ出していたので、
margin-right: 2px;
としたのですが、ローカルサーバーではこれで丁度よかったのが、リモートサーバーでは逆にズレを生じさせているようです。
ここまでブラウザはIE8です。
Opera、Chrome、FireFox、Safariを調べると、この4ブラウザは全て同じ挙動を示し、FC2では問題なく4枚横に並んで両端もキチッと下の画像に揃っています。しかしリモートサーバーでは.sample ul:afterで2行目に記述しているcss_justify.pngが一行目に表示されてしまいます。
同じファイルでサーバーが違うと表示が変わるということがあるのでしょうか。聞いたことがないのですが・・・
No.2
- 回答日時:
imgに対してborder:0px
画像を配置するインライン要素に対してwidth:550px
画像自体のimgで4/550の横幅に成る様にimgの属性で指定。
コレが基本と成るのでは?
ブラウザに関しては少なくともIEでは6以降。
Firefoxでは2以降を考えれば良いと思う。
この回答への補足
border: #ff0099 1px solid;
としました。
>画像を配置するインライン要素に対してwidth:550px
画像をどの要素で並べるかですが、divタグもliタグもブロック要素なので、その属性に
display: inline;
を指定するという意味でよろしいでしょうか。
>画像自体のimgで4/550の横幅に成る様にimgの属性で指定。
4/550は550pxを4等分しなさいという意味ですよね。
これをimgの属性として指定した場合、画像間の隙間は無くなってしまうと思うのですが・・・
画像を入れるブロックの幅を550pxの1/4にした場合、ブロックの中央に画像を配置すると最も左の画像の左端は下の画像の左端と一致せず、同様に最も右の画像の右端も下の画像の右端と一致しなくなります。
この両画像をそれぞれ下の画像と端が揃うように配置すると、画像の逆側の端には画像を中央配置した場合の2倍の隙間が出来ることになります。中央の2枚はこの隙間も含めて均等に配置しなくてはならないので、この指定をどうすればいいのか・・・
どう考えるべきでしょう。
**************
すみません。ここから下はhyterさんへのレスです。勝手にスペースをお借りして申し訳ありません。
なおNO.1の補足でご報告しましたサーバーによる表示の違いですが、私が契約しているリモートサーバーとローカルサーバーのズレに関しては、リモートサーバーにアップする際のミスでした。ulタグのafter属性で指定しているcss_justify.pngのパスが通っていませんでした。今はパスを通して、キチンと両端が揃っている状態で均等割り付けが実現しています。
FC2については未だに何故か分かりません。FC2に関しては、ご相談前の4枚が均等割り付けされていない段階から、下の画像の両横の赤枠が消えている不具合もありました。これまで本題と違うので取り上げてこなかったですけど、これも何故か分かりません。
多分にFC2では自サイトへのタグを記述するためのJavascriptが強制的に挿入されるので、このJavascriptが原因ではないかと思うのですが・・・良く分かりません。もっとも実際に立ち上げるサイトはFC2を使わないから、この問題はとりあえず忘れようと思います。
**************
そうするとNo.1の補足でアップしましたコードで一応の解決は出来た訳ですが、このコード、教えていただいたIETesterを使って見たところ、キチンと表示されるのはIE8だけのようです。
No.1の補足でアップしたコードは画像とそのコメント(aaaaa)を一つのliタグの中に入れるために、教えていただいたサイトのサンプルページでは
<LI><IMG alt="" src="img01.png" width=100 height=100></LI>
となっているのを
<li>
<div><img alt="ああああ" src="dot_999999.gif" /> aaaaa</div>
</li>
とアレンジしたためのようです。
そこで画像だけのリスト、コメントだけのリストと二つに分けたところ、綺麗に並びました。
ただ画像とコメントはペアなので、データの正確からいうと、この二つを一つのliタグに格納できないかと思案しています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSS、width100%でもできる余白
-
cssで「下よせ」ってどうやって...
-
CSS(0の単位)について
-
ページを拡大縮小でborderが消...
-
<div>と<div>の間の10px程の...
-
floatした画像の下揃えについて
-
CSSの角丸での質問です。 今、C...
-
スクロールボックスを中央に配...
-
定義リスト dl dd dt
-
余分な縦スクロールバーが出て...
-
heaerとfooterに背景画像が難し...
-
Flexslider2のカーセルスライダ...
-
CSSでボックスのheightが0になる
-
【スタイルシート?】同行内で...
-
テーブル内の文字が揃わない
-
【CSSについて】リストをフロー...
-
リストを全体的に右寄せにしたい。
-
CSSで余白とパディングに”0”を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
<div>と<div>の間の10px程の...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
-
初心者html・CSS ウィンドウを...
おすすめ情報