![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
ウインドウを狭めてもレイアウトが崩れない方法を教えて下さい。
内容は、一番上にタイトルとしての画像を表示させて、その下に画像を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>
![「ウインドウを狭めてもレイアウトが崩れない」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/6/804116_5497c549685f9/M.jpg)
No.3ベストアンサー
- 回答日時:
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のような様々なユーザーエージェントが混在する現在はよいのですが、どうしても3列に固定したい場合は、
<h1><!-- 「一番上にタイトルとしての画像を」ならちゃんと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><!-- 「一番上にタイトルとしての画像を」ならちゃんとh1内に書く -->
<img src="" border="0" width="300" height="60" alt="何とかのページ
No.2
- 回答日時:
仕様がわからないので、オールマイティな設定で良いなら、
<body style="text-align: center;">
<div style="width: 760px; margin:0 auto; text-align:left;">
<h1><img src="" border="0" width="300" height="60" /></h1>
<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>
<!-- 画像繰り返し -->
</div>
</body>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
画像のサイズが変わらない
-
HTMLのIMAGEに。。
-
ワードプレス max-width100%が...
-
Javascriptで画像の大きさを%指...
-
UDP通信を使うチャットプログラ...
-
CSS実装されない
-
HTMLタグのDL DT DDを使ってli...
-
html オンマウスで変化する画...
-
HTMLに横型ゲージを表示させたい
-
画像の場合のみ、下線を消す方...
-
ホームページで画像を横に並べ...
-
画像リンクの周りに線が出ます
-
auの携帯サイトで画像と画像の...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
HTML属性での「""」 「''」違い
-
ワードにコピペ、画像が表示さ...
-
<ul>~</ul>が二つ続くと間に改...
-
<h1>、<h2>と<p><div>の行間を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
inputタグでサーバにデータを送...
-
htmlで画像を2個ずつ並べていき...
-
HTMLのIMAGEに。。
-
機種依存文字、m2(平方メート...
-
favicon.ico はもういらない?
-
cssで、チェックボックスの画像...
-
UDP通信を使うチャットプログラ...
-
table で画像をピッタリとくっ...
-
水面の波紋
-
画像のサイズが変わらない
-
画像の場合のみ、下線を消す方...
-
ポップアップウィンドウのサイ...
-
ホームページで画像を横に並べ...
-
【HTML/CSS】ボタンの枠が伸び...
-
imgタグは何で囲むのが良いか
-
画像をクリックして元に戻すには
-
リンク画像のラインを消したい
-
画像をクリックして同じページ...
おすすめ情報