- 締切済み
ブラウザの幅を狭くしてもレイアウトが崩れない方法
ブラウザのサイズを縮小すると画像のようにレイアウトが崩れます。 ウェブ製作の学習をしている初心者です。 現在wrap(container)を1000pxに設定しています。 せめてmin-width: 900pxあたりまではレイアウトが崩れず縮小できるようにしたいと思っています。（スマホ、タブレット用のレスポンシブデザイン”にする必要はなく単にＰＣ上でブラウザの画面を狭くしたケースについての話です。） 現在以下のような記述をしています。ログイン画面なので縦スクロールはなく画面の幅いっぱいに使えます。 レイアウトもうまく並んでくれず、混乱している状態です。 画像ロゴ、フォーム、ログインボタンをきれいに横並びにして、画面の縦横中央にもってきたいと考えています。ちから技でなんとかしたのですが、ブラウザ画面を少し縮小すると崩れてしまいます。 どなたかウェブ制作のできる方いらっしゃいましたら訂正、指摘等を下さい。 宜しくお願いします。 <HTML> <div id="container"> <!--↓main contents↓--> <main> <!-- ↓login-box↓ --> <div id="login-box"> <img src="img/logo2.jpg" alt="ロゴマーク"> <!--↓form login↓--> <form action="index.php" method="post"> <fieldset id="login"> <p><input autofocus type="text" name="login_id" value="'>"placeholder="ユーザーID" minlength="4" maxlength="50" required></p> <p><input type="password" name="pass" value=" ''> placeholder="パスワード" minlength="5" maxlength="20" required></p> <p id="login"><input type="submit" name="login" value="ログイン"> </p> </fieldset> </form> <!--↑form login↑--> </div> <!--↑login-box↑ --> </main> <!--↑main contents↑--> </div> <!--↑container↑--> ---------------------------------------------------- CSS /*↓maincontents↓*/ main fieldset { position: relative; } #login-box { display: flex; justify-content: center; align-items: center; } #login-box form { width: 380px; margin-left: 20px; } #login-box form p:nth-of-type(3) { display: inline-block; position: relative; } #login-box form input[type="submit"] { width: 70px; height: 70px; background-color: #ec9000; }
- blueletter12345
- お礼率27% (26/94)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- kozax05
- ベストアンサー率100% (2/2)
レスポンシブデザインを取らずに画面縮小で問題無いのであれば楽にできますよ。 画面サイズが変わった時のイベントで以下を実行する。 var nRit = 画面サイズを計算して縮小率をセットする $("#container").css("transform-origin", "top left"); $("#container").css("transform", "scale(" + nRit + ")");
関連するQ&A
- IE6のレイアウト崩れ
お世話になります。 下記の内容でレイアウトをしております。 firefox3.08ではほぼ思い通りですが、 IE6では、menuがmainの左下に入り込んでしまい、 mainが真ん中より少し左にずれてしまうのです。 解決策を教えてください。 情報が足らないようでしたら、ご連絡下さい、宜しくお願い致します。 body { font-size : medium; } div#container { width : 730px; } div#header { font-size : 12px; width : 725px; } div#navi { width : 725px; clear : both; font-size : 12px; } .topicpath{ clear : both; width : 725px; margin : 3px 0 3px 0; } div#main{ float : right; width : 540px; } div#menu{ float : left; width : 170px; font-size : 12px; } div#footer { width : 725px; clear : both; font-size : 75%; } <div id="container"> <div id="header"> </div> <div id="navi"> </div> <div class="topicpath"> </div> <div id="main"> </div> <div id="menu"> </div> <div id="footer"> </div> </div>
- ベストアンサー
- HTML
- フォームのレイアウト崩れを防ぐ方
添付画像のようなフォームのフィールドセットを作りました。 画面サイズ100%の場合は添付画像左側のように整った状態です。 が、画面の右側から縮小すると半分あたりでガタッとレイアウトが崩れます。 フィールドセットの下はjqueryのデータテーブルズを使用しています。縮小した分文字数などは 減りますがレイアウトは大きく崩れません。 フォームの方もせめて画面の半分程度まで縮小してもレイアウトが大崩れしないようにする方法はありますか？ また１から作り直すには時間がたりません。 <div>等ではさんでにクラスやIDをつけCSSでなんとか設定するような方法はありますでしょうか？ 以下は（凡そ）の記述です。 初心者ですのでレスポンシブデザインなどもあまり理解できていません。 何かいいやり方をご存知のかたいらっしゃいましたら教えてください。よろしくお願いします。 ＜HTML＞ <form action="staff_order.php" id="entry" method="post"> <fieldset id="staff_order"> <label for="user_id"><span class="required">*</span>●●●:</label> <select name="user_id" autofocus required> <option value="" selected> 選択してください</option> <?php foreach($rows_students as $student){ print '<option value="' . $student["user_id"] . '">' . $student["student_name"] . '</option>\n'; } ?> </select> </div> <div> <label for="title"><span class="required">*</span>●●●:</label> <input type="text" name="title" size="80" maxlength="100" required d="title" style="border-radius:0.5em;"> </div> <div><label for="date"><span class="required">*●●●: </span＞ </label> <input type="date" name="date" required id="date"> </div> -> <div><label for="point"><span class="required">*</span>●●●:</label> <input type="number" name="point" min="0" max="1000" required id="point"><b style="color: #411C00;"> P</b></div> <label for="remarks" class="order_remarks">●●:</label> <textarea name="remarks" rows="3" cols="60" maxlength="500" id="remarks"></textarea></div><p class="notes">(*)は必須項目です </p> <div class="so_button"><button type="submit" name="confirm" value="登録">登録</button> </div> </fieldset> </form> ＜CSS＞ input:focus, textarea:focus { background-color: #ffffcc; } button, input, select, textarea { font-family: inherit; font-size: 100%; padding-left: 5px; outline: none; } input[type=number], input[type=date] { text-align: right; padding-right: 8px; } input, select, textarea { border: solid 1px #CCC; border-radius: 3px; box-shadow: 0px 0px 5px #CCC inset; } /*↓form enry↓*/ form#entry fieldset#staff_order { border: 1px solid #666666; box-shadow: 0px 0px 2px; background-color: #bed487; border-radius: 0.5em; width: 90%; min-width: 90%; padding-top: 25px; margin-bottom: 25px; }
- 締切済み
- CSS
- floatを使ったレイアウトのくずれについて
Dreamweaver8で2カラムレイアウトのサイトを制作しています。 一番上からheader、トップ画像、ナビゲーションが続き、その下に2カラムのボックスがあります。 ボックスの左をコンテンツのAボックス(main02)、ボックスの右側をメニューのBボックス(navcontainer)とします。 containerの幅は776px、Aボックスの幅510px、Bボックスの幅230pxとし（各々width,paddingの合計）containerの幅に収まるように定めています。 しかし、Dreamweaverの作成画面では、Aボックスの文字は定めた幅510pxで折り返されるにもかかわらず、ボックス自体ははそれより100px以上も多い625pxまで広がり、Bボックスとの合計が766pxに収まりきれないのでメニューのBボックスは上、コンテンツのAボックスが下にずれてしまいます。 それでもプレビューすると、IE7、safari、firefox では正常に表示され、IE6だけが制作画面のとおりずれて表示されます。 どうしてこのようになるのでしょうか。 間違いを訂正いただけるとありがたいです。 /* CSS */ body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; } #container { width:776px; margin:0px auto 0px auto; background-image:url(main.gif); background-repeat:repeat-y; } #header { width:776px; height:65px; margin :0px auto 0px auto; } #main02 { width:410px; float:left; font-size:13px; color:#333; text-align:left; line-height: 1.5em; padding: 20px 50px 20px 50px; } #navcontainer{ width: 200px; margin-bottom:15px; float:right; padding: 30px 30px 0 0; } #navcontainer ul{ list-style: none; margin: 0; padding: 0; border: none; line-height:120%; font-size:12px; font-weight:bold; } #navcontainer li{ margin-bottom: 5px; border-bottom:1px dashed #666; background:url(menu_list.gif) left center; background-repeat:no-repeat; padding-left:15px; } #navcontainer li a{ display: block; padding: 5px 5px 5px 7px; text-decoration: none; width: 100%; } .clear { clear: both; } -------------- /* html */ <html> <body> <div id="container"> <div id="header"><img src="○○" </div> <div id="top2_m"><img src="○○" /></div> <div id="navi"><a href=○○></div> <div id="navcontainer"> <ul id="navlist"> <li>○○</li> <li>○○</li> <li>○○</li> </ul> </div> <div id="main02">○○</div> <div class="clear"></div> <div id="main">○○</div>/*ここから1カラム*/ <div id="footer">○○</div> </div> </body> </html>
- ベストアンサー
- CSS
- ウェブサイトの基本的な学習をしています
ウェブサイト作成の学習をしています。 おおよそ以下の添付画像のようなログイン画面を作成したいと思っています。 (1)ページのタイトルを記述するだけの「トピック」部分のcssですが”ログイン” という文字が垂直方向の中央に配置されません。 display: inline; にするとテキスト部分のみに背景色が適用されます。 display: inline-block; にしてもテキストの垂直方向に動いてくれません。 念のためblockをいれてみたのですが変わりません。 ちなみにページの幅、widthは1000pxです。 ＜div id="topic"＞ の部分に記述した文字列を垂直方向中央にするにはどのようなCSSを記述したり、 HTMLの方に何か加えるなりしたらよろしいでしょうか？ (1) #topic { height: 30px; background-color: #819FF7; vertical-align: middle; } (2)以下の画像にもありますが、上から４行目のロゴ2 の横にユーザーIDとパスワードのフォームを配置し、さらにログイン画面をフォームの横に設置しようとしています。 cssで幅を設定し form や fieldset にfloat: right; をかけてみたのですがユーザーIDやパスワードのボックスがうまくロゴ２の横にならんでくれません。フッター部分の右下に配置されたりします。 おおよそ添付画像のようにロゴ２の画像の横に２つのフォームを縦に並べ、その横にログインボタンを配置し、メイン画像の縦横中央にこれらを配置するにはどのようなCSSを記述すればいいでしょうか？ 独学で学習していたのですが、やはり自分で作ってみようとすると中々うまくいきません。 ご面倒でしょうが何卒よろしくお願いします。m(_ _)m 【HTML】 <!--↓main contents↓--> <main> <div id="topic">ログイン</div> <p><img src="img/common/logo2.jpg" alt="ロゴ2"></p> <!--↓form↓--> <form action="#"> <fieldset> <p><input type="text" name="userid" pattern="^[0-9A-Za-z]+$" value="" placeholder="ユーザーID"></p> <p><input type="password" name="password" pattern="^[0-9A-Za- z]+$" value="" placeholder="パスワード"></p> <p><input type="submit" value="ログイン"></p> </fieldset> </form> <!--↑form↑--> </main> <!--↑main contents↑--> 投稿画像
- 締切済み
- CSS
- CSSについて 入力フォームの上下揃い
CSSについて 入力フォームの上下揃い sample.css @CHARSET "windows-31j"; html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%} html { height:100%; } body { height:100%; } body > #container { height: auto; z-index:0; } #container{ width:780px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; position:relative; min-height:100%; border:1px solid #999; } #header{ margin: 0; padding: 0px 0px 0px 0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } #main{ padding:auto; width:100%; backgruond-color:#87CEEB; z-index:1; } #footer{ position:absolute; bottom:0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } index.html <div id="container"> <div id="header"></div> <div id="main"> <div class="vartical-align"> <form action=""> <input type="text" name="id"> <input type="password" name="pas"> </form> </div> </div> <div id="footer"></div> </div> 上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですが どうした良いでしょう？
- 締切済み
- HTML
- floatについて
IEだといいんですが、MacのIE5.17,OS9.2で表示がおかしくなってしまいます。 <div id="container"> <div id="nav">・・・</div> <div id="main">・・・</div> </div> で、 #container {width:760px;} #nav {width:160px;float:left;} #main{width:580px;float:right;} とすると、div#mainが「改行されて」右寄せになります。「改行なし」で右寄せにするにはどうしたらいいのでしょうか？ #navと#mainは、合計740pxで#containerに余裕を持たせてるんですが…
- 締切済み
- HTML
- 固定幅＋可変幅レイアウトがなぜこれで実装可能？
cssで、固定幅＋可変幅レイアウトについて、下記コードのようにやったら実現できたのですが、 なぜ右カラムのwidthが100%でも、ブラウザの横幅いっぱいでなく、 望みどおりに実現できてしまっているのでしょうか？ 結果オーライではありますが、理屈が知りたい＆後学のために、 理由をお教えいただければ幸いです。 (下記では見やすいようにタブを全角空白４文字に変換しています。） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>2カラムレイアウト(左固定幅、右リキッド)</title> <meta name="description" content="2カラムレイアウト(左固定幅、右リキッド)"> <meta name="keywords" content="CSS,2カラムレイアウト,左固定幅,右リキッド"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> * { margin: 0; padding: 0; } #header { width: 100%; height: 150px; background-color: #808080; } #container { width: 100%; } #left { width: 200px; background-color:#A9A9A9; float: left; } #right { width: 100%; background-color:#DCDCDC; } #footer { clear: both; width: 100%; height: 150px; background-color: #808080; } </style> </head> <body> <div id="header"> <p>ヘッダー</p> </div> <div id="container"> <div id="left"> <p>左あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> </div> <div id="right"> <p>右いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p> </div> </div> <div id="footer"> <p>フッター</p> </div> <p><a href="#" onClick="history.back(); return false;">戻る</a></p> </body> </html>
- ベストアンサー
- CSS
- divで作成したレイアウトに背景画像を付けたいが付けられない
divでレイアウト作り背景画像を入れたいのですが背景画像が思うように適用されません。 以下のようなサイトのように、作成したレイアウトのコンテンツ部分（真ん中白い背景色部分）に背景画像をつけたいのですが、色々やってみたのですが背景画像が適用されません。 参考サイト：http://www.realbit.net/rb_results/index.html 私のソースコードは以下です。 HTML <body> <div id="header"> <p>ヘッダー</p> <p>あああ</p> </div> <div id="container"> <div id="incontainer"> <div id="main"> <p>メイン</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> <div id="leftMenu"> <p>左メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="rightMenu"> <p>右メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="footer"> <p>フッター</p> <p>あああ</p> <p>あああ</p> </div> </body> CSS #header { background-color: #FF3; width: 920px; margin-right: auto; margin-left: auto; } #container { background-color: #F00; width: 920px; margin-right: auto; margin-left: auto; } #incontainer { float: left; width: 720px; } #main { float: right; width: 520px; background-color: #900; } #leftMenu { background-color: #00F; float: left; width: 180px; margin-left: 20px; } #rightMenu { float: right; width: 180px; background-color: #FF9; margin-right: 20px; } #footer { background-color: #F0F; clear: both; width: 920px; margin-right: auto; margin-left: auto; } 参考サイトのようにコンテンツ部分に背景画像を入れたい、私の場合container部分にフォトショップで作成した背景画像をいれたいのですが、まずは実験的に、上記のように背景画像を入れる前に赤い背景色を入れて見ましたが赤い背景が出てきません。背景画像もためしに入れてみましたが適用されません。 なにが間違っているのでしょうか？
- ベストアンサー
- HTML
- 【CSS】positionの親子関係について
あるボックスを親として、そこにコンテンツを配置したいと思っています。 flaot は使わず、posiotion で位置を指定する想定で、下記のスクリプトを書きました。 （該当箇所以外の部分は省きます） << CSS >> #container { position: relative; } #main { position: absolute; top: 10px; } #side { position: absolute; top: 10px; right: 10px; } << HTML >> <div id="container"> <p><img src="container.png" width="700" height="400"></p> <div id="contents"> <p><img src="main.png" width="550" height="650" id="main"></p> <p><img src="side.png" width="100" height="650" id="side"></p> </div> </div> これを実行すると、main は container に合わせて移動がされる（親子関係になっている）のですが、side のみ、ウィンドウサイズに合わせて移動をしてしまいます。 relative と absolute で親子関係を作る、という考え方自体は合っていると思うのですが、何か法則など（親子関係は一対一でなければならない等）あるのでしょうか。 CSSの勉強を始めたばかりのため、お詳しい方にご解説をお願いしたいです。。
- ベストアンサー
- CSS
- 【CSS】HTML要素の指定
お手柔らかにお願いします。 HTMLを下記のように記述しました。 ---------- <section id="login"> <h1>ログイン</h1> <form> <label for="my_id">ID</label> <input id="my_id" type="text" size="10" maxlength="10"><br /> <label for="my_pass">パスワード</label> <input id="my_pass" type="password" size="10" maxlength="10"><br /> </form> <a><p>ログイン</p></a> <p><a>パスワードを忘れた方はこちら</a></p> </section> ---------- 上記の”<a><p>ログイン</p></a>”に対して、画像を差し込みたいと思っています。 p要素にid名やclass名を入れれば簡単にできるのですが、HTMLは変更せず、CSSのみで要素を特定したいと思っています。 こちらのサイト（http://web-dd.net/?p=278）を参考にCSSを以下のように書いてみましたが、うまくいきませんでした。 ---------- #login label { display: inline-block; font-size: 0.8em; text-align: right; vertical-align: middle; width: 70px; margin: 5px 0 5px 5px; } #login input { display: block; float: right; width: 80px; margin: 5px 10px 5px 5px; } #login br { clear: left; } #login > form + p { overflow: hidden; text-indent: -10em; background: url(img/btn_login.png) no-repeat; width: 90px; height: 30px; } #login a + p { font-size: 0.7em; text-align: center; margin: 15px auto 10px auto; } ---------- ”#login > form + p”という要素の指定が間違っているのかも、と思っていますが、formの部分をh1やinput、brなどにしてもうまくいきませんでした。 あまり難しいことは勉強中なのでわかりませんが、どこをどう直せばいいのか、わかりやすく説明してくださるとうれしいです。 よろしくお願いします。
- 締切済み
- CSS
