ウインドウを狭めてもレイアウトが崩れない方法

解決済

質問者：orehatens
質問日時：2010/12/17 19:02
回答数：3件

ウインドウを狭めてもレイアウトが崩れない方法を教えて下さい。

内容は、一番上にタイトルとしての画像を表示させて、その下に画像を３列で何列ものせる。
ウインドウを大きく広げたときは、それらの画像を中央に表示させてレイアウトを崩さないようにする。

下のような感じでは、ウインドウを狭めると画像が勝手に移動してしまいます。
全てを固定にしたいです。
お手本を教えて頂きたいです。よろしくお願いいたします。
添付画像が理想です。
ウインドウを狭めても画像が固定されている瞬間をイメージ化したものです。

<img src="" border="0" width="300" height="60" />
<br>
<br>
<br>
<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>
<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>
<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>
<br>
<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>
<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>
<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>
<br>
<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>
<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>
<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2010/12/18 00:09

HTMLの基本からやり直しです。

<br>は連続しても無視するブラウザもあります。<br>はひとつの段落内で強制的に改行させる(line-break)ための空要素です。
行区切りの強制: BR要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
たとえば、住所を示す段落内で改行させるとき
東京都品川区●●町※丁目20-20
なんとかビル1F
とか。決して行間を空けるための物ではありません。

は、NoBreakSPace--改行させない空白をあらわす実体参照です。tokyoto とか

HTML的には、ウィンドウ幅に応じて画像が並び変わって横スクロールなしで作成するほうが、携帯電話やPDA,i-podのような様々なユーザーエージェントが混在する現在はよいのですが、どうしても３列に固定したい場合は、
<h1>
<img src="" border="0" width="300" height="60" alt="何とかのページ(タイトル)"/>
</h1>
<div class="album">
<a href="" ><img src="" alt="" width="250" height="166" /></a>
<a href="" ><img src="" alt="" width="250" height="166" /></a>
<a href="" ><img src="" alt="" width="250" height="166" /></a>
<a href="" ><img src="" alt="" width="250" height="166" /></a>
<a href="" ><img src="" alt="" width="250" height="166" /></a>
</div>
でよい。
　★XHTMLなら<br>ではなく<br/>でなきゃならない。
　★HTMLなら<img />ではなく、<img>
　★targetは非推奨なので記述しない。ユーザーが別ウィンドウで開きたけりゃ右クリックで選択するし、別のタブで開きたけりゃセンタークリックする。作者が強制しない!!

　なおプロッ内は羅列でよい(<br>の必要もないし、横に続けて書く必要もない!!
9.1 空白類 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )を参照。HTML上で改行しようがタブで見えやすくしようが無視される。

　そのうえでスタイルシートで
a img{border:none;}/* リンクのある画像はここで一括してボーダーを消す */
div.album{
margin-top:0px;
width:760px;
margin-left:auto;margin-right:auto;
text-align:center;/* 念のためセンターに */
}
h1{
margin-bottom:10px;/*タイトルの下の余白はここで決める */
}

すなわち
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>Untitled</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
a img{border:none;}
div.album{
margin-top:0px;
width:760px;
margin-left:auto;margin-right:auto;
text-align:center;
}
h1{
margin-bottom:10px;
}
</head>
<body>
<h1>
<img src="" border="0" width="300" height="60" alt="何とかのページ