質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

6回答

3758閲覧

css右揃え

b1ackc0ffee

総合スコア267

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2015/06/16 03:43

編集2022/01/12 10:55

![イメージ説明]WIDTH:600写真のように、画面デザインを調整したいです。
今のところ、全体をセンタリングしかしていません。
テキストボックスを右揃えにして、どのデバイスでも同じように表示させたいです。
どうするのが、一番いいでしょうか?
よろしくお願い申し上げます。

参考ページ:
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Forms/My_first_HTML_form

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takutok

2015/06/16 03:51

たしかにスマホでは画像添付出来ないですね。 というか文字しか書けない・・・^^;
rifuch

2015/06/16 04:54

具体的にやりたいこと、困っていることがわかるようなHTMLコードとCSSコードの一部を乗せないと、回答したくてもできないと思いますよ
b1ackc0ffee

2015/06/16 06:33

諸事情により載せられないときもありますが、極力のせていきますね^^
guest

回答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

LibertyBell3

総合スコア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

KazutoshiOhashi

総合スコア125

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

すでに答えが出ていると思いますが・・・

どのデバイスでも、ということと、レイアウトのやりやすさを考えると、Bootstrapを試してみては?

http://getbootstrap.com

ここに乗っているサンプルだと、こんな感じ。

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

rifuch

総合スコア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

hidekichi

総合スコア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

takutok

総合スコア392

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問