HTML＋CSS＋スライド - モバイルファースト - 実践

店舗サイトをつくるモバイルファースト

前回の実践のHTMLを利用して、CSSをモバイルファーストで作成します。

モバイルファーストとは

主にスマートフォンでストレスなく利用できるデザインにすること。
- モバイル：スマートフォン、タブレットなど
主にスマートフォン向けサイトを優先的に制作・公開すること。 *この意味解釈には、否定的な意見もあります。

インターネットはパソコンから始まったため、Webサイト制作（CSS/見栄え）は、パソコンから始めて、後からモバイルにも対応させていくのが基本的な流れです。
しかし、モバイルは、画面の大きさや通信速度などの制限があるため、パソコンの機能を全て詰め込んだままモバイル対応させると、サイトが重いなどの問題が起こります。その改善のため「モバイルファースト」という手法が生まれました。

ポイント

「TOPへ戻る」ボタンをjQuery / Font Awesome Iconsで設置
- スクリプトが長くなったので、読み込み時間の軽減のためbody内の最下部へ移動
前回のPCプレビューではうまく作動していたbxSliderが、SPプレビューでは不具合があるためスクリプトを変更

実践

例

出典：02/25 モバイルファースト - 課題 - 求職者支援訓練12月19日開講Webサイト制作科白描

解答

＜HTML＞

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="css/jquery.bxslider.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet">
<link href="css/style_mbfirst.css" rel="stylesheet">
<title>タイ料理のお店 | THAI-NAMA</title>
</head>
<body>
<header>
<div class="container">
<h1><a href="#"><img src="img/logo.jpg" alt="タイ料理のお店 THAI-NAMA"></a></h1>
<ul class="nav">
<li><a href="#">CONCEPT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">ACCESS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</header>

<main>
<div class="container">
<div class="mainimg">
<ul class="bxslider">
<li><img src="img/mainImage01.jpg" alt="生春巻き" title="生春巻き"></li>
<li><img src="img/mainImage02.jpg" alt="鯛" title="鯛"></li>
</ul>
</div>
<p class="intro">THAI-NAMAは<br>
タイ風の家庭的な料理をご提供しているお店です。<br>
季節感を大切に、旬のものを使いつつ、楽しんで貰えるメニューを揃えています。</p>

<div class="recommend">
<h2 class="red wf-sawarabigothic">おすすめメニュー</h2>
<ul class="subimg">
<li><a href="#"><img src="img/subimage01.jpg" alt="フォー">フォー</a></li>
<li><a href="#"><img src="img/subimage02.jpg" alt="カオソーイ">カオソーイ</a></li>
<li><a href="#"><img src="img/subimage03.jpg" alt="ヤムウンセン">ヤムウンセン</a></li>
</ul>
</div>
	
<div class="news">
<h2 class="wf-sawarabigothic">NEWS</h2>
<dl>
<dt><i class="fa fa-square red" aria-hidden="true"></i>2019/12/15</dt>
<dd>冬のメニューを追加しました</dd>
<dt><i class="fa fa-square red" aria-hidden="true"></i>2019/02/01</dt>
<dd>春の新作メニューを追加しました</dd>
</dl>
</div>
</div><!-- container -->
</main>

<footer>
<div class="container">
<ul class="nav">
<li><a href="#">CONCEPT</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">ACCESS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div class="wrapper">
<div class="info">
<p class="tel">03-1234-4567</p>
<p class="email">reservation@thai-nama.net</p>
</div>
<div class="axs">
<p>〒150-0001 東京都渋谷区神宮前3-4-5 タイ生ビル1F<br>
JR渋谷駅徒歩5分<br>
JR原宿駅徒歩6分<br>
副都心線、千代田線明治神宮前徒歩7分</p>
</div>
</div>
<p class="copy"><small>&copy; 2019 タイ料理のお店 THAI-NAMA</small></p>
</div><!-- container -->
</footer>
  
<p id="to-top"><a href="#"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a></p>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  var topBtn = $('#to-top');
  topBtn.hide();
  //スクロールが100に達したらボタン表示
  $(window).scroll(function(){
     if($(this).scrollTop() > 100) {
       topBtn.fadeIn();
      } else {
       topBtn.fadeOut();
      }
  });
  //スムーススクロール
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});
</script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(function(){
  $('.bxslider').bxSlider({
    auto: true,
    pager: false,//スライダー下の点を消す
    captions: true,
  });
});
</script>
</body>
</html>

＜CSS＞

@charset "UTF-8";

/* reset */
html,body,header,footer,div,h1,h2,h3,p,ul,li,dl,dt,dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  border: none;
  vertical-align: bottom;
  max-width: 100%;/*フルードデザイン*/
}

