<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<title>last</title>
</head>
<body>
<header>
<nav>
<ul class="menu">
<li class="single">
<a href="#home-about"><i class="fas fa-desktop"></i>活動概要</a>
</li>
<li class="wide">
<a href="#about"><i class="fas fa-pencil-alt"></i>食玩とは？</a>
</li>
<li class="single">
<a href="#flow"><i class="far fa-clipboard"></i>使い方</a>
</li>
<li class="wide">
<a href="http://roy.e.koeki-u.ac.jp/~c120187/rubyII/shokugan.html"><i class="far fa-folder-open"></i>プログラムページ</a>
</li>
<li class="wide">
<a href="http://roy.e.koeki-u.ac.jp/~c120028/kisoproweb/member.html"><i class="far fa-address-book"></i>メンバー紹介</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="mainvisual">
<h1>デルタチーム</h1>
</div>
<!-- about -->
<section id="home-about" class="wrapper">
<h2 class="section-title">活動概要</h2>
<div class="about-container">
<div class="home-items">
<img src="usingcomputer_woman_color.png" alt="人">
<div class="what_study">
<h3><i style="color:orange;" class="fas fa-angle-double-right fa-lg"></i> 食玩クイズについて</h3>
<p>デルタチームでは、食玩を使ったクイズを作りました。
食玩に関するテキストを読んだり、クイズに答えたりしながら、
食玩の特徴や歴史などを知ることができます。また、プロジェクト型応用演習の際に作成
したuMapを用いて、公益大周辺で食玩を取り扱っているスーパーやコンビニについて調べられます。</p>
</div>
</div>
</section>
<section id="contact">
<div class="contact-inner">
<a class="btn" href="https://s4.koeki-prj.org/s4-world-2021au.cgi?showattc+article_m+5348">ポスターはこちらから</a>
<a class="btn" href="https://s4.koeki-prj.org/s4-world-2021au.cgi?showattc+article_m+5300">説明書はこちらから</a>
</div>
</section>
<section id="about" class="wrapper">
<h2 class="section-title">食玩とは</h2>
<div class="oneArea">
<div class="onebox">
<div class="imgArea"><img src="cat_color.png" alt="猫"></div>
<div class="fukiArea"><div class="fukidasi">食玩ってあまり耳馴染みがないけれどどんなものなのかな？</div></div>
</div>
<div class="onebox">
<div class="imgArea"><img src="squirrel_color.png" alt="りす"></div>
<div class="fukiArea"><div class="fukidasi">食玩っていうのはお菓子についてくるカードやおもちゃのことだよ！</div></div>
</div>
<div class="onebox mg">
<div class="imgArea"><img src="cat_color.png" alt="猫"></div>
<div class="fukiArea"><div class="fukidasi">お菓子についてくるおもちゃ？そんなのあったっけ？</div></div>
</div>
<div class="onebox">
<div class="imgArea"><img src="squirrel_color.png" alt="りす"></div>
<div class="fukiArea"><div class="fukidasi">えっへん！それじゃあわからない君に写真で説明してあげよう！</div></div>
</div>
<div class="onebox mg">
<div class="imgArea"><img src="cat_color.png" alt="猫"></div>
<div class="fukiArea"><div class="fukidasi">助かるよ！ありがとうーー！！</div></div>
</div>
</div>
<div class="img-ex">
<div class="img">
<img src="box.jpg" alt="box">
</div>
<div class="text">
<h2 class="ex-title">
<span class="en">Box</span>
<span class="ja">食玩の外側</span>
</h2>
<p>
よくお菓子売り場で売られているこのようなお菓子箱
をみたことありませんか？
</p>
<p>
このようなお菓子箱についてくるフィギュア・カード
・キーホルダーなどが食玩です。
</p>
<p>
子供の頃は食玩目当てにお菓子を買ってもらっていた
人も多いのではないでしょうか。
</p>
</div>
</div>
<div class="img-ex">
<div class="img">
<img src="figure.jpg" alt="figure" class="img3">
</div>
<div class="text">
<h2 class="ex-title">
<span class="en">Figure</span>
<span class="ja">食玩について</span>
</h2>
<p>
最近の食玩にはこのような高クオリティのフィギィア
などもあります。
</p>
<p>
食玩目当てでお菓子を買う大人もたくさんいるくらい
食玩は人気があります。
</p>
<p>
皆さんも好きなキャラクターの食玩がついてくるお菓子
を見つけたら買ってみてください！
</p>
</div>
</div>
<div class="oneArea">
<div class="onebox">
<div class="imgArea"><img src="cat_color.png" alt="猫"></div>
<div class="fukiArea"><div class="fukidasi">なるほどねー！子供の頃僕も買ってもらっていたなー！</div></div>
</div>
<div class="onebox">
<div class="imgArea"><img src="squirrel_color.png" alt="りす"></div>
<div class="fukiArea"><div class="fukidasi">思い出せた？ちなみにスーパーなどで買えるよ！</div></div>
</div>
<div class="content">
<ul id="slider">
<li><img src="supermarket.jpg" alt="sスーパー"></li>
<li><img src="ec.jpg" alt="段ボール"></li>
<li><img src="collection.jpg" alt="コレクション"></li>
<li><img src="anime.jpg" alt="もの"></li>
</ul>
</div>
</div>
</section>
<section id="flow">
<div class="wrapper">
<h2 class="section-title">使い方</h2>
<div class="step">
<ol class="figure">
<li>食玩の概要</li>
<li>マニアックイズ</li>
<li>店舗紹介</li>
<li>商品検索</li>
<li>アンケート</li>
</ol>
<dl class="description">
<dt><span>1</span>食玩の概要</dt>
<dd>
食玩の特徴や販売店舗など、3つのテーマを読み進め、最後に簡単な練習問題を解きましょう。
</dd>
<dt><span>2</span>マニアックイズ</dt>
<dd>
食玩にもっと詳しくなれるよう、歴史やシリーズなど、やや難易度の高い問題に答えましょう。食玩の面白さにハマってしまうかも..!?
</dd>
<dt><span>3</span>店舗紹介</dt>
<dd>
uMapを使ったプログラムです。レイヤ分けで見たり、店舗検索を活用したりして、店の品揃えやジャンルについて調べましょう。地図を見ながらなので視覚的にも楽しみながら学ぶことができます。
</dd>
<dt><span>４</span>商品検索</dt>
<dd>
キーワードを入れるか、ジャンルを選ぶかして、食玩のシリーズや価格を検索しましょう。
</dd>
<dt><span>５</span>アンケート</dt>
<dd>
食玩についてや今回のプログラムやWebページについてのアンケートです。
</dd>
</dl>
</div>
<div class="btn-small"><span class="small">\\ 食玩プログラムページはこちら！ //</span></div>
<div class="btn-div"><a href="http://roy.e.koeki-u.ac.jp/~c120187/rubyII/shokugan.html" class="btn">Push!!</a></div>
</div>
</section>
<section id="index" class="wrapper">
<h2 class="section-title">アピール点・苦労した所</h2>
<div class="index-inner">
<h3 class="index-title">アピール点</h3>
<ol class="index-list">
<li>多くの人に食玩を親しんでもらえるよう、魅力が伝わるテキストやクイズにした点。</li>
<li>酒田KOEKIマップのプロジェクト型応用演習で得た成果を、ウェブページに反映させた点。</li>
<li>実際に店舗（ト一屋 みずほ通り店様）に足を運び、お菓子売り場の写真を撮影した点。</li>
<li>アニメや特撮、フィギュアやプラモデルなど、幅広い種類の食玩を検索できるようにした点。</li>
</ol>
</div>
<div class="index-inner mg-top">
<h3 class="index-title">苦労した点</h3>
<ol class="index-list">
<li>食玩を知らない人も話題に触れられるよう、どういった入口にしたらよいか考えた点。</li>
<li>クイズの正解数を集計するために、オブジェクト指向のクラス変数を使用した点。</li>
<li>チーム内の食玩に詳しい人とそうでない人で、どう役割を分けて進捗管理していくかという点。</li>
<li>アンケート結果をデータベースで扱えるよう、SQLite（エスキューライト）を導入した点。</li>
</ol>
</div>
</section>
<section class="security">
<h2 class="section-title">無保証・参考文献</h2>
<p class="sec-text">このプログラムは、デルタチームが著作権を保有しています。<br>
このプログラムの入手・実行・改変・再配布は、いずれも無料で行うことができます。<br>
ただし、このプログラムを取り扱うことで生じた、いかなる結果に対しても<br>
著作権者は一切の責任を負いません。</p>
<div class="sec-list-item mg-top-list">
<h3 class="list-title">参考文献</h3>
<ol class="sec-list">
<li>食品新聞社.おいしいだけじゃつまんない！年間300品発売、バンダイの食玩 大人や女性にも購買広がる - 食品新聞 WEB版（食品新聞社)<br>
(参照 2021-12-22)<br>
<a href="https://shokuhin.net/48631/2021/10/25/kakou/kashi/" class="black">https://shokuhin.net/48631/2021/10/25/kakou/kashi/</a></li>
<li>株式会社バンダイ.「教えて！”あなたが読みたいブログ”」 スーパーミニプラ編 - バンダイ キャンディ スタッフ BLOG<br>
(参照 2021-12-22)<br>
<a href="https://bandaicandy.hateblo.jp/entry/2017/10/31/180000" class="black">https://bandaicandy.hateblo.jp/entry/2017/10/31/180000</a></li>
<li>植竹剛.おもちゃ付きの菓子「食玩」は、軽減税率の適用対象か？ - Airレジ マガジン<br>
(参照 2021-12-22)<br>
<a href="https://airregi.jp/magazine/guide/5795/" class="black">https://airregi.jp/magazine/guide/5795/</a></li>
<li>ちょうどいいイラスト<br>
(参照 2021-12-22)<br>
<a href="https://tyoudoii-illust.com/" class="black">https://tyoudoii-illust.com/</a></li>
<li>CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！<br>
(参照 2021-12-22)<br>
<a href="https://jajaaan.co.jp/css/button/" class="black">https://jajaaan.co.jp/css/button/</a></li>
<li><br>
(参照 2021-12-22)<br>
<a href="https://gist.github.com/nichesan/4731662" class="black">https://gist.github.com/nichesan/4731662</a></li>
<li>nichesan.RubyとSQLiteを使った掲示板 · GitHub<br>
(参照 2022-01-15)<br>
<a href="https://www.bandai.co.jp/candy/" class="black">https://www.bandai.co.jp/candy/</a></li>
<li>株式会社バンダイ.バンダイ キャンディ公式サイト<br>
(参照 2022-01-22)<br>
<a href="https://jajaaan.co.jp/css/button/" class="black">https://jajaaan.co.jp/css/button/</a></li>
<li>カバヤ食品株式会社.玩具菓子一覧 | カバヤ食品株式会社<br>
(参照 2022-01-15)<br>
<a href="https://www.kabaya.co.jp/catalog/candytoy/" class="black">https://www.kabaya.co.jp/catalog/candytoy/</a></li>
<li>フルタ製菓株式会社.フルタ製菓株式会社<br>
(参照 2022-01-15)<br>
<a href="http://www.furuta.co.jp/products/chocoegg.html" class="black">http://www.furuta.co.jp/products/chocoegg.html</a></li>
</ol>
</div>
</section>
<footer id="footer">
<p>© 2021-2022 by Delta Team</p>
</footer>
</main>
<script>
$(function(){
$('#slider').slick({
autoplay: true, // 自動再生オン
autoplaySpeed: 3000, // スライドを3秒で切り替え
arrows: true, // 左右の矢印を表示
dots: true, // ドット（ページ送り）を表示
slidesToShow: 1, // スライドを1枚表示（※centerModeをtrueにすると両端に2枚見切れた状態になる）
centerMode: true, // センターモード（両端が見切れた状態になる）
centerPadding: '0.1%', // 見切れたコンテンツの幅を18%に設定
prevArrow:'<div class="prev"></div>', // 前へ矢印のHTMLを変更する
nextArrow:'<div class="next"></div>', // 次へ矢印のHTMLを変更する
responsive: [ // レスポンシブの設定
{
breakpoint: 900, // 900px以下の場合に適用
settings: {
centerMode: false // センターモードをオフにする
}
}
]
});
});
</script>
</body>
</html>
ItoRino