お世話になります。CSS初心者です。
もしかしたらweb制作者様にとっては簡単なことかもしれませんが、いろいろ調べてもよく理解できなかったので、どうか教えてください。
添付画像のようなレイアウトでサイト制作しています。
このように#rightbox内に10の画像を均等に表示させたいと思っています。
かつてテーブルタグといったものが使われていましたが、現在テーブルは推奨できないということで、外部CSSファイルでレイアウト表示させたいと考えています。
このようなレイアウトで表示させる場合、どのようなCSSの記述が好ましいでしょうか。
参考書などで調べたところ<ul>と<li>要素を使用するのが一般的だということでしたが、正直よく分かりませんでした。どうかご教授お願いします。
ちなみにこの画像のリストはクリックするとThickboxで大きな画像が表示されるようにしたいです。
No.6ベストアンサー
- 回答日時:
一応補足しておきます。
>rightmenuがleftmenuの下に回り込んでしまい、まるでrightmenuの総widthが639pxをオーバーした時のような状態になっています。
これはおそらく画像のボーダーの分639pxを超えてしまうので幅に収まりきらなかったのだと思います。
>背景画像を指定しているのですが、それも10種類の画像の部分には表示されていない状態です
li要素にfloatが指定されていますが、floatを指定されたボックスは通常の流れから取り除かれるので、そのぶんの高さが計算されず、結果的にdiv#rightmenu-insideの高さは0になってしまいます。
本来これはclearすればいいのですが、今回のレイアウトでclearを指定できる要素が無いので、floatを指定した親要素にheightを指定します。ちなみにfloatで複数段になる場合などはoverflow:hidden;を使うといいと思います。(バグの量ではheight<overflowなので基本height推奨ということで)
返信遅くなり申し訳ありません。
回答ありがとうございます。
しかもこれほど親切に解説までしてくださって...お礼の言葉もありません。
ご指摘のようにCSSいじってみたところ、今回の問題を解決することができました。ただ、やはりDWのレイアウト崩れが気になるところですが...
いろいろなブラウザでレイアウトを確認してみたところ、旧バージョンのIEのみ、DWのようにレイアウトが崩れて表示されました。背景のpng画像も透過効果が表示されていなかったので、バージョンを最新のものに更新したところ、レイアウトもpng画像の透過部分も問題なく表示されました。素人考えですがDWもいまだにMXを使用しているので、そこらへんが原因なのかと思いましたが、どうなんでしょうか笑。
とにかく私のような素人に親切にご指摘くださり、本当にありがとうございました。
心より感謝します。
No.5
- 回答日時:
HTMLそのままでCSSの方だけ書き換えてみます。
説明もつけておきます。
div#rightmenu {
width:639px;
float:right;
}
div#rightbox-inside {
/* 親要素でwidthを指定してあるので子要素では同じ値のwidthを指定しません */
padding:0 30px; /* paddingはwidthと一緒に指定しません */
background-image:url(../image/03.png);
background-repeat:repeat-y;
}
#resultList {
height:48px; /* li要素のclearは位置的に難しいのでheightで高さを取ります overflow:hidden;でも可能 */
margin:0 0 0 -11px;
padding:0; /* ul要素のデフォルトスタイルを打ち消す */
list-style:none;
}
#resultList li {
display:inline;
float:left;
margin-left:11px;
}
#resultList li a {
display:block; /* きっちり揃えたい時にはインラインボックスよりブロックボックスにした方がバグに会いにくいです */
}
#resultList li a img {
display:block;
width:48px; /* 毎回HTMLでwidthやheightを指定するのが面倒な場合はcssでもできます */
height:48px;
border:0; /* アンカー要素内の画像にはデフォルトでボーダーが付くので打ち消します */
}
ちなみに、Dreamwaver上でのレイアウト崩れはあまりあてにならないようです。IE、Firefox、Opera、Safariあたりで確認が取れていれば大丈夫でしょう。
No.4
- 回答日時:
2.の回答のmarginとpadding変な指定になってましたね、すみません。
>レイアウト崩れ
サイトの別の部分が崩れるということでしょうか?
一応載せたのはサンプルなので、cssのセレクタはタグ名ではなくidやclass名で指定した方が無難です。
http://www.tagindex.com/stylesheet/basic/format3 …
もしメニューが崩れるなら崩れ方を補足してもらえれば回答できるかもしれません。
この回答への補足
返信ありがとうございます。ご指摘の通りセレクタをidで指定してみました。
<div id="rightmenu">
<div id="rightbox-inside">
<ul id="resultList">
<li>
<a href="image/001.jpg" class="thickbox" title="画像の解説"><img src="image/001-thumb.jpg" width="48" height="48" alt="画像の解説"></a>
</li>
~以下略~
</ul>
</div></div>
CSSは現在はこんな記述です。
div#rightmenu {
width:639px;
float:right;
}
div#rightbox-inside {
background-image:url(../image/03.png);
background-repeat:repeat-y;
width:639px;
}
#resultList {
margin:0 0 0 -11px;
list-style:none;
}
#resultList li {
display:inline;
float:left;
margin-left:11px;
}
レイアウト崩れはできるだけ詳細に記述します。表現がおかしいところもあるかもしれませんがご勘弁ください。
DreamWeaverで作業してますが、DW上ではrightmenuがleftmenuの下に回り込んでしまい、まるでrightmenuの総widthが639pxをオーバーした時のような状態になっています。画像も10個のうち最後のひとつだけ改行されています。さらにそのdiv#rightmenu-insideに背景画像を指定しているのですが、それも10種類の画像の部分には表示されていない状態です。
それでも、Firefoxやsafariでプレビューしてみると、レイアウトはちゃんとrightmenuがあるべき位置に収まっており(背景画像は表示されません、paddin-left rightの30pxも間隔ありません)、ますますよく分からなくなってきましたが明らかにおかしいですよね?
申し訳ありません、いまの私の理解度ではちょっと分かりかねます、お知恵を拝借できればと思います。
よろしくお願いします。
No.3
- 回答日時:
確か、「Thickbox」は、
<a href="本画像" class="Thickbox"><img src="サブネール画像"></a>
が前提だったから、
No.1の回答を使うなら、
<li><a href="本画像" class="Thickbox"><img src="サブネール画像"></a></li>
のマークアップで、CSSも若干修正がいるかも...
ご回答ありがとうございます。感謝しています。
調べてみたところyyr446さんの説明の通りみたいです。
Thickboxの表示はきちんと表示されました。
ですが、やはりCSSがおかしいのかレイアウト崩れがおきています。
HTMLとCSSはこのほうに記述したのですが、どうしてレイアウトが崩れるのかが良く分かりません。もしよければ教えてください。
<ul>
<li>
<a href="image/001.jpg" class="thickbox" title="画像の解説"><img src="image/001-thumb.jpg" width="48" height="48" alt="画像の解説"></a>
</li>
~以下略~
</ul>
ul {
height:48px;
padding:0px 30px 0px 30px;
margin:0 0 0 -11px;
list-style:none;
}
ul li {
display:inline;
float:left;
margin-left:11px;
}
No.1
- 回答日時:
ul、liというのはマークアップの話ですね。
今回の場合はul、li要素でいいと思います。<ul>
<li><img src="A.jpg" alt="" /></li>
<li><img src="B.jpg" alt="" /></li>
<li><img src="A.jpg" alt="" /></li>
<li><img src="B.jpg" alt="" /></li>
<li><img src="A.jpg" alt="" /></li>
<li><img src="B.jpg" alt="" /></li>
<li><img src="A.jpg" alt="" /></li>
<li><img src="B.jpg" alt="" /></li>
<li><img src="A.jpg" alt="" /></li>
<li><img src="B.jpg" alt="" /></li>
</ul>
ul{
height:48px;
margin-left:-11px;
list-style:none;
}
ul li{
display:inline;
float:left;
margin-left:11px;
}
ご回答ありがとうございます。感謝しています。
metametamuさんの指示を参考に記述してみたのですが、レイアウト崩れが起きてしまいました。
私の理解力がないせいだと思うのですが...
現在のHTMLとCSSの記述は上記の通りです。
もしよければご教授お願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
<ul>~</ul>が二つ続くと間に改...
-
liタグの中に<p>タグやら<dl>を...
-
ボタンを横に並べて表示させる方法
-
HTMLでメニューをリストで書き...
-
リストの数字のフォントサイズ...
-
メニューの横並びで改行されて...
-
箇条書きがずれて表示されてし...
-
css 横並びのナビゲーションバ...
-
レスポンシブWebデザインでリン...
-
SWIFTでHtmlのソースの一部を取得
-
IE6でどうしても隙間が空いてし...
-
文法チェックの<A>と</A>の間が...
-
ページを開いているときのリン...
-
display:table;を多段表示させたい
-
ドロップダウンの残像
-
bxsliderの画像が左によってしまう
-
疑似クラス :activeが効きません
-
横並びのリストで左端がはみ出る
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
ulタグやliタグの中でbrタグ...
-
レスポンシブWebデザインでリン...
-
<ul>~</ul>が二つ続くと間に改...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
HTMLで組織図を作成する方法
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
display:table;を多段表示させたい
-
divタグ内のコンテンツが重なっ...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
テーブル内のプルダウンの下に...
-
【至急】ul li 行間調整ができ...
おすすめ情報