ウインドウを狭めてもレイアウトが崩れない方法
- ウインドウを狭めてもレイアウトが崩れない方法を教えてください。
- 画像を固定してレイアウトを維持する方法について教えてください。
- ウインドウを狭めても画像が移動しないようにする方法について教えてください。
- ベストアンサー
ウインドウを狭めてもレイアウトが崩れない方法
ウインドウを狭めてもレイアウトが崩れない方法を教えて下さい。 内容は、一番上にタイトルとしての画像を表示させて、その下に画像を３列で何列ものせる。 ウインドウを大きく広げたときは、それらの画像を中央に表示させてレイアウトを崩さないようにする。 下のような感じでは、ウインドウを狭めると画像が勝手に移動してしまいます。 全てを固定にしたいです。 お手本を教えて頂きたいです。よろしくお願いいたします。 添付画像が理想です。 ウインドウを狭めても画像が固定されている瞬間をイメージ化したものです。 <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>
- orehatens
- お礼率89% (76/85)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （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/1266)
HTMLには「スタイルシート（記述）」というものがあります。 スタイルシートを使えば、ウィンドウの大きさに依存せず、固定のフォーマットを作れますよ。 「スタイルシート」で検索し、「スタイルシート」の使い方を勉強すると、またひとつHTMLの世界が広がりますよ。 今日はヒントだけで失礼します。
お礼
無事に問題が解決しました。 有難うございます。
関連するQ&A
- HTMLタグ
画像にもありますが、取り扱い商品・液晶モニタ・パソコンパーツなどの横に横2列縦3列のテーブル、その横に縦５列横1列のテーブルを付けたいのですが、どうしてもわかりません。 わかる方居ましたらお願いします。 現在こんな感じです <p><font color="#f70006"> <strong>他には無いアイテムがここにはあります</strong> </font> <br> <img style="WIDTH: 983px; HEIGHT: 102px" border="0" alt="" src="素材/top.png" width="1000" height="118"><br> <img border="0" alt="" src="素材/home.png" width="200" height="73"><img border="0" alt="" src="素材/商品一覧.png" width="200" height="73"><img border="0" alt="" src="素材/輸入.png" width="200" height="73"><img border="0" alt="" src="素材/買付.png" width="200" height="73"><img style="WIDTH: 169px; HEIGHT: 73px" border="0" alt="" src="素材/問合.png" width="170" height="73"><br> <br> <br> <br><img border="0" alt="" src="素材/取り扱い.png" width="164" height="49"><br> <img border="0" alt="" src="素材/液晶.png" width="164" height="49"><br> <img border="0" alt="" src="素材/ａｐａｒｅｒｕ.png" width="164" height="49"><br> <img border="0" alt="" src="素材/pasokon.png" width="164" height="49"><br> <img border="0" alt="" src="素材/周辺機器.png" width="164" height="49"><br> <img border="0" alt="" src="素材/マルチメディア.png" width="164" height="49"><br> <img border="0" alt="" src="素材/自動車.png" width="164" height="49"><br> <br> <br> <br> <img border="0" alt="" src="素材/サポート.png" width="166" height="63"><br> <img border="0" alt="" src="素材/輸入について.png" width="166" height="63"><br> <img border="0" alt="" src="素材/お問い合わせ.png" width="166" height="63"><br> <img border="0" alt="" src="素材/会社概要.png" width="166" height="63"> </p> 他にいい作り方など、オススメ等ありましたら何でもお願いします
- ベストアンサー
- その他（インターネット・Webサービス）
- htmlタグ一括挿入
<a href="" target="_blank"><img src="" alt="" border="0" ▲▲▲/><br /></a><img src="" width="1" height="1" border="0" alt="" /> 上記のタグでの質問なのですが、style="float:left;"を▲▲▲の部分に挿入する場合一番簡単に出来るやり方などありますでしょうか？ 2000近く商品数があるので手直しだと時間が掛かりすぎるので出来れば一括に挿入するやりかた ぜひご教授頂けませんでしょうか？よろしくお願いします。
- ベストアンサー
- HTML
- ウインドウの設定
画像にリンクを貼り、新しくウインドウを開くという設定にすると <A target="_blank" href="sample1.html"><IMG src="img/sample1.jpg" width="206" height="200" border="0"></A> こうなりますが、新しく開いたウインドウの大きさを固定させたり大きさを変えられないようにしたりツールバーやアドレスバーなどを表示させないようにするにはどうしたらいいでしょうか。 http://hp.xrea.jp/を参考に色々やってみたんですが分からなくて・・・。 何卒アドバイスをよろしくお願いします。
- ベストアンサー
- HTML
- 複数のランダム表示について
現在、外部のjsを読み込み、 ランダムではなく下記の方法で ４バナー表示をしております。 【index.html】 <script type="text/javascript" src="js/banner.js"></script> 【banner.js】 document.write("<ul class=\"banner\">"); document.write("<li><a href=\"http://1.jp/\" target=\"_blank\"><img src=\"http://1.jp/img/1画像.jpg\" alt=\"1\" width=\"200\" height=\"80\" /></a><br />1テキスト</li>"); document.write("<li><a href=\"http://2.jp/\" target=\"_blank\"><img src=\"http://2.jp/img/2画像.jpg\" alt=\"2\" width=\"200\" height=\"80\" /></a><br />2テキスト</li>"); document.write("<li><a href=\"http://3.jp/\" target=\"_blank\"><img src=\"http://3.jp/img/3画像.jpg\" alt=\"3\" width=\"200\" height=\"80\" /></a><br />3テキスト</li>"); document.write("<li><a href=\"http://4.jp/\" target=\"_blank\"><img src=\"http://4.jp/img/4画像.jpg\" alt=\"4\" width=\"200\" height=\"80\" /></a><br />4テキスト</li>"); document.write("</ul>"); 【ブラウザ】 1画像.jpg 1テキスト -------- 2画像.jpg 2テキスト -------- 3画像.jpg 3テキスト -------- 4画像.jpg 4テキスト 教えて頂きたいのは、下記のように ランダム表示で４つのバナーを表示させたいのですが どうしたらいいか分かりません。 【ブラウザ】 4画像.jpg 4テキスト -------- 2画像.jpg 2テキスト -------- 1画像.jpg 1テキスト -------- 3画像.jpg 3テキスト 詳しい方おりましたらお教え頂けないでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- 初歩的かもしれませんが回り込みが上手くできません
初歩的かもしれませんが回り込みが上手くできません イメージ的には、図のようなdivを４つ横に並べて改行、同じように繰り返したいです。 ■■■■ ■■■■ しかし、下記の様にすれば ■■■ ■ ■■■ ■ に、なってしまいます。 こういう場合、どうすればいいのでしょうか？？ <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave1</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave2</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave3</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave4</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave5</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave6</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave7</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave8</a></div>
- ベストアンサー
- CSS
- アフィリエイトリンクの画像のサイズを変更するには？
現在Seesaaでブログを開設していますが、そのブログの中にA8.netにある楽天アフィリエイトリンクをA8wappenで作成しています。 そこで、質問なのですが、リンク画像のサイズを変更したいのですが、やり方がわかりません。因みにＨＴＭＬは下記のとおりです。 <a href="http://～" target="_blank"> <img border="0" alt="Click Here!" src="http://～.jpeg"></a> <img border="0" width="1" height="1" src="http://～" alt=""> 上のwidthやheightの数値を変えてみたのですが、上手くいきません。 よろしくお願いします。
- ベストアンサー
- ブログ
- HTMLの質問です。画像を並べて名称を表記します。
ホームページビルダーで作成しました。 今回の例では画像を横4枚、縦2段に並べて画像下にテキストを表記します。 各画像にはリンクを貼っています。 ところが画像下のテキストの右端だけがダブって表記されます。 具体的にはタイトル4とタイトル8というテキストです。 問題点が分かる方はご教授願います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>ホームページのタイトル</title> <link rel="stylesheet" type="text/css" href="hpb9tm04_8.css" id="hpb9tm04_8" a:link { text-decoration:underline; color:#0000FF; } a:visited { text-decoration:underline; color:#9900CC; } a:active { text-decoration:underline; color:#00FF00; } a:hover { text-decoration:underline; color:#00FF00; position:relative;top:3px;left:3px; }</style> </head> <body style="color: #000000; background-color: #ffffff" background="壁紙画像"> <div> <table class="hpb-main" id="HPB_LAYOUTTABLE_05" cellspacing="0" cellpadding="0" width="760" border="0"> <tbody> <tr> <td class="hpb-cnt-cell1" id="HPB_LAYOUT_LMH0" valign="top" align="center" height="18"> <table class="hpb-hmenu1" id="HPB_LINK_MENU_TABLE_01" cellspacing="0" cellpadding="0" align="center" border="0"> </table> </td> </tr> <tr> <td class="hpb-cnt-cell3-x" valign="top" align="center"><div style="float:left"><img height="43" alt="ホームページのタイトル" width="232" border="0" src="ホームページのタイトル画像" /> <table class="hpb-lb-tb1" cellspacing="0" cellpadding="0" align="center" border="0"> <tbody> <tr> <td class="hpb-lb-tb1-cell3" id="HPB_LAYOUT_CONTENTS" valign="top" height="400"> <p><div style="float:left"><img height="37" alt="ホームページのサブタイトル" width="510" border="0" src="ホームページのサブタイトル画像" /></p> <p> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル1" width="140" border="0" src="画像" /><br />タイトル1</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル2" width="140" border="0" src="画像" /><br />タイトル2</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル3" width="140" border="0" src="画像" /><br />タイトル3</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル4" width="140" border="0" src="画像" /><br />タイトル4</div></a> <div style="clear:both"></div></p> <p> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル5" width="140" border="0" src="画像" /><br />タイトル5</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル6" width="140" border="0" src="画像" /><br />タイトル6</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル7" width="140" border="0" src="画像" /><br />タイトル7</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル8" width="140" border="0" src="画像" /><br />タイトル8</div></a> <div style="clear:both"></div></p> <p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </body> </html>
- ベストアンサー
- HTML
- テーブル幅を完全に指定したい
テーブル幅の指定方法を教えてください。 以下のような記述のテーブルを何列も羅列して 表を作ろうと思っています。 alt="小A"～alt="小D" のところは 項目ごとのアイコン画像が入り、その項目に該当するものが無い場合は空白となるような表です。 実際にブラウザで表示してみると、widthの設定はしているのに、空白をつくると 若干ですが横幅が変わってしまい、表として並べたときにそのズレが目立ちます。 何がいけないのか、お知恵を拝借できませんでしょうか。 宜しくお願い致します。 以下、その表の一部である テーブルになります。 <table bordercolor="#ffffff" width="520" height="80" align="center" cellspacing="3"> <tr><td bgcolor="#ffcccc"> <table> <tr> <td width="100" bgcolor="#ffcccc" align="center" valign="middle"> <a href="★" target="_blank"><img src="■.gif" width="80" height="60" border="0" class="pict"/></a> </td> <td width="260" align="left" valign="center"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよ </td> <td valign="center"> <img alt="中" src="■.gif" width="80" height="60" class="pict" /> </td> <td width="25"><a href="★" target="_blank"><img alt="小A" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小B" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小C" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小D" src="■.gif" width="25" height="60" class="pict" /></a></a></td> </tr> </table></td></tr></table>
- ベストアンサー
- HTML
- 楽天ブログの日記を書こうとしたときにエラーが出てしまいます。
楽天ブログの日記を書こうとしたときにエラーが出てしまいます。 楽天ブログの企画の、プティのサンプリングに応募したいのですが、 日記を書いて、投稿しようとすると、エラーが出てしまいます。 画像とリンクなのですが、この部分を消してしまうと、応募できないようなので、 どう直したら良いのかを知りたいです。 ★このリンクでエラーが出ます★ <P> </P><P><B><U><A href="http://item.rakuten.co.jp/putitkwork/putit_03/" target=_blank>芸能人も愛用中の今話題のプティ</A></U></B></P><P><A href="http://item.rakuten.co.jp/putitkwork/putit_03/" target=_blank><IMG height=100 alt=""src="http://plaza.rakuten.co.jp/inc/campaign/sampling_tieup/20101001/img/img59069370.jpg" width=100 border=0></A></P> ■問題のエラー部分は、この部分です■ <IMG height=100 alt=""src="http://plaza.rakuten.co.jp/inc/campaign/sampling_tieup/20101001/img/img59069370.jpg" width=100 border=0> よろしくお願いします。
- ベストアンサー
- ブログ
- FLASH内にＨＴＭＬタグを表示させる方法について
FLASHで作成するファイルの中に、HTMLタグを組み込むことは可能でしょうか？ 調べたところ、jpg画像は外部からでも読み込めるということですが、 同じように、HTMLタグも読み込むことは出来ないのでしょうか？ 組み込みたいタグは以下のようなものです。 <A HREF="URL" target="_blank">リンク先の名前</A> <img border="0" width="1" height="1" src="画像" alt=""> ご存知の方、よろしくお願いします。
- ベストアンサー
- グラフィックソフト
補足
できました。 いろいろ有難うございます。