![イメージ説明]WIDTH:600写真のように、画面デザインを調整したいです。
今のところ、全体をセンタリングしかしていません。
テキストボックスを右揃えにして、どのデバイスでも同じように表示させたいです。
どうするのが、一番いいでしょうか?
よろしくお願い申し上げます。
参考ページ:
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Forms/My_first_HTML_form
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/16 04:29
2015/06/16 04:54
2015/06/16 06:33
回答6件
0
labelを使うのが普通のような気がします。
lang
1label { 2display:inline-block; 3margin-right:00px;/*テキスト右端から入力欄左端まで*/ 4width:6em;/*「パスワード」の5文字ですが、ブラウザ誤差を考えて*/ 5text-align:right; 6vertical-align:middle; 7cursor:pointer; 8} 9input { 10width:00px;/*入力欄幅*/ 11vertical-align:middle; 12}
lang
1<form> 2 <label for="id">ID</label><input type="text" id="id" name="id"> 3 <label for="pass">パスワード</label><input type="text" id="pass" name="pass"> 4</form>
各項目の間にマージンを設けたい場合は、<form>の中身を<ul>で包んで、
各<label><input>を<li>に入れて、<li>に対して、padding-bottom:00px;と
すれば、良いと思います。
投稿2015/06/16 09:29
総合スコア1084
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
質問されていることが、よくわからないのですが、
結論からいうと、「ID」「パスワード」というテキストを右揃えにして、ID用とパスワード用の
テキストボッククスの左揃えしたいということでよろしいのでしょうか?
そうだとしたら、すべて、スタイルシートで表示スタイルを記述することもできますが、
簡単な方法としては、HTMLのテーブルタグを利用するのが簡単です。
//テキスト部分を右揃えするスタイルシート
th {
text-align:right;
}
入力フォーム部分ののHTML
<table border="0"> <tbody> <tr> <th>ID</th> <td><input type="text" size="" name="ID"></td> </tr> <tr> <th>パスワード</th> <td><input type="text" size="" name="passwd"></td> </tr> </tbody> </table>質問されていることと合っているかわかりませんか、これでどうでしょうか?
入力フォーム全体をセンタリングしたければ、tableをセンタリングするだけで
済みます。
投稿2015/06/16 05:02
総合スコア125
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
すでに答えが出ていると思いますが・・・
どのデバイスでも、ということと、レイアウトのやりやすさを考えると、Bootstrapを試してみては?
ここに乗っているサンプルだと、こんな感じ。
lang
1<form class="form-horizontal"> 2 <div class="form-group"> 3 <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 4 <div class="col-sm-10"> 5 <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 6 </div> 7 </div> 8 <div class="form-group"> 9 <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 10 <div class="col-sm-10"> 11 <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 12 </div> 13 </div> 14 <div class="form-group"> 15 <div class="col-sm-offset-2 col-sm-10"> 16 <div class="checkbox"> 17 <label> 18 <input type="checkbox"> Remember me 19 </label> 20 </div> 21 </div> 22 </div> 23 <div class="form-group"> 24 <div class="col-sm-offset-2 col-sm-10"> 25 <button type="submit" class="btn btn-default">Sign in</button> 26 </div> 27 </div> 28</form>
投稿2015/06/16 06:50
総合スコア1901
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
サンプル作ってみました。
inputをdivで囲んで、そのdivにdata属性で、data-label="xx"と入れておきます。
で、そのdivに擬似要素で、
css
1div::before { 2 content: attr(data-label); 3 //で、そのスタイル 4} 5
としておくと、あたかもinputの前にラベルがあるような風に見えます、実際はinputを囲んでるdivにあるんですけれども、こんな感じでいけたりもします。
状態としては、
html
1<div> //ここの前にラベルを擬似要素でつける 2 <input> 3</div>
こういう感じです。inputが増えて、それらをセンター寄せとかしたい場合は、更にdivで囲んで、
html
1<div> 2 <div> //ここの前にラベルを擬似要素でつける 3 <input> 4 </div> 5</div>
として、inputを囲んだdivにtext-alignでもつければ右寄せでもセンター寄せでもラベル自体は右寄せにできます。一番外のdivは識別用につけてあります。.test1とか.test2とか。
サンプルのinputを囲んだdivを見ていただいたらわかるように、それぞれにclass="id"、class="pass"などとつけてありますが、それぞれを例えば.inputWrapper
などとつけておけば、
css
1.inputWrapper { 2 text-align: right; 3}
で状態を維持して右寄せできます。ここらの名前の付け方はcssの設計次第です。input自体をスタイルしたい場合、inputに直接classを入れてスタイルしても良いですし、前述のように、それを囲むdivにclassをつけて、その中のinputとしてスタイルしても良いですから、ページ内に配置するinput要素の数や、cssの書きやすさ等色々考慮してclass名等をつけて下さい。
面倒だったので、それぞれのdiv等にclassとかつけてませんが、付けるとより一層と操作がわかりやすくなるかと思います。
文字で説明するのもややこしいので、サンプルをご覧ください。
投稿2016/06/17 13:45
総合スコア366
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
現状のHTML界隈を考慮すると、こんな感じではないでしょうか。
<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> dl { clear: both; } dl dt { float: left; clear: both; width: 7.5em; padding-right: 10px; font-weight: bold; text-align: right; } dl dd { margin-bottom: 0.4em; margin-left: 7.5em; min-height:20px; } #input-box { width: 400px; margin: 0 auto; background-color: #cccccc; padding: 10px; } </style> </head> <body> <div id="input-box"> <dl> <dt><label for="id">ID</label></dt> <dd><input type="text" id="id" size="" name="ID"></dd> <dt><label for="passwd">パスワード</label></dt> <dd><input type="text" id="passwd" size="" name="passwd"></dd> </dl> </div> </body> </html>
投稿2015/06/17 00:30
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
方法は色々はありますが、例えばdivで囲って右揃えにするでしょうか。
最近の流行りは、「むしろこうした方が早い」に書いてあるような、上下に並べるパターンですね。
その方がスマホなど、画面サイズが小さいデバイスで、デザインしやすいです。
後は、IDやパスワードという文字を、<input>の中に表示するパターンですね。
以下のようにすれば出来ます。
<input type="text" size="10" placeholder="ID">
投稿2015/06/16 04:51
総合スコア392
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/16 08:25
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。