池袋珈琲

CSS3ホバーキャプション実践課題

f:id:web-0220:20180717092424p:plain

IKEBUKURO
COFFEE池袋珈琲

トップ
メニュー
店舗
こだわり

IKEBUKURO COFFEE
ドリップコーヒーの2倍コーヒーを使い、丁寧に入れたアイスコーヒーをご提供しています。

オススメ

カフェラテとスイーツ
好評のカフェラテとスイーツのセット。アフタヌーンティーにいかがでしょうか?

厳選した豆を深煎り
厳選した豆を深煎りで。ご自宅でお楽しみいただけるコーヒー豆、店頭で販売しています。

アイスコーヒー
アイスコーヒー、夏はもちろんご提供します。深煎りをさらに2倍利用して深みを出しています。

おいしいドリップ珈琲の入れ方入門
詳細

コーヒー豆の種類と特徴
詳細

トップ
メニュー
店舗
こだわり
お問い合わせ
企業情報
採用情報

(c) 2018 IkebukuroCoffee
PC用のレイアウト
  • まずこの段階では、PC用のレイアウトを完成させます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>池袋珈琲</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Sigmar+One" rel="stylesheet">
</head>
<body>
<div class="container">

<header class="header">
<h1>IKEBUKURO<br>COFFEE<span class="title">池袋珈琲</span></h1>
<nav class="gnav">
<ul>
<li class="current"><a href="#">トップ</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">店舗</a></li>
<li><a href="#">こだわり</a></li>
</ul>
</nav><!-- /.gnav -->
</header><!-- /.header -->

<div class="mainImg" id="top">
<h2><img src="img/main.jpg" alt="IKEBUKURO COFFEE"></h2>
<p class="news">ドリップコーヒーの2倍コーヒーを使い、丁寧に入れたアイスコーヒーをご提供しています。</p>
</div><!-- /.mainImg -->

<main class="content">
<h3>オススメ</h3>
<div class="recommend">
<h4><img src="img/item01.jpg" alt="カフェラテとスイーツ"></h4>
<p class="items">好評のカフェラテとスイーツのセット。アフタヌーンティーにいかがでしょうか?</p>
</div><!-- /.recommend -->
<div class="recommend">
<h4><img src="img/item02.jpg" alt="厳選した豆を深煎り"></h4>
<p class="items">厳選した豆を深煎りで。ご自宅でお楽しみいただけるコーヒー豆、店頭で販売しています。</p>
</div><!-- /.recommend -->
<div class="recommend">
<h4><img src="img/item03.jpg" alt="アイスコーヒー"></h4>
<p class="items">アイスコーヒー、夏はもちろんご提供します。深煎りをさらに2倍利用して深みを出しています。</p>
</div><!-- /.recommend -->
</main><!-- /.content -->

<aside class="aside">
<ul>
<li><a href="#"><img src="img/howto.jpg" alt="おいしいドリップ珈琲の入れ方入門"></a><p class="caption">おいしいドリップ珈琲の入れ方入門</p><p class="more">詳細</p></li>
<li><a href="#"><img src="img/aspect.jpg" alt="コーヒー豆の種類と特徴"></a><p class="caption">コーヒー豆の種類と特徴</p><p class="more">詳細</p></li>
</ul>
</aside><!-- /.aside -->

</div><!-- /.container -->

<footer class="footer">
<div class="footerWrap">
<ul class="footerNav">
<li><a href="#">トップ</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">店舗</a></li>
<li><a href="#">こだわり</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">企業情報</a></li>
<li><a href="#">採用情報</a></li>
</ul>
<p class="copy"><small>(c) 2017 IkebukuroCoffee</small></p>
</div><!-- /.footerWrap -->
</footer><!-- /.footer -->
</body>
</html>
@charset "utf-8";

/* reset
------------------------------------------------------------- */
html, body, h1, h2, h3, h4, p, ul, li {
	margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    "sans-serif";
}
ul {
  list-style: none;
  overflow: hidden;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  border: none;
  vertical-align: bottom;
  max-width: 100%;
}

/* body
------------------------------------------------------ */
body {
  background: #FFF url(img/back.png);
  color: #222;
  font-size: 16px;
}

