- ベストアンサー
ウインドウを狭めてもレイアウトが崩れない方法
- ウインドウを狭めてもレイアウトが崩れない方法を教えてください。
- 画像を固定してレイアウトを維持する方法について教えてください。
- ウインドウを狭めても画像が移動しないようにする方法について教えてください。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
HTMLの基本からやり直しです。 <br>は連続しても無視するブラウザもあります。<br>はひとつの段落内で強制的に改行させる(line-break)ための空要素です。 行区切りの強制: BR要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#edef-BR ) たとえば、住所を示す段落内で改行させるとき 東京都品川区●●町※丁目20-20 なんとかビル1F とか。決して行間を空けるための物ではありません。 は、NoBreakSPace--改行させない空白をあらわす実体参照です。tokyo to とか HTML的には、ウィンドウ幅に応じて画像が並び変わって横スクロールなしで作成するほうが、携帯電話やPDA,i-podのような様々なユーザーエージェントが混在する現在はよいのですが、どうしても３列に固定したい場合は、 <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-html401j/struct/text.html#h-9.1 )を参照。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="何とかのページ
その他の回答 (2)
- naokita
- ベストアンサー率57% (1008/1745)
仕様がわからないので、オールマイティな設定で良いなら、 <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>
お礼
無事に問題が解決しました。 有難うございます。
- wr_limited2004
- ベストアンサー率21% (271/1265)
HTMLには「スタイルシート（記述）」というものがあります。 スタイルシートを使えば、ウィンドウの大きさに依存せず、固定のフォーマットを作れますよ。 「スタイルシート」で検索し、「スタイルシート」の使い方を勉強すると、またひとつHTMLの世界が広がりますよ。 今日はヒントだけで失礼します。
お礼
無事に問題が解決しました。 有難うございます。
補足
できました。 いろいろ有難うございます。