二十一日目！（dl dt dd 定義リスト横並べ）

今日は先日作成したＨＰでうまくできなかった所をやってみようと思います。実際にＵＰしなおす訳ではないのですが、やろうと思ったことができず妥協する形になったので、勉強してみます。

これが今回勉強して作り直したい部分の画像。テキスト部分は書き換えてありますが、文字数やＣＳＳのデザインなどは全く同じです。

これのＨＴＭＬソースが
<table>
  <tbody>
    <tr>
      <td><p></p><h3>STEP－1<br>前回できなかったところ</h3><p></p></td>
      <td>前回のＨＰ作成時ではうまくできず、妥協するかたちになってしまったので色々調べ　　　　　　　　　　ながら再チャレンジしようと思います。</td>


    </tr>
    <tr>
      <td><p></p><h3>STEP－2<br>dlリストで作成</h3><p></p></td>
      <td>この表は、tableで作成しているのですが、本当は最初dlリストで作成し、floatを使っ　　　　　　　　　　　　てテキスト部分を右上に移動して、並べたかったんですが、うまくいかず妥協しまし
た。</td>
    </tr>
    <tr>
       <td><p></p><h3>STEP－3<br>とりあえずは<br>勉強・挑戦</h3><p></p></td>
       <td>前回妥協して、tableで作ったのですが、今回はネットなどで調べながら、できなかった所を                    　　　　　　勉強して、dlリストを使い、これと同じようなものを作成しようと思います。</td>
    </tr>
    <tr>
       <td><p></p><h3>STEP－4<br>ネットで検索</h3><p></p></td>
       <td>ＨＴＭＬやＣＳＳの勉強をはじめてから、色々な要素、属性など調べるようになったのです　 　　　　　　が、いろいろなブログ等で詳しく載っています。</td>
    </tr>
    <tr>
       <td><p></p><h3>STEP－5<br>実際に作成</h3><p></p></td>
       <td>ネットで今回の勉強の参考になりそうなブログや記事をみつけてきて、自分の作りたいも　　　　　　　のに応用させ、前回できなかったものを作ります。</td>
    </tr>
  </tbody>
</table>

かなり突っ込みどころ満載です。今table要素で作成していますが、これをdl要素（定義リスト）で作りたいと思います。

まずはＨＴＭＬから

<dl>
  <dt>STEP-1<br>前回できなかったところ</dt>
    <dd>前回のＨＰ作成ではうまくいかず、妥協するかたちになってしまったので色々調べ
　　　　ながら再チャレンジしようと思います。</dd>
  </dt>
  <dt>STEP-2<br>dlリストで作成</dt>
    <dd>この表は、tableリストで作成しているのですが、本当は最初dlリストで作成し、floatを使っ
　　　　　てテキスト部分を右上に移動して、並べたかったんですが、うまくいかず妥協しました。
    </dd>
  <dt>STEP-3<br>とりあえずは<br>勉強・挑戦</dt>
    <dd>前回妥協して、tableで作ったのですが、今回はネットなどで調べながら、できなかった所を
勉強して、dlリストを使い、これと同じようなものを作成しようと思います。</dd>
  <dt>STEP-4<br>ネットで検索</dt>
    <dd>HTMLやCSSの勉強をはじめてから、色々な要素、属性などを調べるようになったのです
が、いろいろなブログ等で詳しく載っています。</dd>
  <dt>STEP-5<br>実際に作成</dt>
    <dd>ネットで今回の勉強の参考になりそうなブログや記事をみつけてきて、自分のつくりたい
ものに応用させ、前回できなかったものを作ります。</dd>
</dl>

こんな感じです。ネットで「dｌを横並び」と検索するとたくさんヒットします。その中で見つけてきたやり方のＣＳＳソースがこちら。

dt {


  float: left;
  width: 10em;
}


dd {


  margin-left: 10em;
}



なのでさっき書き込んだdlリストのＨＴＭＬにこのＣＳＳを適用させると

こんな具合になぜか斜めにずれていきます。dl自体のwidthを指定していないからというのもあるのですが、ブラウザのサイズを変えると、その大きさに合わせて色んなズレかたをしてました。

色々調べた結果、dtのテキスト数が多い場合、floatを使って横並びにするとあまりうまくいかないらしい事が書いてありました。なので、floatは使わずにやってみます。
ＣＳＳソースはこちら。



 dl {
font-size: small;
margin: 0 0 0 0;
padding: 0 0 10px 0;
width: 550px;
}


 dl dt {
text-align: center;
margin-top: 20px;
padding: 5px 0 5px 5px;
width: 12.5em;
font-weight: bold;
border: 1px solid #000080;
padding: 5px 5px 5px 5px;
}


 dl dd {
padding: 5px 5px 5px 10px;
margin-left: 14em;
margin-top: -3.3em;
line-height: 1.2em;

}

ポイントは「margin-top: -3.3em;」この部分のようです。

これを適用させてブラウザで表示させるとこうなりました。

今日最初に載せた画像とほぼ同じに表現できたのではないかと思います。
今日はここまで。