top画像（トマト）

cssを指定する場所

前のページでも、説明しましたが、今回はもっと詳しく説明をしたいと思います。
いきなりですが、例題です。
下の例題のリストを

  • ★横に並べる
  • ★全体的に上から20px、左から20px下に下げる
  • ★文字の後ろに背景色を指定する
  • ★文字の幅を80pxにする
  • ★文字を真ん中に設定
  • ★文字の周りを2pxづつあける
  • ★文字と文字の間を10px間をあける
多いですが、上の条件で作ってみてください。

<ul>
<li>文字０</li>
<li>文字１</li>
<li>文字２</li>
</ul>

↓完成図

  • 文字０
  • 文字１
  • 文字２

出来ましたか？
webの基礎ページからここまで読んで下さった貴方なら出来ると思います…!
では正解と、解説です。

正解

ul {
margin-top:20px;
margin-left:20px;
text-align:center;
}
ul li {
background-color:#f9f;
width:80px;
margin-right:10px;
float:left;
padding:2px;
}

解説。
まず、親要素である<ul>を、上と左から20pxづつ移動させます。
そして、bodyとpageの違いで説明をしたように、親でtext-align:centerを設定します。
次に、子要素（中身）に背景を設定します。

なぜ親要素に、背景じゃないのか？
<ul>の構想はこうなっています。

  • <li>
  • <li>
  • <li>

<li>一個一個が途切れているため、<ul>に背景を設定してしまうと
一行全部に色がついてしまうわけです。

ちなみに、float:leftで一列に並べると、次の文章などが
右に回りこんでしまうので、clear:bothで回り込みを解除しないといけません。

<div class="both">
<ul>
<li>文字０</li>
<li>文字１</li>
<li>文字２</li>
</ul>
</div>

※clearfixが使える場合は<div class="clearfix">でokです
clear:bothを使うために、classをあてました。
ちなみに、display:inlineでも横並びに出来ます。

ul {
margin-top:20px;
margin-left:20px;
text-align:center;
}
ul li {
background-color:#f9f;
margin-right:10px;
display:inline
padding:2px;
}

でも、これだと<li>のwidthの設定が出来ないので
テキストナビゲーションなどにしか使いようがないきがします。

今回は、リストでのcss指定の場所しか説明できませんでしたが
後は応用なので、大丈夫と思います。