とつげき！サイトレビュー#2-bed & breakfast ichi-
①サイトレビュー
【サイト名】
◎夫婦で営む手づくりのお宿 bed & breakfast ichi
【概要】
◎三浦・三崎にある夫婦で営む小さな宿屋
◎三浦の自然を体験できるツアー
【ターゲット】
◎三浦半島に興味のある方
◎三浦・三崎に旅行、観光したい方
◎自然豊かな町で自然を楽しみたい方
【印象】
◎あたたかみがある、ぬくもり、やさしい、自然豊か
【コンテンツ】
◎カラー：#1b2f5b（青系統）、#0a1a3c（紺系統）
◎フォント："FOT-筑紫Aオールド明朝 Pr6 R", "Yu Mincho Medium", "游明朝 Medium", YuMincho, 游明朝, "Noto Serif JP", "ヒラギノ角ゴ Pro W3", メイリオ, serif;
◎メインビジュアル：宿で提供される料理をはじめとした4枚の写真のスライドショー。
◎ナビバー：ホーム、☆ichiの1日とお宿のすべて（CONCEPT）、☆宿からのお知らせ（NEWS）、☆体験ツアー（ABOUT TOUR）
☆：別リンク
【気付いたところ】
◎”人を迎えながら、私たちは生きていきたい”というキャッチコピーどおり、実家のような安心感を与えてくれる。
◎また三浦・三崎に行ったことがなくても、見ているだけで自然豊かさを体感できる。
◎下線やハンバーガーメニューが直線ではなく波線で表現。
◎スマホ版→スクロールするとハンバーガーメニューからヘッダー固定。
PC版→スクロールすると右側に予約ボタンが固定。
②模写コーディング
【模写したいところ】
今回は、サイト内の随所にある、ホバー（マウスを載せる）すると拡大するアニメーションを模写します。
調べたところ、CSSのみでも十分実装可能みたいですね。
なお今回は著作権とかいろいろ考慮して、いらすとやさんで拝借した素材で代わりに実装してみます。
※下線リンクで元サイト様に飛びます。
・・・なんですが、ホバーしたときのアニメーションとかを、note上に載せることができないっぽい？ので、
（noteどころか何もかもできてないのはご愛敬😅）
今回はお借りしている画像とコードのみ一部抜粋して載せます。
【部分模写コーディング】
今回は、（株）ウィコネットさんの「画像をhoverして時にズームさせるcssを書こう」の記事をまるごと参照いたしました。ありがとうございます！
リンク先に実例が載っていますので、私がいったい全体何をしたかったのか確認したい方は、ぜひご覧になってくださいませ（笑）
.sample { overflow: hidden; }
.sample img { transition: .8s all; }
.sample img:hover { transform: scale(1.2,1.2);
transition: .8s all; }
今回のホバーアニメーションに関係するコードだけ貼り付けました。
overflow:hidden→ズームしたときにはみ出た部分を非表示
transition: .8s all→0.8秒かけて変化させる（allは初期値）
→数値が大きいほどゆったりした動作、小さいほど機敏な動作
transform: scale()→拡大、縮小表示（数値はX軸方向、Y軸方向）
上記の3点をcssに追記すれば、簡単に実装できるのもいいですね。
難点はnoteに結果を残すことができないという点だけですが、
今回みたいなアニメーションの場合は、こういう形で記録として残す方法もありかも？
それではまた次回お会いしましょう✋