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

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

ただいまの
回答率

90.61%

  • PHP

    19882questions

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

  • HTML

    8693questions

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

  • CSS

    5593questions

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

  • HTML5

    3888questions

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

  • teratail

    414questions

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

css右揃え

受付中

回答 6

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,240

b1ackc0ffee

score 197

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

参考ページ:
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Forms/My_first_HTML_form
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • takutok

    2015/06/16 12:51

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

    キャンセル

  • b1ackc0ffee

    2015/06/16 13:29

    upできました★

    キャンセル

  • rifuch

    2015/06/16 13:54

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

    キャンセル

  • b1ackc0ffee

    2015/06/16 15:33

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

    キャンセル

回答 6

+2

labelを使うのが普通のような気がします。
label {
display:inline-block;
margin-right:00px;/*テキスト右端から入力欄左端まで*/
width:6em;/*「パスワード」の5文字ですが、ブラウザ誤差を考えて*/
text-align:right;
vertical-align:middle;
cursor:pointer;
}
input {
width:00px;/*入力欄幅*/
vertical-align:middle;
}
<form>
  <label for="id">ID</label><input type="text" id="id" name="id">
  <label for="pass">パスワード</label><input type="text" id="pass" name="pass">
</form>
各項目の間にマージンを設けたい場合は、<form>の中身を<ul>で包んで、
各<label><input>を<li>に入れて、<li>に対して、padding-bottom:00px;と
すれば、良いと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

http://getbootstrap.com

ここに乗っているサンプルだと、こんな感じ。
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

サンプル作ってみました。

inputをdivで囲んで、そのdivにdata属性で、data-label="xx"と入れておきます。
で、そのdivに擬似要素で、

div::before {
  content: attr(data-label);
  //で、そのスタイル
}


としておくと、あたかもinputの前にラベルがあるような風に見えます、実際はinputを囲んでるdivにあるんですけれども、こんな感じでいけたりもします。

状態としては、

<div> //ここの前にラベルを擬似要素でつける
  <input>
</div>

こういう感じです。inputが増えて、それらをセンター寄せとかしたい場合は、更にdivで囲んで、

<div>
  <div> //ここの前にラベルを擬似要素でつける
    <input>
  </div>
</div>


として、inputを囲んだdivにtext-alignでもつければ右寄せでもセンター寄せでもラベル自体は右寄せにできます。一番外のdivは識別用につけてあります。.test1とか.test2とか。

サンプルのinputを囲んだdivを見ていただいたらわかるように、それぞれにclass="id"、class="pass"などとつけてありますが、それぞれを例えば.inputWrapperなどとつけておけば、

.inputWrapper {
  text-align: right;
}


で状態を維持して右寄せできます。ここらの名前の付け方はcssの設計次第です。input自体をスタイルしたい場合、inputに直接classを入れてスタイルしても良いですし、前述のように、それを囲むdivにclassをつけて、その中のinputとしてスタイルしても良いですから、ページ内に配置するinput要素の数や、cssの書きやすさ等色々考慮してclass名等をつけて下さい。

面倒だったので、それぞれのdiv等にclassとかつけてませんが、付けるとより一層と操作がわかりやすくなるかと思います。
文字で説明するのもややこしいので、サンプルをご覧ください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-1

質問されていることが、よくわからないのですが、

結論からいうと、「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をセンタリングするだけで
済みます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-3

方法は色々はありますが、例えばdivで囲って右揃えにするでしょうか。

最近の流行りは、「むしろこうした方が早い」に書いてあるような、上下に並べるパターンですね。
その方がスマホなど、画面サイズが小さいデバイスで、デザインしやすいです。

後は、IDやパスワードという文字を、<input>の中に表示するパターンですね。
以下のようにすれば出来ます。
<input type="text" size="10" placeholder="ID">

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/16 17:25

    http://www.w3.org/html/wg/drafts/html/CR/forms.html#the-placeholder-attribute
    placeholderの中に項目名を入れるのはW3Cの仕様として正しくないですよ。
    あくまで代替テキストを入れる物ですよ。
    このteratailというサイトも初期はそのような登録フォームで構築されていましたが修正されたようですね。

    キャンセル

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

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    wordpress 投稿一覧にある文章の表示範囲

    初めてwordpressを使いました。HTMLやCSSの基本はわかりますが、それ以外あまりわかりません。 図のように投稿一覧で、各投稿の文章を全て表示させるのではなく最初の2~3

  • 受付中

    ma[Unity] MiniJSON 使って jsonデータの値を取得したい

    MiniJsonを使用して、jsonの値を取り出したいのですが、エラーが出てしまい、試行錯誤を繰り返したのですが、様々なエラーに発生し、取得が出来ずにいます。。 お手数ですが、何か

  • 解決済

    cssで指定したfont-sizeの実サイズを知りたい

    例えばfont-size: 5vwと指定した場合、これをpxに換算したら何ピクセルになるのか知りたいのですが、Chromeの開発者ツールか何かで知る方法はないでしょうか?

  • 解決済

    fileAPIのreadAsDataURLでhtmlファイルを取得し、iframeに読み込ませたら文...

    問題 FileAPIのreadAsDataURLをつかいhtmlファイルを取得し、そのデータをiframeのsrc属性に指定して読み込ませましたが、その読み込まれたものを見ると、

  • 解決済

    CentOS7でWebページ公開

    前回からの続き的な質問になるんですが、前回UbuntuでWeb公開をやっていて、回答どうりにやてもうまく行かなく、今回CentOS7(1611)を導入してやっているんですが、これも

  • 解決済

    Excelのデータを自動的にHTMLの任意のタグ内に追加する方法はないでしょうか?

    以下の【入力したいデータ】を自動的に任意のHTMLタグに追加して【完成イメージの画像】のようなレイアウトをつくりたいのですがどのような方法がありますでしょうか? 【入力したい

  • 解決済

    atom自動補完やり方

    これのプログラミング版になります 今いろいろ調べているのですが、atom自動補完ができません。宜しくお願い致します。 リンク内容 autocomplete-p

  • 受付中

    ER図について

    つぶやきアプリを作っているのですが、 ER図を作るとする例えばどんなものがありますか?? サンプル程度でいいので教えていただきたいです

同じタグがついた質問を見る

  • PHP

    19882questions

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

  • HTML

    8693questions

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

  • CSS

    5593questions

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

  • HTML5

    3888questions

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

  • teratail

    414questions

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