Q&A
ちょっと文字ベースだとレイアウトのイメージがつきづらいので、理想のレイアウトの絵（画像など）をご提供いただくことは可能ですか？
【前提】
Struts2を使って、jsp、cssファイルにて宛先登録フォームのレイアウトを作成中です。
【理想】
某ショッピングサイト⚪︎ma⚪︎onの住所追加画面のように、全体的にセンターに持ってきて、入力欄に対しての情報名を左上に持ってくるようにしたい。
【現状】
jspファイル内のHTMLの記述（一部抜粋）
<body> <!-- headerの始まり --> <!-- headerの終わり --> <div id="main"> <div class="container"> <h3>宛先登録</h3> <s:form action="AddressRegiConfirmAction"> <!-- 氏名 --> <div class="fullName"> <span>[姓]<br> <input type="text" placeholder="姓" name="familyName" value='<s:property value="familyName"/>' maxlength="16" size="16"/><br> <span class="error"><s:property value="errorFamilyNameMsg"/></span> </span> <span style="text-align:left">[名]<br> <input type="text" placeholder="名" name="firstName" value='<s:property value="firstName"/>' maxlength="16" size="16"/><br> <span class="error"><s:property value="errorFirstNameMsg"/></span> </span> </div> <!-- 氏名のふりがな --> <div class="nameKana"> <span>[せい]<br> <input type="text" placeholder="せい" name="familyNameKana" value='<s:property value="familyNameKana"/>' maxlength="16" size="16"/><br> <span class="error"><s:property value="errorFamilyNameKanaMsg"/></span> </span> <span>[めい]<br><input type="text" placeholder="めい" name="firstNameKana" value='<s:property value="firstNameKana"/>' maxlength="16" size="16"/><br> <span class="error"><s:property value="errorFirstNameKanaMsg"/></span> </span> </div> <!-- 郵便番号入力(7桁) --> <div class="form-text"> <div> <span>郵便番号<br> 〒<input type="text" placeholder="xxxxxxx" name="postalCode" value='<s:property value="postalCode"/>' pattern="^[0-9]{7}$" size="8" oninput="AjaxZip3.zip2addr(this,'','addr11','addr11');"/> </span> </div> <div class="error"> <s:property value="errorPostalCodeMsg"/> </div> </div> <!-- 住所 --> <div class="form-text"> <div> <span>住所<br><input type="text" placeholder="住所" name="addr11" value='<s:property value="addr11"/>' maxlength="50" size="50"/></span> </div> <div class="error"> <s:property value="errorAddr11Msg"/> </div> </div> <!-- 電話番号 --> <div class="form-text"> <div> <span>電話番号<br><input type="text" placeholder="xxx-xxxx-xxxx" name="telNumber" value='<s:property value="telNumber"/>' maxlength="13" size="13"/></span> </div> <div class="error"> <s:property value="errorTelNumberMsg"/> </div> </div> <!-- メールアドレス --> <div class="form-text"> <div> <span>メールアドレス<br><input type="text" placeholder="example@vague.co.jp" name="email" value='<s:property value="email"/>' maxlength="32" size="32"/></span> </div> <div class="error"> <s:property value="errorEmailMsg"/> </div> </div> <div class="button"> <input type="submit" value="確認"/> </div> </s:form> </div> </div> <!-- footerの始まり --> <!-- footerの終わり --> </body>
cssファイル（一部抜粋）
CSS
1.fullName { 2 display:flex; 3} 4 5.nameKana { 6 margin-top:20px; 7 display:flex; 8} 9 10.error { 11 color:red; 12 display:flex; 13}
現状このような感じです。
HTMLは一部抜粋していますので、入力項目は
・氏名（姓、名）別々、横並び
・ふりがな（せい、めい）別々 横並び
・郵便番号
・住所
・電話番号
・メールアドレス
となっています。
コード的に長くなると思い、一部抜粋という形を取りました。
ここから理想に持って行くためにはどうすればいいでしょうか？
現状に対し、理想に近づけるためにやった事は、text:center;をcss上で指定したのですがそうすると、入力項目名と入力欄どちらともセンターにきてしまう為、理想通りになりませんでした。他の方法に関して現在の知識では思い当たらない為質問します。
質問に関して足らない点等有りましたら補足していきますので質問して下さい。
また、質問以外にもこのコードに関しての改善点ありましたら合わせてお願い致したます。
回答3件
0
ベストアンサー
親要素がcontainerなので、formタグにwidhtを指定してください。
※widthは調整してください。
#form1 { width: 400px; margin-left: auto; margin-right: auto; }
投稿2018/05/16 08:35
編集2018/05/16 08:37
退会済みユーザー
総合スコア0
かなりいい感じなんですけど、住所の入力欄が画面右側に見切れてしまうのですが、対処法を教えていただきたいです。
見切れてしまうinputタグにwidth: 100%;を指定すれば大丈夫だと思います。
上手くいきました！ありがとうございました！
0
CSS
1.fullName { 2 display: flex; 3 margin-left: auto; 4 margin-right: auto; 5}
だとどうなりますか？
追記：
そうしましたら、formタグかformタグの親要素に対して次のどちらかを行ってください。
width: 任意の幅の値; margin-left: auto; margin-right: auto; or padding: 0 任意の横の余白の値;
投稿2018/05/16 07:51
編集2018/05/16 08:12退会済みユーザー
総合スコア0
変化がありませんでした、、、
現状の画面を追加しました。
そうしましたら、formタグかformタグの親要素に対して次のどちらかを行ってください。
```
width: 任意の幅の値;
margin-left: auto;
margin-right: auto;
or
padding: 0 任意の横の余白の値;
```
んー上手くいきませんね、、
widthの値を100%にしてた為上手く行っていませんでした。かなりいい感じになりました。
よかったです！
かなりいい感でなんですが、住所の入力欄が画面右側に見切れてしますのですが、対処法を教えて頂きたいです。
0
jsp
1<form id="form1" action=""> 2 現状の画面の部分のコード 3</form>
CSS
1#form1 { 2 display: flex; 3 justify-content: center; 4}
投稿2018/05/16 08:08
編集2018/05/16 08:09総合スコア4666
あなたの回答
tips
プレビュー
