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

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

ただいまの
回答率

89.98%

中央寄せした要素の左にlabel

受付中

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,706

oldSatoimo

score 19

下記のように、セレクトボックスを画面中央に配置し、左に”ユーザー”というlabelを配置、
同じく画面中央に配置したテキストボックスの左に”PASS”というlabelを配置したいです。
labelは要素の説明なのですが、どのような書き方をするのが最適なのでしょうか。


【イメージ図】
イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2017/09/11 12:19

    ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

    キャンセル

  • 退会済みユーザー

    2017/09/11 12:19

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 4

+2

これでも良いかと思います〜

単純に真ん中の寄せた要素のひとつひとつの左側にposotion: absoluteで指定しただけですが!

<form action="">
  <div>
    <div class="input-container">
      <label for="">ユーザー名</label>
      <input type="text"/>
    </div>
  </div>
  <div>
    <div class="input-container">
      <label>パスワード</label>
      <input type="text" />
    </div>
  </div>
</form>
form{
  width: 400px;
  margin: 0 auto;
  border: solid 1px #ccc;
  text-align: center;
}

.input-container{
  display: inline-block;
  position: relative;
}

.input-container label{
  position: absolute;
  left: -100px;
  top: 50%;
  transform: translateY(-50%);

}

イメージ説明

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/11 21:45

    予想に反してlabelが後ろに来ているのは不適切な気がします。前ではだめなのでしょうか?

    キャンセル

  • 2017/09/11 21:46

    前でも大丈夫だと思いますよ〜

    キャンセル

  • 2017/09/11 21:53

    WCAG 2.0 達成基準 1.3.2 意味のある順序 に反しているかと
    http://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html

    キャンセル

  • 2017/09/11 22:11

    すいません。
    前方に置いたほうがアクセシビリティ的にも良いですね。
    修正しておきます

    キャンセル

+1

これでいかがでしょうか?

<div id="left">
  <label>ユーザー</label>
</div>
<div id="center">
  <input type="text">
</div>
<div id="right">

</div>

#left{
  width:25%;
  float:left;
}
#center{
  width:50%;
  float:left;
  text-align:center;
}
#right{
  width:25%;
  float:left;
}

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

まずユーザーが選択肢から選ぶように見えますが、
不特定のユーザー名をさらすのは仕様としてはあまり美しくない気がします
(攻撃して下さいといっているようにみえます)

その上で「テキストボックスを中央に配置し」の意図がわかかねます
dialogを作るということでしょうか?

「左にlabelを配置」も意味がよく通じません。
いわゆるlabelを設定するとしてテキストボックスへのフォーカス程度にしか
使えないように見受けられます。
単に見出しと言う意味でしょうか?

dialogをつくって、dl-dt-ddで組むと良いかもしれません。
場合によっては表として認識してtableでもおかしくはないと思います

 sample

dialog h1{text-align:center;}
dialog dl{width:20em;}
dialog dt{clear:both;float:left;display:block;width:4em;}
dialog dd{display:block;}
<dialog open>
<form>
<h1>ログイン</h1>
<dl>
<dt>ユーザー</dt>
<dd><input type="search" name="user" list="userlist" autocomplete="on" required>
<datalist id="userlist">
<option value="user1">
<option value="user2">
<option value="user3">
</datalist>
</dd>
<dt>PASS</dt>
<dd><input type="password" name="passwd" required></dd>
<dd><input type="submit" value="ログイン"></dd>
</dl>
</form>
</dialog>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/11 11:46

    説明不足でしたので、文言を追加しましたm
    仕様については個人的に使うものですので大丈夫です。
    labelは見出しという意味ですね、、、

    キャンセル

  • 2017/09/11 12:18

    dialogのサンプル追記しました
    IEでの表示を気にする場合は調整が必要です

    キャンセル

0

Bootstrap 4 の例

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<form action="#" class="container border border-dark p-5">
  <p class="text-center">ログイン</p>
  <div class="form-group row">
    <label for="user" class="col-sm-4 col-form-label text-center">ユーザー</label>
    <div class="col-sm-8">
      <select name="user" id="user" class="form-control" required="required"><option></option></select>
    </div>
  </div>
  <div class="form-group row">
    <label for="pass" class="col-sm-4 col-form-label text-center">PASS</label>
    <div class="col-sm-8">
      <input type="password" name="pass" id="pass" class="form-control" required="required" />
    </div>
  </div>
  <div class="row justify-content-center">
    <button class="btn btn-sm" disabled="disabled" type="submit">ログイン</button>
  </div>
</form>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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