webサイトで画像つきリストの作成

webサイトで画像つきリストの作成

#13 画像付きリストを作ってみよう
http://dotinstall.com/lessons/website_html/9013
を参考に
画像つきリストの作成を学習

<ul class="products">
<li>
<img src="dummy.png" width="60" height="60">
<p>説明</p>
</li>

<li>
<img src="dummy.png" width="60" height="60">
<p>説明</p>
</li>

<li>
<img src="dummy.png" width="60" height="60">
<p>説明</p>
</li>
</ul>

というように ul に classを指定して
li でリストを作る

li の中で画像を表示するようにするので

<img src="dummy.png" width="60" height="60">
<p>説明</p>

として、画像と説明を追加している

これで、HTML部分はできたので
CSSでレイアウト設定

ul class=”products”
としているので

ul.products{
}

という項目をつくり、そこに設定を作成
CSSでは　 .　はclass #は id という意味になる

margin-botttom:15px;

で下に余白設定

次に、 li 　要素の中にある
img
p
に対してもCSSを適用したいので

img に関しては

ul.products >li >img{
}

p に関しては

ul.products >li >p{
}

とする

まず、img のほうから設定

float:left;

で画像を左にまわりこみするようにする
食べログとかで文字の横に写真があるように
画像が左になる
また、float を指定したら width で幅指定が必須なので

width:60px;

としておく

pのほうは

margin-left:70px;

として左の画像から余白をあけるようにする

文字サイズを小さめにしたいので

font-size:13px;

としておく

また、レイアウト崩れ防止のため

ul.products >li {
oveflow:hiddem;
}

を指定しておく

このままだと区切りがわかりにくいので

margin-bottom:10px;
padding-bottom:10px;

で余白設定して

border-bottom:1px dotted #ccc;

で下線をつける

ただし、このままでは一番下も下線がはいってしまうので
一番下だけ設定を変える

これは
:last-child という設定を使う
意味は一番下

ul.products>li:last-child{
border:none;
}

これで、一番下だけ下線がなくなる