CSS 画像をたくさん並べたい時の方法

Question

DW CC 2014を使っています。
こちらのサイトの様に、画像を3×3列のように均一に並べたい場合、どうするのが正しい方法ですか？
http://www.hearts-hair.jp/hair_catalog/bob.html

9個を一つのdivで囲むのか、3個づつdivを分けるのか。
また、画像は単に<img src="画像のパス">で貼付けていっていいのか、
リストの形式ではさんだほうがいいのか。。。

よろしくお願いいたします。

ORUKA1951 · Accepted Answer

No.4の続きです。
スタイルシートのサンプルを最後に示しておきますので、No.4の
/* この部分は後で書きます。 */
を差し替えてください。
そして、ブラウザで表示させた後ウィンドウ幅を小さくしたり大きくして表示を確認してごらんなさい。
　印刷用や携帯電話用のスタイルシートは今回は省いています。

スタイルのプロパティ{}内はDWでサポートしてくれますが、セレクタ--{}の前はDWに限らず、どのオーサリングツールでも原理的に不可能ですから自分で指定するしかありません。
　--理由は、DWは内容や文書構造を理解して、それをどう表示したいかを理解することはできないからです。

☆彡前半--@media screen and (min-width: 800px)の前まで---が３列に並べる例です。それ以降はスマホ用に書いてあります。
★ section h2{}は、header要素の子孫であるh2要素という意味ですが、これすらDWでは代行してくれない。

ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　に、HTMLは文書構造だけでスタイルシートでデザインを変えるサンプルがあります。IEやFirefoxのような代替スタイルシートを判断できるブラウザで訪問してごらんなさい。
　[表示]→[スタイル(シート)]に進み、いろいろなスタイルを選択すると表示が変わります。印刷用のスタイルも用意してあるので「印刷プレビュー」で確認できます。
　もちろん、検索エンジン最適化(SEO)もこれ以上ないレベルですし、視覚障害者のスクリーンリーダーや展示端末でも利用できますし、携帯電話でも利用できる。
　
　本題の「CSS 画像をたくさん並べたい」とは外れますが、文書構造とプレゼンテーションの分離の重要性が理解できると思います。

html,body{
	margin:0;padding:0;
	background-color:navy;
}
header,section,footer{
	width:90%;max-width:1000px;margin:0 auto;
	background-color:white;
	border:solid 1px white;
}
section{
	position:relative;z-index:10;
}
section h2{
	margin-left:160px;
}
section ul{
	margin-left:160px;
	list-style:none;
	text-align:center;
	padding:0;
}
section ul li{
	padding:0;
	display:inline-block;
	width:29%;margin:1%;height:2em;line-height:2em;
}
section ul li img{
	width:100%;height:auto;
}
section nav ul li a{
	display:block;width:100%;height:100%;
	text-decoration:none;
	background-color:yellow;
}
section nav ul li a:hover{
	background-color:orange;
}

@media screen and (min-width: 800px) {
	section nav{
		position:fixed;top:100px;left:0;height:100%;width:100%;
		text-align:left;z-index:-10;
	}
	section nav ul{
		width:90%;max-width:1000px;margin:0 auto;height:2em;
	}
	section nav ul li{
		display:list-item;
		padding:0;width:150px;height:2em;
		position:relative;
		z-index:1000;
	}
}
@media screen and (max-width: 800px) {
	section ul li{
		display:inline-block;width:47%;margin:1%;
	}
	header,section,footer{
		width:100%;
	}
	section{
		padding-top:50px;
	}
	section ul{
		margin-left:0;
	}
	section nav{
		position:absolute;top:0;width:100%;
	}
	section nav ul li{
		width:20%;
	}
	section nav ul li a{
		display:inline-block;
	}
}
@media screen and (max-width: 480px) {
	section{width:100%;}
	section ul li{width:98%;margin:0;}
}

ORUKA1951 · Answer

No.3です。「HTMLでページを作らずにプログラムに頼る。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」の典型的な例のような気がします。　これは、オーサリングツールに頼る作者の典型的に陥る間違いです。---テキストエディタで作成以上にHTMLやCSSを理解していないと間違えてしまう。 No.2での回答の ★構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … ) ★スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … ) 　の意味が分からないと思いますので、ごく簡単なサンプル上げておきます。これはテキストエディタで作成しようがDWで作成しようが同じ手順を踏みます。まず、テキストエディタなりDWなどのオーサリングツールで【文書構造】だけをを正確にマークアップします。【サンプル】 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　のDATA(右上)でチェックすると間違いをなくすることができるでしょう。 ★タブは＿に置換してあるので戻してください。 ★ 画像名はあなたのものに書き直す。なお、縦横比やサイズが異なっても構いません。大きくてもよい。 ※ 文書構造しかマークアップしてないのでメンテナンスも容易です。 ※ 文書構造しか書かれていないので、あとで好きなようにデザインできます。・同じテーマのページがあればこれをテンプレートにして作り、スタイルシートは外部ファイルにします。・そうすることでスタイルシートを書き直すことで一挙にデザインを変更できます。 ※ これはHTML5ですから、

　となっています。HTML4.01の場合は　

のようになります。　理由→『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』　wrapperとかは間違いですね。 ※ スタイルシートの説明は分けたほうが良いので次の回答で書きます。　/* この部分は後で書きます。 */　の部分を差し替えます。＿＿サンプル＿＿＿＿

＿＿

Your title

＿

＿＿

アルバム1

＿＿

アルバム2

＿＿

アルバム3

＿＿

＿＿＿

＿

ORUKA1951 · Answer

いや、たぶんmediaquery使ってる。ウィンドウ幅を狭くすると２列になるし、それ以降は画像も小さくなる。　単純に

などで・・・決してデザインのためにHTML書いてはならない。。・・・これはウェブの大原則です。 ★構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) ★スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 　とか、15年前のHTML4.01の勧告以来そうなっている。　そしてスタイルシートで、好きなようにプレゼンテーションを指定すればよい。２列だろうが３列だろうが均等配置だろうがお好きに・・・

naokita · Answer

例のサイトの内容的には、誰が見ても同一項目内のリスト（サンプルリスト例なのかな？）なのが分かると思いますから、HTML的にもUL LIで構造化します。
例のサイトだからこそ、UL LIなのです。（質問者さんの文章構造や内容が不明なので、それが正しいとか言える問題ではありません・・・）
Divだと、意味も無く画像を配置しているという事になります。

CSSは、float:left;のレスポンシブで２列/4列にしていますが、
内容的に分かりやすい画像の場合は、display: table-cell;で固定するのも面白いと思います。
（構造的にはリストなのに、デザインのみテーブル表のように表示する。表だと一瞬で比較しやすい特性があります）

10年以上も昔は、枠といえば何でもtableが多かったのですが、本来のテーブルはExcel表のような「表」としてでしか利用しません。

yambejp · Answer

表ならtableで、可変のリストならul~liでよいのでは？
imgの羅列はinlineでの処理になるので表示を調整しづらいかも

CSS 画像をたくさん並べたい時の方法

No.4の続きです。

No.3です。

いや、たぶんmediaquery使ってる。

例のサイトの内容的には、誰が見ても同一項目内のリスト（サンプルリスト例なのかな？）なのが分かると思いますから、HTML的にもUL LIで構造化します。

表ならtableで、可変のリストならul~liでよいのでは？

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング