inline-block, table-cell レイアウトの組み方

C#からJavaでの研修に変更になり、htmlとcssでモックアップを作成しています。

下の画像のようなページを作りたいのですが、レイアウトがうまく綺麗にいかず苦戦しています。

inline-block,table-cellあたりを使おうかなとコーディングしていました。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>社員登録</title>
6<link rel="stylesheet" type="text/css" href="style.css">
7</head>
8
9<body>
10<p>
11社員No<input type="text" name="namae" size="40" maxlength="4"><input type="button" value="選択">
12</p>
13<p>
14フリガナ<input type="text" name="namae" size="40" maxlength="20">
15</p>
16<p>
17氏名<input type="text" name="namae" size="40" maxlength="20">
18</p>
19<p>性別
20<input type="radio" name="sex" value="male" checked="checked">男性
21<input type="radio" name="sex" value="Female">女性
22</p>
23<p>
24郵便番号<input type="text" name="namae" size="40" maxlength="20">
25</p>
26<p>
27住所１<input type="text" name="namae" size="40" maxlength="20">
28</p>
29<p>
30住所２<input type="text" name="namae" size="40" maxlength="20">
31</p>
32<p>
33電話番号<input type="text" name="namae" size="40" maxlength="20">
34</p>
35<p>
36FAX<input type="text" name="namae" size="40" maxlength="20">
37</p>
38<p>所属部門
39<select name="bumon">
40<option value="A">総務部</option>
41</select></p>
42<p>研修生区分<input type="checkbox" name="riyu" value="1">研修生</p>
43<button type="submit" disabled>削除</button>
44<button type="submit">登録</button>
45<button type="submit">終了</button>
46</body>
47</html>

追記

上記のhtmlコードで最初に組んでレイアウトが綺麗でなかったため、
class属性のitemを作ってコーディングしてみたのですが。。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>社員登録</title>
6<link rel="stylesheet" type="text/css" href="style.css">
7</head>
8
9<body>
10<ul class="container">
11  <li class="item">社員No</li>
12  <li class="item"><input type="text" name="namae" size="40" maxlength="4"></li>
13  <li class="item"><input type="button" value="選択"></li>
14</ul>
15</body>
16</html>

css
1p{
2  font-size: 12px;
3}
4
5input.num { width: 60px; }
6
7.container {
8  text-align: center;
9}
10.item {
11  display: inline-block;
12  vertical-align: middle;
13}
14
15/* ↓class="item"の中のulに対してCSSを適用*/
16.item ul {
17  list-style-type: none; /*箇条書きのポッチを消す*/
18  text-align:center /*左右中央寄せは親要素に対して指定*/
19  }
20
21/* ↓class="item"の中のulの中のliに対してCSSを適用*/
22.item ul li { 
23  display: inline-block;/*inline-blockにします*/
24  width: 80px;/*幅も指定できる*/
25  height: 40px;/*高さも指定できる*/
26  padding: 100px 0;/*余白も指定できる*/
27  margin: 100px 0;/*余白も指定できる*/
28  vertical-align: middle;/*縦の表示位置も指定できる*/
29  background: skyblue;/*背景を水色に*/
30  font-weight: bold;/*文字を太字に*/
31  color:white /*文字色を白に*/
32  }

markdownうまく出来ず申し訳ないです。

詳しい方いらっしゃいましたらご教授お願いします。

kei344

2018/10/09 02:57

バッククオート3つの前には改行を入れてください。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

dit.

2018/10/09 02:57

コードのマークダウンは改行が必要です。「</html>ここ```」と「 /*文字色を白に*/ }ここ```」に改行を入れてみてください。HTMLとCSSの間にも空白行が必要です。

rebell

2018/10/09 03:01

ありがとうございます。修正できました。

kei344

2018/10/09 03:07

.itemの要素が見当たりませんが、どのように試したのかがわかるHTMLを提示されてはいかがでしょうか。

rebell

2018/10/09 03:20

申し訳ないです。　記載しましたのでどうかよろしくお願いします。

dit.

2018/10/09 04:10

画面上に表示させたいものは<body>～</body>内に記述する必要があります。レイアウトと直接関係のない部分なので回答ではなく修正依頼にて指摘させていただきます。

行動規範の内容に同意します

回答2件

ベストアンサー

突貫で組んだので、HTMLとしての構造の良し悪しや、組み方の古さはともかくとして、私は以下の様な感じでコードを組むことが多いです。
「部品化と共通化」を考えて組んでいくと後々のメンテナンスが楽ですよ。
また、HTMLはブロックレベル要素、インラインレベル要素といったカテゴリーがあり、それらを理解して組み合わせることで、見た目上の制御が変わってきます。
自分が使用したいタグはどのレベルの要素なのかを考えていくといいかと思います。
※ イメージ程度なので、コードは色々と端折っています。お気を付けください。

