こんにちは！
コーディング勉強第５弾になります(^^)/
デザインカンプ作成後、他の作業に時間を多く使っていたのでやっとこさの完成になりました💦
今回はManaさん本のChapter5のカスタマイズです。
本ではイベントサイトのランディングページだったところを、
架空の結婚式場のブライダルフェアのランディングページとしてカスタマイズしました！！
カスタマイズしたサイトをすぐに見る！
今回作成したサイトは以下のバナーをクリックで！
ブラウザの戻るボタンでこのブログに帰って来てくださいね！！
1ページ構成です。詳細は以降の記事に書いてます(^^)/
変な表示になっていたらすみません💦
できれば以降の記事も読んでいってくださいませ～( ;∀;)
使用している本
「ほんの一手間で劇的に変わる HTML & CSSとWebデザイン実践講座」
前回から引き続き、webcreatorboxを運営されているManaさんの本で学習しました！
この本のCHAPTER5で紹介されているテクニックをできる限り使って制作しました！
CHAPTER5で学習できた事
ざっくり書き出すと以下のような事が学習できました！
- カスタムプロパティの使い方
- CSSでできるアニメーションやグラデーション、ブレンドモード
- CSSで斜めや楕円等の図形を描画
- JavaScriptを使ったスライドメニュー
CSSだけで出来る事が多いんだな～という事が良く分かりました(^^)/
ブレンドモードは今回のカスタマイズでは使っていないのですが
他のジャンルの制作の時にきっと使える機会があると思います！
カスタマイズチャレンジ
WEBサイトのテーマを決める
20代後半～30代の若い女性を対象にした、ブライダルフェアの告知サイト。
結婚式場の様子を良く見てもらえることや試食会など、イベント盛り沢山であることをアピールしたい。
フェアの予約をしてもらいたい。
コンテンツの内容を変更
まずはデザインカンプを作成から！
使用ツール：Photoshop
デザインカンプ
デザインのサイズ
今回も今までと同じサイズで作っています。
PC版: フルHD, モバイル版 : iphone12
デザインのこだわり
架空の結婚式場は軽井沢をイメージした自然豊かな会場です(^^)/
葉のイラストをロゴやタイトル周りに使って、自然を感じられる雰囲気にしました。
サイトのメインカラーは白とベージュとピンクです。
若い女性向けを意識したカラーですが、どうでしょう～？
構成
PC版・モバイル版共に１カラム構成です。
デザインカンプ
Q&Aの部分は、アコーディオンのアニメーションを使用したので
実際のサイトでは質問だけの表示になってます💦
アニメーション使用箇所
①タイトル画面のピンクの「ご予約はこちら」の円を読み込み後１回だけぴょこぴょこ動かしています。
②モバイルモードではメニュー画面がスライドして出てきますが、
本のデモサイトでは、メニュー内のリンクを押してもメニューはCloseボタンを押さないと消えないところを
リンクを押したらメニュー画面も閉じるように変更しました！
③About Fairの各イベントの案内は、スクロールするとふわっと表示されるようにしています(^^)/
こういう動作を入れるのが憧れでした♪
④Q & Aの部分は質問をクリックするとその回答が表示されます。
他の質問をクリックすると前の回答は閉じます。
②～④については以下のサイトも参考にさせて頂きました！！
各種ブラウザでの動作確認（PC、レスポンシブ)
| GoogleChrome | 〇 |
| MicrosoftEdge | 〇 |
| FireFox | ○ |
| IE11 | × |
※IEでは表示がぐちゃっとなってしまいます。対応する事は諦めました。
※SafariPC版はWindows用の開発が終了しているので未確認！
※私はWindows10ユーザーです(-.-)
※その後Macも手に入れました！！Safariでも問題ないと思います。
カスタマイズ・デモサイトの完成
コーディング自体は１週間ほどかかりました～(・・;)
内容の理解は以前より進んだ気がするのですが…
CSSも前よりは整理して書くことを心掛けましたが…
まだまだ練習あるのみです！(;’∀’)
今回も表示が崩れたりお目汚しな点が多々あると思いますが、沢山の方に見て頂けたら幸いです！
↑のサイトからは、ブラウザの戻るボタンで帰って来てくださいね!(^^)!
今まで通りtwitterに#WCBカスタマイズチャレンジのハッシュタグで投稿する予定です！
インスタにもそのうち動画作って投稿しまーす！
以上になります。ご訪問ありがとうございました(^^)/
コメント