…続きを読む" />
講師コラム

初心者の為の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
<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 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
<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
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
<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
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
<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
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
<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{
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
<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
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
<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>

まとめ

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

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

  • このエントリーをはてなブックマークに追加

話題をチェック!

2017年8月10日

ランサムウェアとは? 対策と感染時の対処方法

今年に入って急激にランサムウェア(Ransomware)が猛威を振るっています。ランサムウェアはこれまでの“コンピュータの情報をこっそり盗み出そうとするコンピュータウィルス”とは違い、コンピュータの情報を暗号化等すること …続きを読む

2017年6月30日

「真似して」「学ぶ」スタイル

新入社員の皆さまも、もうだいぶ職場になれたころでしょうか?もしかしたら、職場にとけ込むことが、精一杯で、まだまだ自分ひとりでは業務を遂行することが難しいという方の方が多いかもしれません。 正直なところ、新入社員に対して  …続きを読む