サムネイル画像の横にテキストを並べたメニューの作り方 | How to make a menu with text next to the thumbnail image

HTML

<h1>MENU</h1>
<ul>
<!-- タイトル１ -->
<li>
<a href="#">
<img src="thumb01.jpg" alt="">
<P class="title">タイトル１</P>
<p class="desc">ツーリングした時の感想です。</p>
</a>
</li>
<!-- タイトル2 -->
<li>
<a href="#">
<img src="thumb02.jpg" alt="">
<P class="title">タイトル2</P>
<p class="desc">孤独な旅に出た時の感想です。</p>
</a>
</li>
<!-- タイトル3 -->
<li>
<a href="#">
<img src="thumb03.jpg" alt="">
<P class="title">タイトル3</P>
<p class="desc">奇麗な花を見た時の感想です。</p>
</a>
</li>
</ul>
</div>

CSS

.menu {
padding: 20px;
background-color: #d5dadf;
}
.menu h1 {
margin: 0 0 10px 0;
font-size: 18px;
line-height: 1.2;
}
.menu ul {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.4;
list-style: none;
}
.menu li a {
display: block;
padding: 10px 5px 10px 5px;
color: #000;
text-decoration: none;
}
.menu li a:hover {
background-color: #eee;
}
.menu img {
float: left;
border: none;
}
.menu li a::after {
content: "";
display: block;
clear: both;
}
.menu p {
margin: 0 0 0 110px;
}
.menu .title {
font-weight: bold;
}
.menu .desc {
color: #666;
font-size: 12px;
}

　

サムネイル画像（100×75ピクセル）なので、ここでは画像とテキストの間隔を10ピクセルにするため<p>の左マージンを110pxにしています。| Since it is a thumbnail image (100 x 75 pixels), the left margin of is set to 110px in order to make the space between the image and text 10 pixels.

やっぱり詳しい人から深く学びたい人はこちらをどうぞ。| If you want to learn more from those who are familiar with it, please click here.