【HTML】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>menu title</title>
<meta name="description" content="menu template">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<div class="wrapper">
<header>header</header>
<div class="container">
<div class="tab">tab1</div>
<div class="tab">tab2</div>
<div class="tab">tab3</div>
<div class="tab">tab4</div>
<div class="tab">tab5</div>
</div>
<div class="container">
<div class="menu">menu1</div>
<a class="menu" href="test.jsp"><span class="menu_inner">menu2</span></a>
<div class="menu">menu3</div>
<div class="menu">menu4</div>
</div>
<div class="container">
<div class="menu">menu5</div>
<div class="menu">menu6</div>
<div class="menu">menu7</div>
<div class="menu">menu8</div>
</div>
<div class="container">
<div class="menu">menu5</div>
<div class="menu">menu6</div>
<div class="menu">menu7</div>
<div class="menu">menu8</div>
</div>
<div class="container">
<div class="menu">menu5</div>
<div class="menu">menu6</div>
<div class="menu">menu7</div>
<div class="menu">menu8</div>
</div>
<footer>footer</footer>
</div>
</body>
</html>
【CSS】
.wrapper {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
header {
background: white;
padding: -1px;
}
.container {
display: flex;
}
.tab {
background: Black;
color: #fff;
text-align: center;
display: inline-block;
line-height: 1;
margin: 1;
padding: 10px;
border: 1px solid #fff;
border-radius: 25px 3px 2px;
font-size: 20px;
font-weight: normal;
box-shadow: 8px 6px 10px -1px gray inset;
width: 20%;
}
.menu {
height: 80px;
line-height: 3;
vertical-align: middle;
background: black;
background: -moz-linear-gradient(top, #a3ea3f, #5b9507);
background: -webkit-gradient(linear,
left top,
left bottom,
from(#000000),
to(#303030));
color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 0 1px #fff;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 10px #487606;
overflow: hidden;
font-family: "Jun 501", sans-serif;
font-size: 28px;
display: inline-block;
margin: 1;
padding: 5px;
border: 10px solid #fff;
border-radius: 1px;
font-weight: normal;
width: 25%;
}
.menu_inner {
display: block;
opacity: 0.9;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu:hover .menu_inner{
background-color: #59b1eb;
opacity: 1;
x-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-xtransform: scale(1.1);
}
.side {
background: orange;
width: 30%;
}
footer {
background: plum;
}
@media (max-width: 400px){
.container {
flex-direction: column;
}
.main,
.side {
width: 100%;
}
}
0 件のコメント:
コメントを投稿