|
HTML HTML5 HTMLタグ スマートフォン |
CSS CSSプロパティ CSS・HTML便利ツール |
HTML色見本 配色組み合わせツール 特殊文字 |
JAVA Android |
PHP Smarty修飾子 EXCEL |
*このページは web-dou.com のアーカイブです。(2025年 サイト統合)
CSSだけで作成したメニューのデザインサンプル
見栄えのいい横メニューの作成過程
基本的なメニュー
ul.menu1 {
background-color:#000;
height:40px;
}
ul.menu1 li {
background-color:#000;
float:left;
padding: 8px 0px;
}
ul.menu1 li a {
color:white;
text-decoration:none;
padding: 10px ;
}
ul.menu1 li a:hover {
font-weight:bold;
text-decoration:underline;
color:blue;
}
<ul class="menu1"> <li><a href="#">あいうえお</a></li> <li><a href="#">かきくけこ</a></li> <li><a href="#">さしすせそ</a></li> </ul>
+区切り線+影
ul.menu2 {
background-color:#000;
box-shadow: 0px 3px 5px #666;
height:40px;
}
ul.menu2 li {
background-color:#000;
float:left;
border-left:1px solid #666;
padding: 10px 0px;
}
ul.menu2 li:first-child {
border-left:none;
}
ul.menu2 li a {
color:white;
text-decoration:none;
padding: 8px 10px;
}
ul.menu2 li a:hover {
text-shadow: 1px 1px 3px #fff;
font-weight:bold;
text-decoration:none;
background-color:#666;
}
<ul class="menu2"> <li><a href="#">あいうえお</a></li> <li><a href="#">かきくけこ</a></li> <li><a href="#">さしすせそ</a></li> </ul>
+角丸
.rad1 {
border-radius: 10px;
}
ul.menu2 {
background-color:#000;
box-shadow: 0px 3px 5px #666;
height:40px;
}
ul.menu2 li {
background-color:#000;
float:left;
border-left:1px solid #666;
padding: 10px 0px;
}
ul.menu2 li:first-child {
border-left:none;
}
ul.menu2 li a {
color:white;
text-decoration:none;
padding: 8px 10px;
}
ul.menu2 li a:hover {
text-shadow: 1px 1px 3px #fff;
font-weight:bold;
text-decoration:none;
background-color:#666;
}
<ul class="menu2 rad1"> <li><a href="#">あいうえお</a></li> <li><a href="#">かきくけこ</a></li> <li><a href="#">さしすせそ</a></li> </ul>
+グラデーション
.grad3 {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666), color-stop(1.00, #111));
background: -webkit-linear-gradient(#666, #111);
background: -moz-linear-gradient(#666, #111);
background: -o-linear-gradient(#666, #111);
background: -ms-linear-gradient(#666, #111);
background: linear-gradient(#666, #111);
}
.rad1 {
border-radius: 10px;
}
ul.menu3 {
background-color:#000;
box-shadow: 0px 3px 5px #666;
height:40px;
}
ul.menu3 li {
float:left;
border-left:1px solid #666;
padding: 10px 0px;
}
ul.menu3 li:first-child
{
border-left:none;
}
ul.menu3 li a {
color:white;
text-decoration:none;
padding: 8px 10px;
}
ul.menu3 li a:hover {
text-shadow: 1px 1px 3px #fff;
font-weight:bold;
text-decoration:none;
background-color:#666;
}
<ul class="menu3 rad1 grad3"> <li><a href="#">あいうえお</a></li> <li><a href="#">かきくけこ</a></li> <li><a href="#">さしすせそ</a></li> </ul>
.grad2 {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #afbdc0), color-stop(0.50, #6d7673), color-stop(0.50, #0a0f0b), color-stop(1.00, #0a0809));
background: -webkit-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
background: -moz-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
background: -o-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
background: -ms-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
background: linear-gradient(to bottom, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
}
.rad1 {
border-radius: 10px;
}
ul.menu3 {
background-color:#000;
box-shadow: 0px 3px 5px #666;
height:40px;
}
ul.menu3 li {
float:left;
border-left:1px solid #666;
padding: 10px 0px;
}
ul.menu3 li:first-child
{
border-left:none;
}
ul.menu3 li a {
color:white;
text-decoration:none;
padding: 8px 10px;
}
ul.menu3 li a:hover {
text-shadow: 1px 1px 3px #fff;
font-weight:bold;
text-decoration:none;
background-color:#666;
}
<ul class="menu3 rad1 grad2"> <li><a href="#">あいうえお</a></li> <li><a href="#">かきくけこ</a></li> <li><a href="#">さしすせそ</a></li> </ul>
+選択時にへこみ
.grad2 {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #afbdc0), color-stop(0.50, #6d7673), color-stop(0.50, #0a0f0b), color-stop(1.00, #0a0809));
background: -webkit-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
background: -moz-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
background: -o-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
background: -ms-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
background: linear-gradient(to bottom, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
}
.rad1 {
border-radius: 10px;
}
ul.menu4 {
background-color:#000;
box-shadow: 0px 3px 5px #666;
height:40px;
}
ul.menu4 li {
float:left;
border-left:1px solid #111;
padding: 10px 0px;
}
ul.menu4 li:last-child
{
border-right:1px solid #111;
}
ul.menu4 li a {
color:white;
text-decoration:none;
padding: 8px 10px;
}
ul.menu4 li a:hover {
background: rgba(0,0,0,0.3);
box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
}
<ul class="menu4 rad1 grad2"> <li><a href="#">あいうえお</a></li> <li><a href="#">かきくけこ</a></li> <li><a href="#">さしすせそ</a></li> </ul>
.grad2 {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #afbdc0), color-stop(0.50, #6d7673), color-stop(0.50, #0a0f0b), color-stop(1.00, #0a0809));
background: -webkit-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
background: -moz-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
background: -o-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
background: -ms-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
background: linear-gradient(to bottom, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
}
.rad1 {
border-radius: 10px;
}
ul.menu5 {
background-color:#000;
box-shadow: 0px 3px 5px #666;
height:40px;
}
ul.menu5 li {
float:left;
padding: 10px 0px;
}
ul.menu5 li a {
color:white;
text-decoration:none;
padding: 8px 10px;
}
ul.menu5 li a:hover {
background: rgba(0,0,0,0.3);
box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
border-radius:10px;
}
<ul class="menu5 rad1 grad2"> <li><a href="#">あいうえお</a></li> <li><a href="#">かきくけこ</a></li> <li><a href="#">さしすせそ</a></li> </ul>
Copyright(C) 2010 WEB道 All Rights Reserved. Last update 25/11/05 20:05
