ブラウザの幅を狭くしてもレイアウトが崩れない方法

ブラウザのサイズを縮小すると画像のようにレイアウトが崩れます。 ウェブ製作の学習をしている初心者です。 現在wrap...

kozax05 さんからの 回答

  • 2019/05/16 18:51
  • 回答No.1
kozax05

ベストアンサー率 100% (2/2)

レスポンシブデザインを取らずに画面縮小で問題無いのであれば楽にできますよ。

画面サイズが変わった時のイベントで以下を実行する。

var nRit = 画面サイズを計算して縮小率をセットする
$("#container").css("transform-origin", "top left");
$("#container").css("transform", "scale(" + nRit + ")");
この回答にこう思った!同じようなことあった!感想や体験を書こう!
この回答にはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
  • PHP PCでログインできたのに、スマホから無理 PHP

    PCからは既存アカウントでログインできるのですが、スマホからログインできません。 もちろんスマホ用サイトにも同様のスクリプトを書いております。 PCでは、ブラウザ:Google Chrome スマホのOSは、Android4.3 です。 ログインスクリプトは下記のようなものです。ちなみにこのスクリプトはスマホ用の方です。 -------------------------------------------------------------------------------------------- <?php session_start(); //////////////////// // POST変数の取得 // //////////////////// $login_id = (isset($_POST['login_id']))? $_POST['login_id'] : ""; $password = (isset($_POST['password']))? $_POST['password'] : ""; /* var_dump($login_id); var_dump($password); exit; */ if($login_id!=="" and $password!==""){ //////////////////////// // データベースを検索 // //////////////////////// $con = mysql_connect("~", "~", "~"); mysql_select_db("LAA0471050-shopcart"); mysql_set_charset('utf8'); $sql = "SET NAMES utf-8"; mysql_query($sql); $sql = "SELECT * FROM member_profile;"; $result = mysql_query($sql, $con) or die(mysql_error()); $rowco = mysql_num_rows($result); for($i=0; $i<$rowco; $i++){ $row = mysql_fetch_row($result); // 取得された行に対応する配列を返し、内部のデータポインタを前に進める if($login_id===$row[4] && $password===$row[5]){ // IDとパスワードが両方一致していた場合 $_SESSION['login'] = 1; // ログイン状態にする //setcookie("id", $login_id, time()+60*60*24*365); // アカウント用のクッキーの有効期限は一年間 //setcookie("pass", $password, time()+60*60*24*365); $_SESSION['login_id'] = $login_id; // メールアドレス header("Location: mypage.php?login_id=$login_id"); }else{ //header("Location: login.php"); //echo 'error'; } } mysql_close($con); // データベースとの接続を解除する } ?> <!doctype html> <html> <head><title>ログインページ</title> <meta charset="utf-8"> <!-- ◆ スマートフォン用 --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- jQuery本体--> <script type="text/javascript" src="./jquery/jquery-2.1.3.js"></script> <!-- スマホ用スタイルシート --> <link rel="stylesheet" href="./jquery/jquery.mobile-1.4.5.min.css" /> <!-- スマホ用JavaScript --> <script src="./jquery/jquery.mobile-1.4.5.min.js"></script> </head> <body bgcolor="#FFFFCC"> <br> <?php for($i=0; $i<60; $i++){ echo '&nbsp'; } if($_SESSION['login']!==1){ echo '<a href="membership_form.php"><img src="./images/shinki.png" border="0"></a>'; echo '&nbsp;<a href="login.php"><img src="./images/login.png" border="0"></a>'; }else{ // ログインしてれば echo '<a href="mypage.php"><img src="./images/mypage.png" border="0"></a>'; echo '&nbsp;<a href="logout.php"><img src="./images/logout.png" border="0"></a>'; } ?> <br><br> <?php ////////////// // 表の表示 // ////////////// echo '<center>'; echo '<table width="320" cellpadding="0" cellspacing="0" border="0">'; echo '<tr rowspan="10" width="320">'; // ⇐ このrowspan="14"で、⇒の画像などを幅寄せできる【重要】 echo '<form name="form1" method="post" action="login.php">'; echo '<tr><td><img src="./images/login_bar.png" width="100%"></td></tr>'; echo '<tr><td width="320" height="20" class="line1">ログインID(メールアドレス)</td></tr>'; echo '<tr>'; echo '<td width="320" height="20" align="middle">'; echo '<input type="text" class="yokohaba" name="login_id" id="login_id" size="75" tabindex="1">'; echo '</td>'; echo '</tr>'; echo '<td width="320" height="20" class="line1">パスワード</td>'; echo '</tr>'; echo '<tr>'; echo '<td width="320" height="20" align="middle">'; //echo '<input type="password" class="yokohaba" name="password" id="password" size="75" tabindex="2" value="'.$_COOKIE['pass'].'">'; echo '<input type="password" class="yokohaba" name="password" id="password" size="75" tabindex="2">'; echo '</td>'; echo '</tr>'; echo '<tr><td width="320" height="20" align="middle">'; echo '<a href="JavaScript:document.form1.submit()" onclick="location.href=\'login.php\'"><img src="./images/login_send.png" border="0" tabindex="3" width="100%"></a>'; echo '</td></tr>'; echo '</form>'; echo '</table>'; ?> <br><br> <center><a href="top.php">トップページ</a></center> </center> </body> </html> どこがどう間違っているのか、ご指導お願い致します。...

  • Zend_Form_Element_Hash PHP

    zend_formを使っておりCSRF対策として使えるようだったので Zend_Form_Element_Hashを試しているのですが以下のようなエラーになります。 「The two given tokens do not match」 ちなみにソースはこんな感じです。 $this->setMethod('post'); $this->addElement('text', 'username', array( 'label' => 'ユーザ名:', 'required' => true, 'validators' => array( 'Alnum', 'NotEmpty', ) )); $this->addElement('password', 'password', array( 'label' => 'パスワード:', 'required' => true, 'validators' => array( 'Alnum', 'NotEmpty', array('StringLength', false, array(8)), ) )); $this->addElement('submit', 'login', array( 'ignore' => true, 'label' => 'Submit', )); $this->addElement('hash', 'csrf', array( 'ignore' => true, )); ソースを確認したところhiddenに値は埋め込まれてありました。 エラーからすると一致しないとの事なので$request->getPost()を 参照してみましたが確かに全く違う値でした。 というか、ポストされエラーがなければ生成した乱数をセッションに 登録し確認画面でhiddenの値とセッションの値が一致すればOKという のが普通ですよね? しかし、セッションをvar_dumpしても乱数が登録されてる様子もなく 何と比較しているのか根本的なところが謎です。。。 echo $this->_form->getValue('csrf'); 上記のようにしても乱数の取得ができずマニュアルを見ても解決策が 全くわからないのですがどのようにすればうまく動作するのでしょうか?...

  • WWW::Mechanizeについて教えてください Perl

    WWW::Mechanizeついて 質問させて頂きます。 他でも質問しておりますが、回答が無かったためマルチですがご了承ください。 WWW::Mechanizeを使ってログインしようとしてるのですが、うまく行きません。 <form action="login.cgi" name="form1" method="post"> <input id=id name='id' type='text' /> <input id=pass name='pass' type='text' /> <input type="submit" name="submit" value="LOGIN" /> 上記のフォームでは正常に取得できます。 しかし、ログインチェックをJavascriptからPHPに渡ってるページでの ログインがうまく行きません。 ソース //入力チェック /*login_checkたとえです*/ function LOGIN(){ $( "userid" ).className = ""; $( "userpassword" ).className = ""; if( login_check( "id" ) ){ if( login_check( "pass" ) ){ document.form1.action = "login.php"; document.form1.Btn_Type.value = "login"; document.form1.submit(); }else{ $( "pass" ).className = "error"; } }else{ $( "id" ).className = "error"; } } <form action="login.php" name="form1" method="post"> <input id=id name='id' type='text' /> <input id=pass name='pass' type='text' /> <input type="button" name="loginbtn" value="LOGIN" onclick='JavaScript:LOGIN();'/> 上記のフォームにログインしようと下記のようにしました。 my $loginUrl = 'http://hoge.jp/login.php'; my $mech = WWW::Mechanize->new(cookie_jar => $cookie_jar); $mech->agent_alias('Windows IE 6'); $mech->get($loginUrl); $mech->form_name('form1'); $mech->field( id => "test" ); $mech->field( pass => "test" ); $mech->click_button( value => 'Login' ); print $mech->content(); これで実行するとエラーがでます。 Can't call method "header" on an undefined value at /usr/lib/perl5/site_perl/5.8.8/WWW/Mechanize.pm line 2471. $mech->click_button( value => 'Login' ); 上記のclick_buttonでvalueを指定するとエラーになります。 WWW::MechanizeはJavascriptは実行できないのでしょうか? お知恵をお貸しいただけませんでしょうか。 説明不足かもしれませんがお願い致します。...

  • INPUTにnameがない場合のsubmit Visual Basic

    <FORM ACTION="login.asp" METHOD="POST"> USER ID:<INPUT TYPE="text" NAME="userid" SIZE="12"><br> パスワード:<INPUT TYPE="password" NAME="pass" SIZE="12"><br> <INPUT TYPE="submit" NAME="btn01" VALUE="ログイン"> <INPUT TYPE="reset" VALUE="クリア"> </FORM> 上記のHTMLに対して、VBAで操作する場合、 データセットした後 objIE.document.all.btn01.Click 'クリックメソッドを実行 で、submit出来るかと思います。 今、VBAで自動ログインしたいサイトが <INPUT TYPE="submit" VALUE="ログイン"> のような感じで、nameの属性がありません。 こういうときは、VBAではどうすればログインできるのでしょうか。 初歩的な質問ですみませんが、わかる方教えてください。...

  • フォームのレイアウト崩れを防ぐ方 CSS

    添付画像のようなフォームのフィールドセットを作りました。 画面サイズ100%の場合は添付画像左側のように整った状態です。 が、画面の右側から縮小すると半分あたりでガタッとレイアウトが崩れます。 フィールドセットの下はjqueryのデータテーブルズを使用しています。縮小した分文字数などは 減りますがレイアウトは大きく崩れません。 フォームの方もせめて画面の半分程度まで縮小してもレイアウトが大崩れしないようにする方法はありますか? また1から作り直すには時間がたりません。 <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; }...

ページ先頭へ