HTML
1<body>
2	<div class='main_container'> <!-- 枠全体のサイズ決定 -->
3		<div class='item_block'> <!-- ブロックレベルの塊として纏める。内部のタグはspan要素をインラインブロックにすることで横並びへ -->
4			<span class='item_name'>社員No</span> <!-- インラインブロック要素として、項目名の欄はcssで幅を共通化 -->
5			<span><input type="text" name="namae" size="40" maxlength="4"></span>
6			<span><input type="button" value="選択"></span>
7		</div>
8		<div class='item_block'>
9			<span class='item_name'>フリガナ</span>
10			<span><input type="text" name="namae" size="40" maxlength="20"></span>
11		</div>
12		<div class='item_block'>
13			<span class='item_name'>氏名</span>
14			<span><input type="text" name="namae" size="40" maxlength="20"></span>
15		</div>
16		<div class='item_block'>
17			<span class='item_name'>性別</span>
18			<span><input type="radio" name="sex" value="male" checked="checked">男性</span>
19			<span><input type="radio" name="sex" value="Female">女性</span>
20		</div>
21
22		<div class='button_area'>
23			<button type="submit" disabled>削除</button>
24			<button type="submit">登録</button>
25			<button type="submit">終了</button>
26		</div>
27	</div>
28</body>

css
1.main_container{
2	width:1280px;
3}
4
5.item_block{
6	width:100%;
7}
8
9.item_block span{
10	display: inline-block;
11}
12
13.item_name{
14	width:300px;
15}

投稿2018/10/09 08:07

mikan_s4n

総合スコア377

rebell

2018/10/10 03:27

そのような考え方があるのですね。参考にして自分なりに組みなおしてみます。ありがとうございました！

mikan_s4n

2018/10/10 06:39

cssの場合は特にそうなのですが、上位レベルの要素で共通して設定できるような項目があれば、class等で纏めて設定しておくことで変更を一気に適用させることが出来ます。当たり前の話ですが、body要素にfont-sizeやfont-familyを設定しておき、下位レベルの要素で変更したいところがあれば、その要素に対して上書きをさせれば一部のみ変更させるのと同じ話ですね。他の回答者さんがform-groupなどで1行単位で纏めているのも同じ考えによるものだと思います。１つ１つ設定するよりは同じ設定を出来るところは纏めていくことで効率的な開発とメンテナンスを実現することが可能となります。まだまだ慣れないかと思いますが、自分なりに考えて楽な開発を頑張ってみて下さい。

行動規範の内容に同意します

Bootstrap とか使うとか。（HTMLの組み方自体の参考に、とりあえずなるかも）

HTML
1<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
2<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
3
4<form>
5  <div class="form-group row">
6    <label for="text" class="col-4 col-form-label">Text Field</label> 
7    <div class="col-8">
8      <div class="input-group">
9        <div class="input-group-addon">
10          <i class="fa fa-address-card"></i>
11        </div> 
12        <input id="text" name="text" class="form-control here" type="text">
13      </div>
14    </div>
15  </div>
16  <div class="form-group row">
17    <label for="text1" class="col-4 col-form-label">Text Field</label> 
18    <div class="col-8">
19      <input id="text1" name="text1" class="form-control here" type="text">
20    </div>
21  </div>
22  <div class="form-group row">
23    <label for="select" class="col-4 col-form-label">Select</label> 
24    <div class="col-8">
25      <select id="select" name="select" class="custom-select">
26        <option value="rabbit">Rabbit</option>
27        <option value="duck">Duck</option>
28        <option value="fish">Fish</option>
29      </select>
30    </div>
31  </div>
32  <div class="form-group row">
33    <label class="col-4">Radio  Buttons</label> 
34    <div class="col-8">
35      <label class="custom-control custom-radio">
36        <input name="radio" class="custom-control-input" value="rabbit" type="radio"> 
37        <span class="custom-control-indicator"></span> 
38        <span class="custom-control-description">Rabbit</span>
39      </label>
40      <label class="custom-control custom-radio">
41        <input name="radio" class="custom-control-input" value="duck" type="radio"> 
42        <span class="custom-control-indicator"></span> 
43        <span class="custom-control-description">Duck</span>
44      </label>
45      <label class="custom-control custom-radio">
46        <input name="radio" class="custom-control-input" value="fish" type="radio"> 
47        <span class="custom-control-indicator"></span> 
48        <span class="custom-control-description">Fish</span>
49      </label>
50    </div>
51  </div>
52  <div class="form-group row">
53    <label class="col-4">Checkboxes</label> 
54    <div class="col-8">
55      <label class="custom-control custom-checkbox">
56        <input name="checkbox" checked="checked" class="custom-control-input" value="rabbit" type="checkbox"> 
57        <span class="custom-control-indicator"></span> 
58        <span class="custom-control-description">Rabbit</span>
59      </label>
60      <label class="custom-control custom-checkbox">
61        <input name="checkbox" class="custom-control-input" value="duck" type="checkbox"> 
62        <span class="custom-control-indicator"></span> 
63        <span class="custom-control-description">Duck</span>
64      </label>
65      <label class="custom-control custom-checkbox">
66        <input name="checkbox" class="custom-control-input" value="fish" type="checkbox"> 
67        <span class="custom-control-indicator"></span> 
68        <span class="custom-control-description">Fish</span>
69      </label>
70    </div>
71  </div> 
72  <div class="form-group row">
73    <div class="offset-4 col-8">
74      <button name="submit" type="submit" class="btn btn-primary">Submit</button>
75    </div>
76  </div>
77</form>