作品詳細
構成
トップページのみ
このサイトは、デザインカンプからのコーディング課題を作成し、セクション構成はそのままで、そのサイトをベースに自作したオリジナルサイトです。
ワインをイメージしたカラー#7e1334や#94bf4fを配色し、農園の穏やかな雰囲気を出すためにフォントで'M PLUS Rounded 1c'を使用しました。
「ワイン好きの人が集まる名所」をイメージしており、柔らかい雰囲気の中にも気品を感じるサイトとを心がけて作成しました。
TOPページ
作品仕様
- ローディング中JavaScriptを使用しアイコンが表示されるようにしています。
- メインビジュアルではJavaScriptを使用しアニメーションにしており、ゆっくり画像、テキストの順に現れます。
- ナビゲーションはページ内リンクでクリックすると該当セクションにスクロールします。画面幅1100px以下でナビゲーションをハンバーガーメニューにしています。
- ワインリストではSwiperを使用し無限ループさせています。
- お知らせではCSS でホバーすると色が変わるようにしています。
- よくある質問ではCSS で質問をクリックすると回答が開き、再度クリックすると閉まるようになっています。
- アクセスのマップはiframeを使用し、Google Mapsを埋め込んでいます。
ツアー予約は以下のように作成しております。
- ラジオボタンをCSS で独自にカスタマイズしています。
- JavaScriptで必須項目を全て入力しないと送信できないようにしています。
- 送信でGoogleフォームに回答が届くようにしています。
- 送信した後JavaScriptでサンクスページへ遷移するようにしています。
制作にあたって
学習を終えての初めてのサイト制作です。
このサイトを完成させたことによって、学習だけでは得られない知識やスキルが身に付き、ネット上にアップするところまで行ったので、全体の流れを理解し始めることができました。
もっと効率を上げよう、もっと知識を増やそうと向上心が上がるいいきっかけになったと思います。
リンク先 ※Basic認証をかけています。 ID:saito PW:saito