/* pseudo-class
------------------------------------------------------ */
a:link { color: #717133; }
a:visited { color: #766453; }
a:hover { color: #323232; }
a>img { transition: opacity 0.2s linear; }
a:hover>img { opacity: 0.7; }


/* layout
------------------------------------------------------------- */
.container {
  width: 960px;
  margin: 0 auto;
  padding: 20px 30px 30px 30px;
  background: #FFF;
}

/* .header
------------------------------------------------------------- */
h1 {
  float: left;
  margin-bottom: 20px;
  font-family: 'Sigmar One', cursive;
  font-size: 40px;
  color: #3D2118;
}
  h1>span.title {
    font-family: YuMincho, 'Yu Mincho', "serif";
    font-size: 24px;
    margin-left: 20px;
    color: #6C6C6C;
    vertical-align: middle;
  }
/* .gnav
------------------------------------------------------------- */
  .gnav ul {
    overflow: hidden;
    float: right;
    width: 400px;
    margin-top: 50px;
  }
  .gnav li {
    float: left;
    width: 100px;
    height: 30px;
    text-align: center;
  }
  .gnav li > a {
    display: block;
    line-height: 30px;
    border-left: 1px solid #422F19;
    font-weight: bold;
    box-sizing: border-box;
    cursor: pointer;
  }
  .gnav li:last-child > a {
    border-right: 1px solid #422F19;
  }
  .gnav li > a:hover {
    background: #E1D1C2;
    transition: 0.8s;
  }
  .gnav li.current > a {
    color: #B48F4A;
  }

/* .mainImg
------------------------------------------------------------- */
.mainImg {
  clear: both;
  position: relative;
  margin-bottom: 30px;
}
  .mainImg p.news {
    position: absolute;
    right: 50px;
    top: 150px;
    width: 16em;
    padding: 18px 20px 16px 20px;
    background: #FFF;
    opacity: 0.8;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
  }

/* .content
------------------------------------------------------------- */
.content {
  overflow: hidden;
  margin-bottom: 20px;
}
  .content > h3 {
    margin-bottom: 10px;
    padding: 3px 0 2px 10px;
    border-left: 16px solid #4A2C17;
  }
  .recommend {
    position: relative;
    left: 0;
    top: 0;
    float: left;
    width: 310px;
    margin-right: 15px;
    cursor: pointer;
  }
  .recommend:last-of-type {
    margin-right: 0;
  }
  .recommend p.items {
    position: absolute;
    left: 0;
    top: 200px;
    color: #FFF;
    padding: 10px 10px 8px 12px;
    line-height: 1.4;
    z-index: 100;
    background-color: rgba(66,47,25,0.7);
    cursor: default;
    transition: 0.3s ease ;
  }
  .recommend:hover p.items {
    position: absolute;
    left: 0;
    top: 116px;
  }

/* .aside
------------------------------------------------------------- */
.aside li {
  position:relative;
  overflow: hidden;
  float: left;
  margin-right: 10px;
  padding: 6px;
  height: 160px;
  text-align: center;
  color: rgba(255,255,255,0);
}
  .aside li:last-child {
    margin-right: 0;
  }
  .aside li > a {
    overflow: hidden;
    display: block;
    border: 6px solid #FFF;
    box-shadow: 0 0 6px #AAA;
  }
  .aside li .caption {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 100%;
    text-align: center;
    cursor: default;
    transition: 0.3s ease ;
    background-color: rgba(255,255,255,0);
  }
  .aside li .more {
    left: 37.5%;
    top: 100%;
    width: 120px;
    margin: 0 auto;
    color: #FFF;
    padding: 10px;
    border: 1px solid #FFF;
    text-align: center;
    cursor: default;
    transition: 0.3s ease ;
    background-color: rgba(255,255,255,0);
  }
  .aside li:hover .caption {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 60px;
    background-color: rgba(66,47,25,0.7);
    color: #FFF;
    cursor: pointer;
  }
  .aside li:hover .more {
    position: absolute;
    left: 37.5%;
    top: 90px;
    width: 120px;
    margin: 0 auto;
    color: #FFF;
    padding: 10px;
    border: 1px solid #FFF;
    cursor: pointer;
  }

/* .footer
------------------------------------------------------------- */
.footer {
  background: #422F19;
  color: #FFF;
}
  .footerWrap {
    overflow: hidden;
    width: 1020px;
    margin: 0 auto;
    padding: 20px 0 100px 0;
  }
  .footerNav {
    overflow: hidden;
    float: left;
    width: 800px;
    text-align: center;
  }
  .footerNav li {
    float: left;
    text-align: center;
    font-size: 14px;
  }
  .footerNav li > a {
    display: block;
    padding: 0 20px;
    color: #FFF;
    border-left: 1px solid #FFF;
    box-sizing: border-box;
  }
  .footerNav li:last-child > a {
    border-right: 1px solid #FFF;
  }
  p.copy {
    float:right;
  }

/* .footer
------------------------------------------------------------- */
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 77%;
}
  #page-top a {
    background: #666;
    text-decoration: none;
    color: #FFF;
    width: 64px;
    padding: 18px 0 16px 0;
    text-align: center;
    display: block;
    border-radius: 50px;
    line-height: 1.2;
  }
  #page-top a:hover {
    background: #999;
  }

求職者支援訓練 フェリカテクニカルアカデミー