/* layout */
html {
  font-size: 62.5%;/* =10px */
}
body {
  font-size: 1.6rem;/* =16px */
  color: #797979;
}
.container {
  padding: 0 5%;
}

/* nav */
header {
  border-bottom: 3px solid #a40000;
  text-align: center;
  margin: 4% 0 2%;
}
h1 {
  margin-bottom: 2%;
}
.nav {
  display: flex;
  letter-spacing: .1rem;
}
.nav a {
  display: block;
  line-height: 2.4;
}
header .nav {
  justify-content: space-around;
  font-size: 1.6rem;
  margin: 0 6% 0 6%;
}
footer {
  background: #8fc31f;
  color: #FFF;
  padding: 0 0 3%;
}
footer .nav {
  display: block;
  line-height: 2.6;
}
footer .container {
  padding: 0;
}
footer .nav a {
  font-size: 1.6rem;
  text-align: center;
  border-bottom: 1px solid #FFF;
}

/* slider */
.bx-wrapper {
  border: none;
  margin-bottom: 5%;
}
.bx-wrapper .bx-prev {
  background: url(../img/controls.png)
}
.bx-wrapper .bx-next {
  background: url(../img/controls.png) -43px -32px no-repeat;
}
.bx-wrapper .bx-loading {
  background: url('../img/bx_loader.gif') center center no-repeat #ffffff;
}
.bx-wrapper .bx-caption {
  background: none;
  left: 3%;
  top: 24%;
}
.bx-wrapper .bx-caption span {
  color: rgba(80, 80, 80, 0.75);
  font-size: 2.2rem;
}/* captions-titleを画像名として使用 */

/* item */
.intro {
  text-align: center;
  line-height: 1.6;
  margin-bottom: 40px;
}
.recommend {
  text-align: center;
}
.recommend h2 {
  margin-bottom: 10px;
}
.wf-sawarabigothic {
  font-family: "Sawarabi Gothic";
}
.red {
  color: #a40000;
}
.subimg {
  display: block;
  justify-content: space-between;
}
.subimg li {
  width: 300px;
  padding: 6px;
  border: 1px solid #797979;
  margin: 4px auto 26px;
}
.subimg img {
  margin-bottom: 6px;
}
.news {
  margin-bottom: 26px;
}
.news h2 {
  margin: 20px 0 10px;
}
.fa-square {
  margin-right: 5px;
}
.news dt {
  float: left;
  margin-right: 10px;
}
.news dt, .news dd {
  line-height: 1.6;
}

/* footer */
.wrapper {
  padding: 5%;
}
.info {
  margin: 0 0 5%;
}
.axs {
  font-size: 1.4rem;
}
.axs p {
  line-height: 1.6;
}
.tel {
  font-size: 2.4rem;
  margin-bottom: 1%;
}
.email {
  font-size: 2rem;
}
.copy {
  text-align: center;
}

/* to-top */
#to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
#to-top a {
  display: block;
  color: #000;
  background: #FFF;
  text-align: center;
  border-radius: 50%;
  box-sizing: border-box;
}
#to-top a:hover {
  color: #666;
}
.fa-chevron-circle-up {
  font-size: 4rem;
}

@media screen and (min-width: 768px){
  /* layout */
  html {
    font-size: 100%;
  }
  body {
    font-size: 16px;
  }
  .container {
    width: 960px;
    margin: 0 auto;
  }

  /* nav */
  header {
    overflow: hidden;
    margin: 0;
  }
  h1 {
    float: left;
    margin: 52px 0 0;
  }
  .nav {
    letter-spacing: 2px;
  }
  header .nav {
    justify-content: flex-end;
    align-items: flex-end;
    padding-top: 70px;
    margin: 0;
  }
  header .nav a {
    font-size: 14px;
    line-height: 3.0;
    padding-left: 42px;
  }
  footer {
    padding: 20px 0;
  }
  footer .nav {
    display: flex;
    justify-content: space-around;
    width: 700px;
    margin: 0 auto 30px;
  }
  footer .nav a {
    border: none;
    font-size: 18px;
  }

  
  /* item */
  .intro {
    line-height: 2.0;
  }
  .subimg {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #797979;
  }
  .subimg li {
    margin: 4px 4px 26px;
  }

  /* footer */
  .wrapper {
    overflow: hidden;
    margin-bottom: 26px;
    padding: 0;
  }
  .info {
    float: left;
    width: 400px;
    height: 90px;
    margin: 0 20px;
  }
  .axs {
    float: right;
    width: 500px;
    font-size: 14px;
  }
  .tel {
    font-size: 24px;
  }
  .email {
    font-size: 20px;
  }
  #to-top a {
    display: none;
  }
}