SP
PC
https://school.yachin29.com/no-sticky/
<html lang="ja">
<head>
<meta charset="utf-8">
<title>モバイルファースト</title>
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="header-inner">
<h1>Cafe de FELICA</h1>
<nav class="g-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Concept</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Access</a></li>
</ul>
</nav>
</div>
</header>
<main class="content">
<p class="main-img"><img src="img/main.jpg" alt=""></p>
<h2><span>Cafe de Felica</span>は、<br>
食とアートと音楽が交差する<br>
空間を創造します。</h2>
<p class="main-txt">シェフ・矢島が提供するのは、スペイン料理に「東京」のエッセンスを取り入れたモダンスパニッシュ。<br>
店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。<br>
魚介や肉、野菜の旨みがお米一粒ひと粒にまで染みわたった特製のパエリアやイベリコ豚のグリル、アヒージョなどの本格スペイン料理をお楽しみください。<br>
オンラインでのレストランご予約は、ご予約ご希望日の7～30日前までの受付となります。
</p>
<div class="wrapper">
<div class="box">
<a href="#">
<h3>Concept</h3>
<p class="box-img"><img src="img/box1.jpg" alt=""></p>
<p class="box-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</a>
</div>
<div class="box">
<a href="#">
<h3>Menu</h3>
<p class="box-img"><img src="img/box2.jpg" alt=""></p>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</a>
</div>
<div class="box">
<a href="#">
<h3>Access</h3>
<p class="box-img"><img src="img/box3.jpg" alt=""></p>
<p class="box-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</a>
</div>
</div>
</main>
<footer>
<p><small>© 2019 Cafe de FELICA</small></p>
</footer>
</body>
</html>
スタイルシート
"utf-8";
html,body,h1,h2,h3,p,ul,li,small {
margin:0;
padding:0;
line-height:1.0;
}
a {
text-decoration:none;
color:#222;
}
ul {
list-style:none;
}
img {
vertical-align:bottom;
max-width:100%;
}
header {
border-bottom: 4px solid #FB8E14;
font-family: 'Josefin Slab', serif;
}
h1 {
color:#FB8E14;
text-align:center;
padding:20px 0 10px;
}
.g-nav ul {
display:flex;
justify-content:space-between;
padding:10px 0;
box-sizing:border-box;
}
.g-nav li {
width:25%;
height:40px;
}
.g-nav li a {
display:block;
text-align:center;
line-height:40px;
border-right:1px solid #999;
}
.g-nav li:last-child a {
border-right:0;
}
.content {
padding:20px 10px;
box-sizing:border-box;
}
.content h2 {
text-align:center;
padding:40px 0;
line-height:1.6;
font-weight:normal;
}
.content h2 span {
font-family: 'Josefin Slab', serif;
margin-right:3px;
}
.main-txt {
padding:0 10px;
box-sizing:border-box;
line-height:1.6;
margin-bottom:60px;
}
.box {
box-shadow: 0 0 5px #aaa;
padding:20px;
box-sizing:border-box;
margin-bottom:20px;
}
.box h3 {
border-left:10px solid #6B78DB;
padding-left:10px;
font-size:26px;
font-weight:normal;
margin-bottom:20px;
font-family: 'Josefin Slab', serif;
}
.box:nth-child(2) h3 {
border-left:10px solid #5FD75E;
}
.box:nth-child(3) h3 {
border-left:10px solid #E06C6E;
}
.box-img {
margin-bottom:20px;
}
.box-txt {
line-height:1.6;
}
footer {
background:#FB8E14;
text-align:center;
color:#FFF;
height:50px;
}
footer p {
line-height:50px;
}
(min-width:768px){
.header-inner {
max-width:1200px;
margin:0 auto;
display:flex;
justify-content:space-between;
}
h1 {
color:#FB8E14;
text-align:center;
padding:20px 0 10px 10px;
}
.g-nav li a {
padding:0 30px;
font-size:18px;
border-right:0;
position:relative;
}
.g-nav li a:after {
content:"";
display:block;
width:80%;
height:0;
background:#FB8E14;
position:absolute;
top:10px;
right:0;
bottom:0;
left:0;
margin:auto;
z-index:-1;
}
.g-nav li a:hover:after {
height:10px;
transition:0.2s;
}
.g-nav li.current a:after {
height:10px;
}
.content {
max-width:1200px;
margin:0 auto;
padding:20px 10px;
}
.main-txt {
text-align:center;
max-width:800px;
margin:0 auto 60px;
}
.wrapper {
display:flex;
justify-content:space-between;
}
.box {
width:32%;
box-shadow:none;
margin-bottom:60px;
transition:0.2s;
}
.box:hover {
box-shadow:0 0 30px #aaa;
}
}
