liリストに画像と文をつけてサイドバーにする方法

よくブログとかで画像付きのリストってあるじゃないですか。こんな感じの

これやろうとしたんですけど、いまいち上手くできなくてずれちゃったりしたんですよ。なので綺麗にやる方法を調べて見ました


<div class="rank">
<ul>
<li>
<img src="image/yama.jpg"><p>サイドランキングコンテンツ</p>
</li>
<li>
<img src="image/yama.jpg"><p>サイドランキングコンテンツ</p>
</li>
<li>
<img src="image/yama.jpg"><p>サイドランキングコンテンツ</p>
</li>
</ul>
</div><!--rank-->

 


.rank ul li{
width: 30%;
}

.rank li{
list-style: none;
margin-bottom: 10px;
padding-bottom: 15px;
}

.rank img{
width: 100px;
float: left;
}

.rank p{
padding-left: 110px;
}

自分の作りたいサイトに合わせて微調整しているので細々した数値も割り当てていますが、一番大事なのは

対象のul  liの幅をしていすること

対象のリストの中に入っている画像と文章をそれぞれ端に寄せるためにfloatをかけることです。

liの中に入れるのは画像と文そのものだけにして余計なもので囲わないようにすることが大切見たいです。

ブログでliリストに画像と文を一緒にいれる方法

結構面倒なのかなと思ったんですが、意外と単純でした。html cssの見本サイトっていうんですかね?ソース使っていいですよっていうサイトでは結構めんどくさい感じでやってたんですよ。

それを自分のところに適応させようとしたんですけど如何せん、参考にしたソースが面倒な感じで上手く行かなくて・・・。最終的にこうなりました

liの中に画像と文を一緒にいれる時の注意点

注意点というか自分がハマったところです。

初めは画像と文をそれぞれdivで囲んだりしてcssを当てようとしていたんですよ。ただそれだと非常にめんどくさい。div自体の空間ができてしまうので上手く隙間が埋まらなくなったり、ずれ込んでしまったりするんですね。

なのであまり難しく考えず、上記のような感じでシンプルにこのliの画像は左に・このliの文は右にというように

この要素の中に入っているホニャララに対してcssを適応するというcssの書き方をするのが一番ずれにくいやり方でした。