リンクを横に並べたメニューの作り方

リンクを横に並べたメニューの作り方 | How to make a menu with links arranged side by side
  

リンクを横に並べたメニューの作り方 | How to make a menu with links arranged side by side

HTML <div class=”menu”>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>Javascript</a></li>
<li><a href=”#”>Vue.js</a></li>
</ul>
</div>
CSS .menu {
padding: 20px;
background-color: #d5dadf;
}
.menu ul {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.4;
list-style: none;
}
.menu li a {
display: block;
padding: 10px;
color: #000;
border-right: solid 1px #aaa;
text-decoration: none;
}
.menu li a:hover {
background-color: #eee;
}
.menu li {
float: left;
width: 25%;
text-align: center;
}
.menu li:first-child a {
border-left: solid 1px #aaa;
}
.menu ul::after {
content: “”;
display: block;
clear: both;
}
 

.menu li aセレクタにborder-right: solid 1px #aaa;として右に線を入れてます。また.menu liセレクタにて:first-child a とし、メニューの最初の左にも線を入れています。



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


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

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

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

就職・転職支援