リストマークを画像で表示したメニュー | Menu with list mark displayed as an image

HTML

<div class="menu">
<h1>MENU</h1>
<ul>
<li><a href="#">コンセプト</a></li>
<li><a href="#">きっかけ</a></li>
<li><a href="#">購入本</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>

CSS

.menu {
padding: 20px;
background-color: #d6e0eb;
}
.menu h1 {
margin: 0 0 10px 0;
font-size: 16px;
line-height: 1.2;
}
.menu ul {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.4;
list-style: none;
}
.menu li a {
position: relative;
display: block;
padding: 10px 5px 10px 30px;
color: #000;
text-decoration: none;
}
.menu li a:hover {
background-color: #eee;
}
.menu li a::before {
position: absolute;
left: 5px;
top: 10px;
content:url(listmark.png) ;
}

　

「.menu li a:before」セレクタのcontentで画像を指定。また画像表示位置を自由に指定するためpositionを「absolute」を設定。そしてここでは＜a＞の構成するボックスの左上を基点とするため＜a＞のpositionをrelativeと指定してます。そして基点からleftを5px、topを10pxと指定してます。| Specify the image with the content of the ".menu li a: before" selector. Also, set the position to "absolute" to freely specify the image display position. And here, the position of is specified as relative because the upper left of the box composed of is used as the base point. And from the base point, left is specified as 5px and top is specified as 10px.

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

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