みんなは、回転寿司に行ったことがあるかな？美味しそうなお寿司が、くるくる回ってる。どれにしようか、迷っちゃうよね。大阪で、有名な大手チェーン店だとどこがあるかな。AIに聞いてみました！
全国チェーン・大規模チェーン
| チェーン名 | 特徴など |
|---|---|
| スシロー (Sushiro) | 全国チェーン。安くてネタが豊富でコスパ高め。関西でも人気ナンバーワンとの声も多い。 ねとらぼ+1 |
| くら寿司 (Kura Sushi / 無添くら寿司) | 大阪発祥。鮮度や衛生にこだわりがあり、メニューも家族連れ向け。 食べログ+2ウィキペディア+2 |
| はま寿司 (Hama Sushi / 浜寿司) | 比較的リーズナブル。全国に多く店舗あり。 食べログ+2ねとらぼ+2 |
| かっぱ寿司 (Kappa Sushi) | 安定感のある価格帯とメニュー構成。チェーン展開が広い。 食べログ+1 |
地元密着型や高級寄りなど特色ある店
| 店名 | 特徴 |
|---|---|
| 元禄寿司 | “回転寿司の元祖”のひとつとされていて、歴史あるお店。大阪での回転寿司文化のルーツに近い。 MATCHA |
| にぎりの徳兵衛 | やや上質で広さ・雰囲気も良い店が多い。 食べログ+1 |
| 大起水産回転寿司 | 海鮮に力を入れていて、ネタの鮮度が高いと評判。 食べログ |
| 北海素材 | ネタ・シャリ・醤油など素材にこだわっている。ランチがお得なところもあり。 北海素材 |
| 金沢まいもん寿司 | 北陸産のネタを使っていたり、ちょっと贅沢な感じの寿司を楽しめる店舗がある。 Retty（レッティ） |
| 函太郎 | 函館系の海鮮を使った店舗。高級感があるところも。 Retty（レッティ） |
今日は、きみの好きなネタを集めて動くホームページを作ってみよう。
【サンプルを見る】https://wwweb.jp/sample/sushi/
まずは、ネタ集め！
回転寿司のホームページへ行って、美味しそうな寿司の写真を集めてこよう。
HTMLに記述する。
画像の名前は、記述しやすいように短く連番にするといいよ。例えば、su01.png、次の画像はsu02.pngという風に書き換えると楽に書き換えることができる。同じ記述が連続で並ぶので、コピペを使うといいよ。
<div class="slider-wrapper">
<ul class="slider">
<li class="slide"><img src="画像"></li>
<li class="slide"><img src="画像"></li>
<li class="slide"><img src="画像"></li>
</ul>
<ul class="slider">
<li class="slide"><img src="画像"></li>
<li class="slide"><img src="画像"></li>
<li class="slide"><img src="画像"></li>
</ul>
</div>CSSに記述する。
ul,li{
margin:0;padding:0;
list-style-type: none;
}
/* スライダー全体 */
.slider-wrapper {
display: flex;
overflow: hidden;
}
.slider {
animation: scroll-left 5s infinite linear .5s both;
display: flex;
}
.slide {
width: calc(100vw / 3); /* 3はスライドの枚数 */
}
.slide img {
display: block;
width: 70%;/*画像の大きさは、調整しよう。*/
}
/* CSSアニメーション */
@keyframes scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
うまくできたかな？
サンプルを見る ▶︎https://wwweb.jp/sample/sushi/
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。