WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

HTML/CSS/jQuery・jQueryプラグイン/レスポンシブ

訓練校最終テスト

f:id:mmmmofu:20160712005356p:plain

実際のサイトはこちら

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<style>
header, footer, nav, article { display:block; }
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/opacity-rollover2.1.js"></script>
<script>
//opacity-rollover2.1.js
$(function() {
  $('.opacity').opOver();
});
//bxSlider
$(document).ready(function(){
  $('.bxslider').bxSlider({
    auto: true,
    autoControls: true,
    captions:true
  });
});
//アコーディオン
$(function(){
  $( 'ul.menu:not(:first)' ).hide();
  $( '.category' ).on( 'click', function(){
          $('ul.menu').slideUp();
    if( $( '+ul',this).css( 'display' ) == 'none' ) {
      $( '+ul',this).slideDown();
      $( 'p.category:not(.open)').addClass('open');
    }

  });
});
</script>
<title>AAPharmacy</title>
</head>
<body id="top">
<div id="container">
<header>
<div class="header">
<h1 class="logo">株式会社AA製薬 / AA Pharmacy INC.</h1>
<nav>
<ul>
<li class="company"><a href="#" class="opacity">会社概要</a></li>
<li class="research"><a href="#" class="opacity">研究開発</a></li>
<li class="product"><a href="#" class="opacity">製品紹介</a></li>
<li class="contact"><a href="#" class="opacity">お問い合わせ</a></li>
<li class="link"><a href="#" class="opacity">リンク</a></li>
</ul>
</nav>
</div><!-- /.header -->
<div class="slider">
<ul class="bxslider">
<li><img src="img/beaker03.jpg" alt="測りの画像" title="健康と笑顔を皆様の元へお届けします"></li>
<li><img src="img/beaker02.jpg" alt="薬品の画像" title="品質検査用薬品環境の画像"></li>
<li><img src="img/landscape.jpg" alt="山の画像" title="奇麗な空気と水が品質の証です"></li>
</ul><!-- /.bxslider -->
</div><!-- /.slider -->
</header>
<div id="wrapper">
<article class="content">
<div class="new">
<h1><img src="img/h1_new.png" alt="新着情報"></h1>
<table>
<dl>
<tr>
<th><dt>2015.8.12</dt></th><td><dd><a href="#">幕張エキスポに出展致します!ぜひご来場ください。詳細はこちら。</a></dd></td>
</tr>
<tr>
<th><dt>2015.7.11</dt></th><td><dd><a href="#">製品情報を追加しました。</a></dd></td>
</tr>
<th><dt>2015.7.10</dt></th><td><dd><a href="#">Webサイトリニューアルしました。</a></dd></td>
</dl>
</table>
<p class="list"><a href="#">一覧へ</a></p>
</div><!-- /.new -->
<div class="company">
<h1><img src="img/h1_company.png" alt="会社概要"></h1>
<h2>株式会社AA製薬について</h2>

<p class="building"><img src="img/building@2x.jpg" alt="社屋写真"></p>
<table>
<dl>
<tr>
<th><dt>住所</dt></th><td><dd>〒000-0000<br>BBB県CCC市DDD町1-2-3</dd></td>
</tr>
<tr>
<th><dt>TEL</dt></th><td><dd>0-0000-0000</dd></td>
</tr>
<tr>
<th><dt>FAX</dt></th><td><dd>0-0000-0000</dd></td>
</tr>
<tr>
<th><dt>アクセス</dt></th><td><dd>詳しい交通案内は<a href="#">こちら</a></dd></td>
</tr>
</dl>
</table>
</div><!-- /.company -->
</article><!-- /.content -->

<aside class="business">
<p class="aside sample"><img src="img/aside_image.jpg" alt="サンプルイメージ"></p>
<p class="aside">業務内容紹介文など、テキストがここに入ります。業務内容紹介文など、テキストがここに入ります。業務内容紹介文など、テキストがここに入ります。業務内容紹介文など、テキストがここに入ります。</p>
<ul class="accordion">
    <li>
        <p class="category ">製品</p>
        <ul class="menu">
            <li><a href=" #">製品A</a></li>
            <li><a href=" #">製品B</a></li>
            <li><a href=" #">製品C</a></li>
        </ul>
    </li>
    <li>
        <p class="category open">サービス</p>
        <ul class="menu">
            <li><a href=" #">サービスA</a></li>
            <li><a href=" #">サービスB</a></li>
            <li><a href=" #">サービスC</a></li>
        </ul>
    </li>
</ul>
<p class="totop"><a href="#top">ページトップへ</a></p>
</aside><!-- /.business -->
</div><!-- /#wrapper -->
</div><!-- /#container -->
<footer>
<div class="nav">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
<p class="copyright"><small>Copyright &copy; 2015- AA Pharmacy, Inc. All rights reserved.</small></p>
</footer>

