初心者の為のCSS:コピペでOK！横並びナビメニュー10選

今回はホームページ・ブログの重要な要素、横並びメニュー10選をご紹介します。
HTMLとCSSをそのまま張り付けて簡単にメニューを作成できますので是非お試しください。

シンプルメニュー

CSS

nav{
text-align: center;
}
nav ul{
margin: 0 ;
padding: 0 ;
}
nav ul li{
list-style: none;
display: inline-block;
width: 18%;
min-width: 90px;
}
nav ul li a{
text-decoration: none;
color: #333;
}
nav ul li.current a{
color: #F33135;
}
nav ul li a:hover{
color: #E7DA66;
}

HTML

<nav>
<ul>
<li class=”current”><a href=”#”>Home</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Access</a></li>
<li><a href=”#”>Blog</a></li>
</ul>
</nav>

斜線区切りメニュー

CSS

CSSアイコン付きメニュー

CSS

nav ul{
margin: 0 auto;
padding: 0;
text-align: center;
}
nav ul li{
display: inline-block;
position: relative;
padding-right: 15px;
margin-right: 10px;
}
nav ul li a::after,
nav ul li a::before {
display: block;
content: ”;
position: absolute;
}
nav ul li a::after {
top: 10%;
right: 0;
width: 13px;
height: 13px;
background-color: #ccc;
border-radius: 100%;
}
nav ul li a.current::after,
nav ul li a:hover:after{
background-color: #3498db;
}
nav ul li a::before {
z-index: 2;
top: 40%;
right: 5px;
width: 5px;
height: 5px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
nav ul li a{
text-decoration: none;
color:#aaa;
display: inline-block;
width: 100%;
}
nav ul li a.current{
color:#555;
}
nav ul li a:hover{
color:#555;
}

HTML

<nav>
<ul>
<li><a class=”current” href=”#”>Home</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Access</a></li>
<li><a href=”#”>Blog</a></li>
</ul>
</nav>

罫線区切り＋下線メニュー

CSS

nav{
text-align: center;
}
nav ul{
margin: 0 ;
padding: 0 ;
}
nav li{
list-style: none;
display: inline-block;
width: 10%;
min-width: 90px;
}
nav li:not(:last-child){
border-right:2px solid #ddd;
}
nav a{
text-decoration: none;
color: #333;
}
nav a.current{
color: #00B0F0;
border-bottom:2px solid #00B0F0;
}
nav a:hover{
color:#F7CB4D;
border-bottom:2px solid #F7CB4D;
}

HTML

均等幅＋下線メニュー

CSS

nav ul{
display: table;
margin: 0 auto;
padding: 0 ;
width: 80%;
text-align: center;
}
nav li{
display: table-cell;
min-width: 50px;
}
nav a{
display: block;
width: 100%;
text-decoration: none;
color: #555;
padding-bottom: 5px;
}
nav li.current{
border-bottom: 3px solid #92D050;
}
nav li:hover{
color: #E7DA66;
border-bottom: 3px solid #F0E475;
}

HTML

ボーダー囲み＋シンプルメニュー

CSS

ul{
display: table;
margin: 0 auto;
padding: 0;
width: 80%;
text-align: center;
}
ul li{
display: table-cell;
min-width: 50px;
}
ul li a{
display: block;
width: 100%;
padding: 10px 0;
text-decoration: none;
color: #ccc;
font-weight: bold;
}
ul li.current{
border: 3px solid #555;
}
ul li.current a{
color: #555;
}
ul li a:hover{
color: #E71B1F;
}

HTML

背景カラー＋シンプルメニュー

CSS

ul{
display: table;
margin: 0 auto;
padding: 0;
width: 80%;
text-align: center;
}
ul li{
display: table-cell;
min-width: 50px;
}
ul li a{
display: block;
width: 100%;
padding: 10px 0;
text-decoration: none;
color: #555;
font-weight: bold;
}
ul li.current{
background-color: #DEEBF7;
}
ul li.current a{
color: #555;
}
ul li:hover{
background-color: #FFF2CC;
}

HTML

丸アイコン＋下線メニュー

CSS

nav ul{
display: table;
margin: 0 auto;
padding: 0;
width: 80%;
text-align: center;
}
nav ul li{
display: table-cell;
position: relative;
}
nav ul li a{
display: block;
width: 100%;
}
nav ul li a::after,
nav ul li a::before {
display: block;
content: ”;
position: absolute;
}
nav ul li a::after {
bottom: -50%;
left: 50%;
width: 5px;
height: 5px;
background-color: #ccc;
border-radius: 100%;
}
nav ul li a.current::after {
background-color: #3498db;
}
nav ul li a:hover{
color: #3498db;
}
nav ul li a:hover:after {
background-color: yellow;
width: 100%;
left: 0;
border-radius: 5px;
}
nav ul li a{
text-decoration: none;
color:#aaa;
}
nav ul li a.current{
color:#555;
}

HTML

罫線区切り＋背景カラーメニュー

CSS

nav{
border-bottom: 1px solid #ccc;
}
nav ul{
display: table;
margin: 0 auto;
padding: 0;
width: 80%;
text-align: center;
}
nav ul li{
display: table-cell;
min-width: 50px;
border-right: 1px solid #ccc;
}
nav ul li:first-child{
border-left: 1px solid #ccc;
}
nav ul li a{
display: block;
width: 100%;
padding: 10px 0;
text-decoration: none;
color: #aaa;
}
nav ul li a:hover{
background-color:#F8E750;
border-bottom: 5px solid #F8E750;
}
nav ul li.current{
font-weight: bold;
}
nav ul li.current a{
border-bottom: 5px solid #00B0F0;
color: #00B0F0;
}

HTML

上線＋背景カラーメニュー

CSS

nav{
border-bottom: 5px solid #ccc;
position: relative;
}
nav ul{
position: absolute;
left:10%;
display: table;
margin: 0 auto;
padding: 0;
width: 80%;
text-align: center;
}
nav ul li{
display: table-cell;
min-width: 50px;
}
nav ul li a{
display: block;
width: 100%;
height: 100%;
padding: 10px 0;
text-decoration: none;
color: #aaa;
}
nav ul li.current{
font-weight: bold;
border-top: 5px solid #00B0F0;
}
nav ul li.current a{
color: #00B0F0;
}
nav ul li a:hover{
color: #0089BB;
background-color: #FBFBDD;
}
nav ul li:hover{
border-top: 5px solid #F8E750;
}

HTML

まとめ

今回はよく見るメニューの中から10種類を選んでご紹介してみました。
CSSで見た目を変更し、ページのテーマ（雰囲気）に合わせたメニューにすることでよりユーザーが使いやすいページを作ることができます。
ほんの少しの工夫で見やすく、使いやすくすることができるので、様々なアイデアで是非自分だけの素敵なメニューをデザインしてみてくださいね。

次回の「初心者のためのCSS」はアコーディオンメニューをご紹介します。お楽しみに！

「知ってる」ことを「出来る」ことに。

講座を選ぶ

初心者の為のCSS:コピペでOK！横並びナビメニュー10選

シンプルメニュー

斜線区切りメニュー

CSSアイコン付きメニュー

罫線区切り＋下線メニュー

均等幅＋下線メニュー

ボーダー囲み＋シンプルメニュー

背景カラー＋シンプルメニュー

丸アイコン＋下線メニュー

罫線区切り＋背景カラーメニュー

上線＋背景カラーメニュー

まとめ

話題をチェック！

Excel VBA小技コラム – セルの検索

初心者の為のCSS: marginとpaddingの違いと使い方

Office系の資格取得にチャレンジ～独学勉強法～

初心者の為のCSS: 画像の上に文字や画像を重ねる方法 – 前編