サムネイル画像の横にテキストを並べたメニューの作り方

サムネイル画像の横にテキストを並べたメニューの作り方 
  

サムネイル画像の横にテキストを並べたメニューの作り方

HTML <h1>MENU</h1>
<ul>
<!– タイトル1 –>
<li>
<a href=”#”>
<img src=”thumb01.jpg” alt=””>
<P class=”title”>タイトル1</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にしています。



この本から引用、参考に学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません(ToT)
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円程ならコスパよく、買っておいてよかったと満足してます。


レベルアップにプロからの学びを。

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。

就職・転職支援