スタイルシート(CSS)を使ってレイアウトを組んでみよう～ラベルとformの部品の位置を揃える

from内のラベルと部品の位置を揃える

articleの中に、ラベルとtextなどのformの部品を配置しますが、下図のようにラベルを右揃え、部品を左揃えにします。
tableを使って揃えるやり方もありますが、今回はスタイルシート(CSS)を使ったやり方でやってみましょう。

articleの中にボックスを2つ横並びにして、ラベルとformの部品を別々に配置します。
ラベルはCSSで「text-align: right;」を指定して、右揃えにしています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>HTML/CSS 3-1</title>
    <link rel="stylesheet" href="stylesheet3-1.css" />
  </head>
  <body>
    <header>header</header>
    <aside>aside</aside>
    <article>article
      <div class="container">
        <div class="box1">
          <p class="label">氏名：</p>
          <p class="label">住所：</p>
          <p class="label">性別：</p>
          <p class="label">電話番号：</p>
          <p class="label">メールアドレス：</p>
          <p class="label">最終学歴：</p>
          <p class="label">経験言語：</p>
          <p class="label">自由欄：</p>
        </div>
        <div class="box2">
          <form action="rayout3-2.html" method="post">
            <p><input type="text" name="name" /></p>
            <p><input type="text" name="address" size="50" /></p>
            <label><input type="radio" name="gender" value="1" />男性</label>
            <label><input type="radio" name="gender" value="2" />女性</label>
            <p><input type="number" name="phone" /></p>
            <p><input type="email" name="mail" /></p>
            <select name="career">
              <option value="0"></opton>
              <option value="1">中学卒</opton>
              <option value="2">高校卒</opton>
              <option value="3">大学卒</opton>
              <option value="4">大学院卒</opton>
              <option value="5">専門卒</opton>
              <option value="6">その他</opton>
            </select>
            <p>
              <label><input type="checkbox" name="lang" value="1" />C言語</label>
              <label><input type="checkbox" name="lang" value="2" />C#</label>
              <label><input type="checkbox" name="lang" value="3" />VB.NET</label>
              <label><input type="checkbox" name="lang" value="4" />Java</label>
              <label><input type="checkbox" name="lang" value="5" />Python</label>
              <label><input type="checkbox" name="lang" value="6" />その他</label>
            </p>
            <p><textarea name="free" cols="50" rows="5"></textarea></p>
            <p>
              <input type="submit" value="送信" />
              <input type="reset" value="リセット" />
            </p>
          </form>
        </div>
      </div>
    </article>
    <footer>footer</footer>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<header>header</header>

<aside>aside</aside>

<article>article

<p class="label">メールアドレス：</p>

</div>

</select>

<p>

<label><input type="checkbox" name="lang" value="5" />Python</label>

</p>

<p>

</p>

</form>

</div>

</article>

<footer>footer</footer>

</body>

</html>

body {
    height: 875px;
    margin: 0;
    padding: 0;
}

header {
    background-color: magenta;
    height: 140px;
    width: 90%;
    position: fixed;
    top: 0;
}

aside {
    background-color: yellow;
    height: 875px;
    width: 30%;
    float: left;
    margin: 140px 0 140px 0;
}

article {
    background-color: lime;
    height: 875px;
    width: 60%;
    float: left;
    margin: 140px 0 140px 0;
}

footer {
    background: cyan;
    height: 140px;
    width: 90%;
    clear: both;
    position: fixed;
    bottom: 0;
}

.container {
    background: white;
    height: 90%;
    width: 90%;
    margin: 2% auto;
}

.box1 {
    background: pink;
    height: 100%;
    width: 40%;
    float: left;
}

.box2 {
    background: orange;
    height: 100%;
    width: 60%;
    float: left;
}

.label {
    text-align: right;
}

select {
  width: 170px;
}

body {

height: 875px;

margin: 0;

padding: 0;

}

header {

background-color: magenta;

height: 140px;

width: 90%;

position: fixed;

top: 0;

}

aside {

background-color: yellow;

height: 875px;

width: 30%;

float: left;

margin: 140px 0 140px 0;

}

article {

background-color: lime;

height: 875px;

width: 60%;

float: left;

margin: 140px 0 140px 0;

}

footer {

background: cyan;

height: 140px;

width: 90%;

clear: both;

position: fixed;

bottom: 0;

}

.container {

background: white;

height: 90%;

width: 90%;

margin: 2% auto;

}

.box1 {

background: pink;

height: 100%;

width: 40%;

float: left;

}

.box2 {

background: orange;

height: 100%;

width: 60%;

float: left;

}

.label {

text-align: right;

}

select {

width: 170px;

}