今日やるのはこちら。
今日はそのバラけている部分をきれいに揃えようと思います。
ＵＰしてるＨＴＭＬでは単にテキストを並べてるだけですが、table要素をつかって作ろうと思います。
ソースはこちら。
<html>
<head>
<title>お問合せ</title>
<link rel="stylesheet" href="otoiawase.css" type="text/css" />
</head>
<body>
<div id="otoiawase">
<h5>お問合せ</h5>
<table>
<tr>
<th>担当：</th>
<td>株式会社○○○○○ 本社○○○○係</td>
</tr>
<tr>
<th>TEL：</th>
<td>123-456-7890 FAX： 987-654-3210</td>
</tr>
<tr>
<th>E-mail：</th>
<td>abcd@efgh.ne.jp</td>
</tr>
<tr>
<th>所在地：</th>
<td>〒123-4567<br>東京都大阪市京都町 名古屋ビル10F</td>
</tr>
</table>
</div>
</body>
これをCSS適用前にブラウザで表示するとこうなります。
文字サイズ、thの太字をノーマルに、thを揃える。お問い合わせの下のアンダバー。バックグラウンドカラー、全体のサイズや位置調整という感じでしょうか。
「担当：、TEL：」などのth要素のテキストがテーブル枠内の中央で揃えてあるので、右で揃えるため、text-align:rightを指定。
「所在地：」の部分は隣のセルのテキストが２行に渡っているからか、その２行の中央くらいの位置で固定されていたので、上（右上）に来て欲しいので、vertical-align:topと指定。
CSSソースはこんな感じで書きました。
table {
font-size: small;
}
table th{
font-weight: normal;
vertical-align: top;
text-align: right;
}
h5 {
font-size: large;
border-bottom:dotted 1px #666;
padding: 0 0 5px 0;
margin: 10px 20px 6px 0;
}
#otoiawase {
width: 32.1em;
background-color: #ffe9a9;
margin: 0 0 0 0;
padding: 2px 0px 2px 20px;
height: 8.5em;
}
そして、CSSを適用させてブラウザで表示させたのがこちら。
他の場所はUPしているもの（最初に載せた画像）とほぼ同じ表現になってるんではないかと思います。
今日はここまで。
0 件のコメント:
コメントを投稿