講師コラム

初心者の為の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
nav ul{
 display: table;
 margin: 0 auto;
 padding: 0;
 width: 80%;
 text-align: center;
}
nav ul li{
 display: table-cell;
 min-width: 50px;
 position: relative;
}
nav ul li:not(:first-child):after{
 position: absolute;
 content: ‘/’;
 top: 30%;
 left: 0;
}
nav ul li a{
 display: block;
 width: 100%;
 padding: 10px 0;
 text-decoration: none;
 color: #ccc;
 font-weight: bold;
}
nav ul li.current a{
 color: #A77B1C;
}
nav ul li a:hover{
 color: #C55859;
}
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
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年9月8日

Excel VBA小技コラム – セルの連続移動

表計算ソフトのExcelは非常に便利なソフトですね。数字の計算からグラフ・抽出まで簡単な操作で出来ます。こんな便利なソフトですが、複雑な計算をさせたり、多くの条件で分けて計算をする際には、さすがに標準の数式では限界があり …続きを読む

2017年8月10日

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

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

Excel術で差をつける

2018年4月24日

Excel2016 インク機能を使ってみよう

皆様こんにちは。 早いもので4月も下旬となり、GWが近づいてきましたね。 新入社員の皆様におかれましては、緊張の続く日々をお過ごしの事と思います。 新しい環境には少し慣れましたか? まだ慣れないな…と思っている方がいらっ …続きを読む