- 締切済み
html、cssについて教えて頂きたいのですが
現在ｈｔｍｌ、cssについて勉強中で、仮想サイトを制作してみました。ですが、ウインドウサイズを変更、ノートパソコンなどで表示するとレイアウトが崩れてしまいます。 解決方法となるとスクリプトを使用するしかないのでしょうか？
- yokoyama1224
- お礼率16% (1/6)
- その他（インターネット・Webサービス）
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- 4610-564
- ベストアンサー率29% (238/799)
補足を見たのですが、正直CSSの記述だけだと BOXの大きさしかわからないので それをどうくみ上げたかのHTMLの記述も必要です。 家の形にならないと 材木と釘だけ見せられて どう組んだのかがわからないので、こちらとしても なんで形にならないんだろうね？ としか回答できません。
- wr_limited2004
- ベストアンサー率21% (271/1265)
cssをどのように使っているのかわかりませんが、 大きい画面では１行で表示されるのに、 小さい画面では２行で表示されてしまう と言うレベルなら、 HTMLの機能に「スタイルシート」があるので、 それだけで対応できると思います。
- 4610-564
- ベストアンサー率29% (238/799)
スクリプト以前の問題だと思われます。 表示のウインドウサイズが変わったときにレイアウトが崩れるって言うのは 親のCSSのBOXのサイズが自由サイズになっていて それに子や孫のCSSBOXが入っているんじゃないでしょうか。その作り方だと、その製作したサイズ以下のモニターを使えば段が下がってばらばらになるのは当たり前です。 また、BOXをちゃんと数値指定して配置しているのでしょうか？ 作り方が書いてないですから、なんともいいようがありませんけど もっともっと基本的なところが抜けていると思われます。
補足
早速のご回答ありがとうございます。 内容を見ていただきたいのですが、よろしいでしょうか？ ｃｓｓは以下のとおりです。 どこか間違いはありますでしょうか？ html { margin-bottom:1px; height:100%; overflow-y:scroll;} body { color: #6A6D75; margin:0; padding:0; background:#fff; font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; font-size:12px; background-color: #FCFCFC; } ul, li{ list-style-type: none;} .fixed{ position:fixed;} .clear{ clear:both;} #wrapper{ width:1000px; height:0 auto; overflow-x:auto;} /*--ヘッダー--*/ #header{ width:100%;} #header img{ margin: 20px 0 0 20px; background-color: #FCFCFC;} /*--ヘッダーメニュー--*/ #header_menu{ top:20px; right: 24px; margin: 0; } #header_menu li{ display:inline-block; padding-left: 10px;} #header_menu li a{ text-indent: -9999px;} /*--メインメニュー 左--*/ #left_menu{ width:300px; left:5%; position: fixed; float: left; background: url(img/border_right.gif) repeat-y right top; height:100%;} #global_menu{ top:70%; left:30%; position: absolute;} #global_menu li{ margin:0 0 15px 0; text-indent: -9999px;} /*--ロールオーバー--*/ #left_menu li#home_ic a{ display:block; width:112px; height: 34px; background:url(img/home_off.png) no-repeat ; } #left_menu li#home_ic a:hover{ display:block; width:112px; height: 34px; background:url(img/home_on.png) no-repeat;} #left_menu li#about_ic a{ display:block; width:113px; height: 36px; background:url(img/about_off.png) no-repeat;} #left_menu li#about_ic a:hover{ display:block; width:113px; height: 36px; background:url(img/about_on.png) no-repeat;} #left_menu li#contact_ic a{ display:block; width:143px; height: 25px; background:url(img/contact_off.png) no-repeat;} #left_menu li#contact_ic a:hover{ display:block; width:143px; height: 25px; background:url(img/contact_on.png) no-repeat;} /*--コンテンツ 右--*/ #right_col{ width:680px; float:right; clear:both;} #content_center{ width:680px; position:absolute; margin: 100px 0 0 200px; clear: both;} #content_center h1 img{ top:-3%; right:-25.3%; position:fixed;} #right_col #servis{ background: url(img/sv_kihon.gif) no-repeat; width:480px; height: 340px; float:right; margin-top:114px; right: 8.2%; position:fixed;} #right_col #servis p{ line-height: 1.7; padding-top: 20px;} #right_col #frame_process{ background: url(img/frame_process.gif) no-repeat; width:361px; height: 1153px; margin-top:100px; margin-left: -50px; margin-bottom: 100px; float:left;} #frame_process h2{ margin-top: 55px; } #frame_process h2 img{ margin-left: 10px; } #frame_process p{ padding-left:25px; margin-top: -17px;} #frame_process span img{ margin-left: 172px; margin-bottom: -25px;} /*--フッター--*/ #footer{ width:100%; top:96%; clear:both;} #footer p{ float: right; font-size: 7px;}
- hwoa1024
- ベストアンサー率36% (122/336)
cssだけで大丈夫です。 widthやfloat等を決めてあげれば崩れないようになると思います。
補足
早速のご回答ありがとうございます。 内容を見ていただきたいのですが、よろしいでしょうか？ ｃｓｓは以下のとおりです。 html { margin-bottom:1px; height:100%; overflow-y:scroll;} body { color: #6A6D75; margin:0; padding:0; background:#fff; font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; font-size:12px; background-color: #FCFCFC; } ul, li{ list-style-type: none;} .fixed{ position:fixed;} .clear{ clear:both;} #wrapper{ width:1000px; height:0 auto; overflow-x:auto;} /*--ヘッダー--*/ #header{ width:100%;} #header img{ margin: 20px 0 0 20px; background-color: #FCFCFC;} /*--ヘッダーメニュー--*/ #header_menu{ top:20px; right: 24px; margin: 0; } #header_menu li{ display:inline-block; padding-left: 10px;} #header_menu li a{ text-indent: -9999px;} /*--メインメニュー 左--*/ #left_menu{ width:300px; left:5%; position: fixed; float: left; background: url(img/border_right.gif) repeat-y right top; height:100%;} #global_menu{ top:70%; left:30%; position: absolute;} #global_menu li{ margin:0 0 15px 0; text-indent: -9999px;} /*--ロールオーバー--*/ #left_menu li#home_ic a{ display:block; width:112px; height: 34px; background:url(img/home_off.png) no-repeat ; } #left_menu li#home_ic a:hover{ display:block; width:112px; height: 34px; background:url(img/home_on.png) no-repeat;} #left_menu li#about_ic a{ display:block; width:113px; height: 36px; background:url(img/about_off.png) no-repeat;} #left_menu li#about_ic a:hover{ display:block; width:113px; height: 36px; background:url(img/about_on.png) no-repeat;} #left_menu li#contact_ic a{ display:block; width:143px; height: 25px; background:url(img/contact_off.png) no-repeat;} #left_menu li#contact_ic a:hover{ display:block; width:143px; height: 25px; background:url(img/contact_on.png) no-repeat;} /*--コンテンツ 右--*/ #right_col{ width:680px; float:right; clear:both;} #content_center{ width:680px; position:absolute; margin: 100px 0 0 200px; clear: both;} #content_center h1 img{ top:-3%; right:-25.3%; position:fixed;} #right_col #servis{ background: url(img/sv_kihon.gif) no-repeat; width:480px; height: 340px; float:right; margin-top:114px; right: 8.2%; position:fixed;} #right_col #servis p{ line-height: 1.7; padding-top: 20px;} #right_col #frame_process{ background: url(img/frame_process.gif) no-repeat; width:361px; height: 1153px; margin-top:100px; margin-left: -50px; margin-bottom: 100px; float:left;} #frame_process h2{ margin-top: 55px; } #frame_process h2 img{ margin-left: 10px; } #frame_process p{ padding-left:25px; margin-top: -17px;} #frame_process span img{ margin-left: 172px; margin-bottom: -25px;} /*--フッター--*/ #footer{ width:100%; top:96%; clear:both;} #footer p{ float: right; font-size: 7px;}
補足
お返事ありがとうございます。 申し訳ありませんｈｔｍｌも記載させて頂きますので、どうかよろしくお願いいたします。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title></title> <link href="metiersdart.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- head --> <div id="header" class="fixed"><img src="img/md_logo.gif" alt="" width="210" height="56" /></div> <div id="wrapper"> <!-- menu_left --> <div id="left_menu" class="fixed"> <ul id="global_menu"> <li id="home_ic"><a href="home.html"></a></li> <li id="about_ic"><a href="about.html"></a></li> <li id="servis_ic"><a href="servis.html"></a></li> <li id="contact_ic"><a href="contact.html"></a></li> </ul> </div> <!-- content_right--> <div id="right_col"> <div id="content_center"> <h1><img src="img/titile_h.gif" /></h1> <ul id="header_menu" class="fixed"> <li id="head_fb"><a href="">フェイスブック</a></li> <li id="head_twi"><a href="">ツイッター</a></li> <li id="head_blog"><a href="">ブログ</a></li> <li id="head_contact"><a href="">お問い合わせ</a></li> </ul> <div id="frame_process"> <h2><img src="img/process_1.png" width="246" height="18" /></h2> <p></p> <span><img src="img/arrow.gif" /></span> <h2><img src="img/process_2.png" width="246" height="18" /></h2> <p></p> <span><img src="img/arrow.gif" /></span> <h2><img src="img/process_3.png" width="246" height="18" /></h2> <p></p> <span><img src="img/arrow.gif" /></span> <h2><img src="img/process_4.png" width="246" height="18" /></h2> <p></p> <span><img src="img/arrow.gif" /></span> <h2><img src="img/process_5.png" width="246" height="18" /></h2> <p></p> <span><img src="img/arrow.gif" /></span> <h2><img src="img/process_6.png" width="246" height="18" /></h2> <p></p> <span><img src="img/arrow.gif" /></span> <h2><img src="img/process_7.png" width="246" height="18" /></h2> <p></p> </div> <div id="servis" > <p></p> </div> </div> </div> <!-- ▼wrapper end --> </div> <!-- foot --> <div id="footer" class="fixed"> <p>Copyright © All Rights Reserved.</p> </div> </body> </html>