HTML＋CSS＋スライド - 実践 - WEB制作の備忘録

店舗サイトをつくる（応用編）

PSDカンプからコーディング
クラス名「container」で、横幅960pxに統一

header

h1（左）とナビゲーション（右）が横並び
スライダーを設置：カスタマイズ

main

h2とp（キャッチコピー）は、１カラム
おすすめ写真３点が横並び、画像下にメニュー名
「NEWS」内容は、定義型リスト

footer

フッターナビゲーション
TEL、アクセス情報は２カラム
Copyright

実践

例

出典：01/18 CSSレイアウト - HTML文書構造 - 求職者支援訓練12月19日開講Webサイト制作科白描

＜カンプ＞
odnax.hatenablog.com

リンク先の例（キャプチャ）の下＞「素材」をダウンロード
上記の例（キャプチャ）は応用編、ダウンロードしたカンプは通常編のため、例を元にして、カンプの素材を切り出してコーディングします。

テキスト

タイ料理のお店 THAI-NAMA

CONCEPT
MENU
ACCESS
CONTACT

生春巻き

THAI-NAMAは
タイ風の家庭的な料理をご提供しているお店です。
季節感を大切に、旬のものを使いつつ、楽しんで貰えるメニューを揃えています。

おすすめメニュー
フォー
カオソーイ
ヤムウンセン

NEWS
2019/12/15
冬のメニューを追加しました
2019/02/01
春の新作メニューを追加しました

CONCEPT
MENU
ACCESS
CONTACT

03-1234-4567
reservation@thai-nama.net

〒150-0001 東京都渋谷区神宮前3-4-5 タイ生ビル1F
JR渋谷駅徒歩5分
JR原宿駅徒歩6分
副都心線、千代田線明治神宮前徒歩7分

© 2019 タイ料理のお店 THAI-NAMA

ポイント

jQueryのプラグイン「bxSlider」をカスタマイズ
- キャプションのスタイルを変更して、画像名として使用
回り込みにfloat、display: flex;を使用

解答

＜HTML＞

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<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.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
  $(function(){
  $('.bxslider').bxSlider({
    auto: true,
    pager: false,//スライダー下の点を消す
    captions: true
  });
});
</script>
<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>
</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;
}

/* body */
body {
  font-size: 16px;
  color: #797979;
}

/* layout */
.container {
  width: 960px;
  margin: 0 auto;
}
footer {
  background: #8fc31f;
  color: #FFF;
  padding: 20px 0;
}

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

/* slider */
.bx-wrapper {
  border: none;
}
.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を画像名として使用 */
.bx-wrapper img {
  width: 960px;
  height: 490px;/* 最後のスライダー画像が最初に表示されてしまう対処法 */
}

/* item */
.mainimg {
  margin-bottom: 26px;
}
.intro {
  text-align: center;
  line-height: 2.0;
  margin-bottom: 40px;
}
.recommend {
  text-align: center;
}
.recommend h2 {
  margin-bottom: 10px;
}
.wf-sawarabigothic {
  font-family: "Sawarabi Gothic";
}
.red {
  color: #a40000;
}
.subimg {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #797979;
}
.subimg li {
  width: 300px;
  padding: 6px;
  border: 1px solid #797979;
  margin: 4px 4px 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;
}

.wrapper {
  overflow: hidden;
  margin-bottom: 26px;
}
.info {
  float: left;
  width: 400px;
  height: 90px;
  margin: 0 20px;
}
.axs {
  float: right;
  width: 500px;
  font-size: 14px;
}
.axs p {
  line-height: 1.6;
}
.tel {
  font-size: 24px;
  margin-bottom: 4px;
}
.email {
  font-size: 20px;
}
.copy {
  text-align: center;
}

＜参考サイト＞

odnax.hatenablog.com