</body>
</html>
@charset "utf-8";
/* reset */
html, body, div, h1, h2, p, small, ul, li, table, tr, th, td {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    'Hiragino Kaku Gothic ProN',
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
img {
  max-width: 100%;
  border: none;
  vertical-align: bottom;
}
/* font-size */
html { font-size: 62.5%; }
body { font-size: 16px; font-size: 1.6rem; }
h1 { font-size: 32px; font-size: 3.2rem; }
p { font-size: 16px; font-size: 1.6rem; }
/* body */
body {
  border-top: 3px solid #093;
}
/* header */
.logo {
  width:240px;
  height: 50px;
  background: url(../img/logo@2x.png)no-repeat left top;
  background-size:cover;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  float: left;
}
header {
  width: 70%;
  margin: 20px auto 0;
}
.header {
  overflow: hidden;
}
nav ul {
  float: right;
  margin-bottom: 20px;
}
nav ul li {
  float:left;
}
nav  ul li a {
  display: block;
  background: url(../img/head_nav.png) no-repeat left top;
  width: 120px;
  height: 50px;
  white-space:nowrap;
  text-indent: 100%;
  overflow: hidden;
}
nav  ul li.research a {
  background: url(../img/head_nav.png) no-repeat -120px 0;
}
nav  ul li.research a {
  background: url(../img/head_nav.png) no-repeat -120px 0;
}
nav  ul li.product a {
  background: url(../img/head_nav.png) no-repeat -240px 0;
}
nav  ul li.contact a {
  background: url(../img/head_nav.png) no-repeat -360px 0;
}
nav  ul li.link a {
  background: url(../img/head_nav.png) no-repeat -480px 0;
}
/* article */
#wrapper {
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 20px;
}
.content {
  width: 70%;
  float: left;
  margin-bottom: 30px
}
.content h1 {
  margin-bottom: 20px;
}
.content h2 {
  font-size: 1.8rem;
  color: #666;
}

dl {
  overflow: hidden;
}
dt {
  float: left;
  color: #333;
}
.list {
  text-align: right;
  margin-top:30px;
}
.list a {
  color: #FFF;
  background: url(../img/arw_cir_r_22.png)no-repeat 10px #339933;
  padding: 10px;
  padding-left: 40px;
  border-radius: 10px;
  text-decoration: none;
}
.new {
  margin-bottom: 20px;
}
th {
  width: 70px;
}
th,td {
  padding: 10px 0 10px 0;
  border-bottom: 1px dotted #000;
}
/* aside */
.business {
  width: 25%;
  float: right;
}
.building {
  width: 320px;
  height: 140px;
  background-size: cover;
  float: right;
  margin-top: 50px;
}
.business p.aside {
  line-height: 1.4;
  font-size: 1.4rem;
  margin-bottom: 20px;
}
.category {
  background: #333;
  color: #FFF;
  padding: 10px 0 10px 30px;
  cursor:pointer;
}
.open {
  background: #CCC;
  color: #333;
}
ul.accordion {
  margin-bottom: 50px;
}

ul.menu li {
  display:block;
}
ul.menu li a {
  width: 100%;
  color: #333;
  display: block;
    padding: 10px 0 10px 30px;
}
ul.menu li a:hover {
  background: #CCC;
}
.totop {
  padding: 10px 0;
  text-align: right;
}
.totop a {
  background: url(../img/arw_sq_up_22.png)no-repeat;
  padding-left: 30px;
}
/* footer */
footer {
  border-top: 1px solid #98c2ed;
  width: 70%;
  margin: 0 auto;
}
footer ul {
  overflow: hidden;
  margin-bottom: 20px;
  width: 250px;
  margin: 10px auto;
}
footer li {
  float: left;
  padding: 10px 0;
  margin-right: 20px;
}
footer li a {
  background: url(../img/arw_sq_r_22.png)no-repeat;
  padding-left: 30px;
}
.copyright {
  width: 100%;
  height: 50px;
    background: #999;
  border-radius: 10px;
  color: #FFF;
  text-align: center;
  line-height: 50px;
}
/* 擬似クラス */
a {
  color: #003366;
}
@media screen and (max-width:640px){

.logo {
  float: none;
  margin: 0 auto;
}
header {
  width: 100%;
}
#wrapper {
  width: 90%;
  margin: 0 auto;
}
.content {
  float: none;
  width: 100%;
}
.business{
  float: none;
  width: 100%;
}
nav ul {
  float: none;
  margin-bottom: 20px;
}
nav ul li {
  float:left;
  width: 25%;
}
nav  ul li a {
  display: block;
  background: linear-gradient(to bottom, #91bc83, #389a38 100%);
  width: 100%;
  height: 50px;
  white-space: inherit;
  text-indent: inherit;
  overflow: inherit;
  text-decoration: none;
  line-height: 50px;
  font-size: 1.4rem;
  text-align: center;
  color: #FFF;
  border-right: 1px solid #389a38;
}
nav  ul li.research a {
  background: linear-gradient(to bottom, #91bc83, #389a38 100%);
}
nav  ul li.research a {
  background: linear-gradient(to bottom, #91bc83, #389a38 100%);
}
nav  ul li.product a {
  background: linear-gradient(to bottom, #91bc83, #389a38 100%);
}
nav  ul li.contact a {
  background: linear-gradient(to bottom, #91bc83, #389a38 100%);
}
nav  ul li.link a {
  display: none;
}
.building {
  width: 100%;
  height: auto;
  background-size: cover;
  float: none;
  margin-top: 20px;
}
p.sample {
  text-align: center;
}
footer {
  width: 100%;
}
}

こちらのプラグインを使用しました。
h2ham.seesaa.net