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

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

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

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

HTML

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

Q&A

4回答

1940閲覧

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

oldSatoimo

総合スコア21

HTML5

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

HTML

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

0グッド

0クリップ

投稿2017/09/11 02:25

編集2022/01/12 10:55

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


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

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

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

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

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

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

kei344

2017/09/11 03:19

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

回答4

0

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

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

html

1<form action=""> 2 <div> 3 <div class="input-container"> 4 <label for="">ユーザー名</label> 5 <input type="text"/> 6 </div> 7 </div> 8 <div> 9 <div class="input-container"> 10 <label>パスワード</label> 11 <input type="text" /> 12 </div> 13 </div> 14</form>

css

1form{ 2 width: 400px; 3 margin: 0 auto; 4 border: solid 1px #ccc; 5 text-align: center; 6} 7 8.input-container{ 9 display: inline-block; 10 position: relative; 11} 12 13.input-container label{ 14 position: absolute; 15 left: -100px; 16 top: 50%; 17 transform: translateY(-50%); 18 19}

イメージ説明

投稿2017/09/11 02:37

編集2017/09/11 13:12
MasakazuFukami

総合スコア1869

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

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

x_x

2017/09/11 12:45

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

2017/09/11 12:46

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

2017/09/11 13:11

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

0

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

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

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

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

sample

css

1dialog h1{text-align:center;} 2dialog dl{width:20em;} 3dialog dt{clear:both;float:left;display:block;width:4em;} 4dialog dd{display:block;}

HTML

1<dialog open> 2<form> 3<h1>ログイン</h1> 4<dl> 5<dt>ユーザー</dt> 6<dd><input type="search" name="user" list="userlist" autocomplete="on" required> 7<datalist id="userlist"> 8<option value="user1"> 9<option value="user2"> 10<option value="user3"> 11</datalist> 12</dd> 13<dt>PASS</dt> 14<dd><input type="password" name="passwd" required></dd> 15<dd><input type="submit" value="ログイン"></dd> 16</dl> 17</form> 18</dialog>

投稿2017/09/11 02:38

編集2017/09/11 03:17
yambejp

総合スコア114572

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

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

oldSatoimo

2017/09/11 02:46

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

2017/09/11 03:18

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

0

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

<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; }

投稿2017/09/11 02:31

編集2017/09/11 05:45
kutu

総合スコア257

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

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

0

Bootstrap 4 の例

HTML

1<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

HTML

1<form action="#" class="container border border-dark p-5"> 2 <p class="text-center">ログイン</p> 3 <div class="form-group row"> 4 <label for="user" class="col-sm-4 col-form-label text-center">ユーザー</label> 5 <div class="col-sm-8"> 6 <select name="user" id="user" class="form-control" required="required"><option></option></select> 7 </div> 8 </div> 9 <div class="form-group row"> 10 <label for="pass" class="col-sm-4 col-form-label text-center">PASS</label> 11 <div class="col-sm-8"> 12 <input type="password" name="pass" id="pass" class="form-control" required="required" /> 13 </div> 14 </div> 15 <div class="row justify-content-center"> 16 <button class="btn btn-sm" disabled="disabled" type="submit">ログイン</button> 17 </div> 18</form>

投稿2017/09/11 09:15

x_x

総合スコア13749

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問