![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
DW CC 2014を使っています。
こちらのサイトの様に、画像を3×3列のように均一に並べたい場合、どうするのが正しい方法ですか?
http://www.hearts-hair.jp/hair_catalog/bob.html
9個を一つのdivで囲むのか、3個づつdivを分けるのか。
また、画像は単に<img src="画像のパス">で貼付けていっていいのか、
リストの形式ではさんだほうがいいのか。。。
よろしくお願いいたします。
No.5ベストアンサー
- 回答日時:
No.4の続きです。
スタイルシートのサンプルを最後に示しておきますので、No.4の
/* この部分は後で書きます。 */
を差し替えてください。
そして、ブラウザで表示させた後ウィンドウ幅を小さくしたり大きくして表示を確認してごらんなさい。
印刷用や携帯電話用のスタイルシートは今回は省いています。
スタイルのプロパティ{}内はDWでサポートしてくれますが、セレクタ--{}の前はDWに限らず、どのオーサリングツールでも原理的に不可能ですから自分で指定するしかありません。
--理由は、DWは内容や文書構造を理解して、それをどう表示したいかを理解することはできないからです。
☆彡前半--@media screen and (min-width: 800px)の前まで---が3列に並べる例です。それ以降はスマホ用に書いてあります。
★ section h2{}は、header要素の子孫であるh2要素という意味ですが、これすらDWでは代行してくれない。
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
に、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;}
}
No.4
- 回答日時:
No.3です。
「HTMLでページを作らずにプログラムに頼る。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」の典型的な例のような気がします。
これは、オーサリングツールに頼る作者の典型的に陥る間違いです。---テキストエディタで作成以上に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ですから、<header></header><section></section><nav></nav><footer></footer>
となっています。HTML4.01の場合は
<div class="header"></div><div class="section"></div>のようになります。
理由→『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
wrapperとかは間違いですね。
※ スタイルシートの説明は分けたほうが良いので次の回答で書きます。
/* この部分は後で書きます。 */ の部分を差し替えます。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="ORUKA">
_<link rel="stylesheet" href="css/style.css">
<style media="screen" >
<!--
/* この部分は後で書きます。 */
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
_</header>
_<section>
__<h2 id="album1">アルバム1</h2>
__<ul class="photoAlbum">
___<li><img src="./images/1.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/2.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/3.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/1.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/2.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/3.jpg" width="640" height="480" alt="写真A"></li>
__</ul>
__<h2 id="album2">アルバム2</h2>
__<ul class="photoAlbu">
___<li><img src="./images/4.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/5.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/6.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/4.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/5.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/6.jpg" width="640" height="480" alt="写真A"></li>
__</ul>
__<h2 id="album3">アルバム3</h2>
__<ul class="photoAlbum">
___<li><img src="./images/1.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/2.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/3.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/1.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/2.jpg" width="640" height="480" alt="写真A"></li>
___<li><img src="./images/3.jpg" width="640" height="480" alt="写真A"></li>
__</ul>
__<nav>
___<ul>
____<li><a href="#album1">アルバム1</a></li>
____<li><a href="#album2">アルバム2</a></li>
____<li><a href="#album3">アルバム3</a></li>
___</ul>
__</nav>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>
No.3
- 回答日時:
いや、たぶんmediaquery使ってる。
ウィンドウ幅を狭くすると2列になるし、それ以降は画像も小さくなる。単純に
<ul id="photoAlbum">
<li><img src="" width="" height="" alt=""></li>
<li><img src="" width="" height="" alt=""></li>
・・・・・
<li><img src="" width="" height="" alt=""></li>
と羅列しておいて、・・・それならSEOの上からも、またテキストリーダーでもなんでもござれ。
あとはスタイルシートで、任意にデザインすればよい
1200px以上のウィンドウなら、表示領域を1200pxにして中央に配置、その1200px内に3列均等配置で
800~1200程度なら、ウィンドウ幅に応じて表示領域が縮小し、3個単位で:nth-childでも使って3個配置して画像を並べる。画像はそれに合わせて伸縮するようにすればよい
それより小さい--スマホなどでは2列に並べる。
携帯電話だと縦一列とか
>こちらのサイトの様に、画像を3×3列のように均一に並べたい場合、どうするのが正しい方法ですか?
根本的に間違っている。DIVで囲むとかは一切関係ない。
HTMLは文書構造を記述するだけですよ。画像リストなら<ol><ul><dl>などで・・・決してデザインのためにHTML書いてはならない。。・・・これはウェブの大原則です。
★構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
とか、15年前のHTML4.01の勧告以来そうなっている。
そしてスタイルシートで、好きなようにプレゼンテーションを指定すればよい。2列だろうが3列だろうが均等配置だろうがお好きに・・・
No.2
- 回答日時:
例のサイトの内容的には、誰が見ても同一項目内のリスト(サンプルリスト例なのかな?)なのが分かると思いますから、HTML的にもUL LIで構造化します。
例のサイトだからこそ、UL LIなのです。(質問者さんの文章構造や内容が不明なので、それが正しいとか言える問題ではありません・・・)
Divだと、意味も無く画像を配置しているという事になります。
CSSは、float:left;のレスポンシブで2列/4列にしていますが、
内容的に分かりやすい画像の場合は、display: table-cell;で固定するのも面白いと思います。
(構造的にはリストなのに、デザインのみテーブル表のように表示する。表だと一瞬で比較しやすい特性があります)
10年以上も昔は、枠といえば何でもtableが多かったのですが、本来のテーブルはExcel表のような「表」としてでしか利用しません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html/cssの、navを2段にする...
-
レスポンシブWebデザインでリン...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
テーブル内のプルダウンの下に...
-
ulやol、どの階層に居てもOKなc...
-
(HP作成)メニューバーのプル...
-
ulタグやliタグの中でbrタグ...
-
<ol><li> 左側にスペースがで...
-
メニューで
-
HTMLで組織図を作成する方法
-
HTMLもしくはCSSのULでリンクを...
-
ulやolのリストを横並びに表示...
-
番号付きリスト(<Ol><Li>・・...
-
画像はDIVタグとPタグの両方で...
-
ページを開いているときのリン...
-
複数行にまたがる括弧を表示し...
-
サイドメニューのロールオーバ...
-
divタグ内のコンテンツが重なっ...
-
<div>と<div>の隙間を無くす方法
マンスリーランキングこのカテゴリの人気マンスリー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 行間調整ができ...
おすすめ情報