HTML/CSS ほんの一手間で劇的に変わる Chapter5 カスタマイズ完成!

HTML/CSS

こんにちは!

コーディング勉強第5弾になります(^^)/

デザインカンプ作成後、他の作業に時間を多く使っていたので

やっとこさの完成になりました💦

今回はManaさん本のChapter5のカスタマイズです。

本ではイベントサイトのランディングページだったところを、

架空の結婚式場のブライダルフェアのランディングページとして

カスタマイズしました!!

スポンサーリンク

カスタマイズしたサイトをすぐに見る!

今回作成したサイトは以下のバナーをクリックで!

ブラウザの戻るボタンでこのブログに帰って来てくださいね!!

1ページ構成です。詳細は以降の記事に書いてます(^^)/

変な表示になっていたらすみません💦

できれば以降の記事も読んでいってくださいませ~( ;∀;)

使用している本

「ほんの一手間で劇的に変わる HTML & CSSとWebデザイン実践講座」

前回から引き続き、

webcreatorboxを運営されているManaさんの本で学習しました!

この本のCHAPTER5で紹介されているテクニックを

できる限り使って制作しました!

CHAPTER5で学習できた事

ざっくり書き出すと以下のような事が学習できました!

  1. カスタムプロパティの使い方
  2. CSSでできるアニメーションやグラデーション、ブレンドモード
  3. CSSで斜めや楕円等の図形を描画
  4. JavaScriptを使ったスライドメニュー

CSSだけで出来る事が多いんだな~という事が良く分かりました(^^)/

ブレンドモードは今回のカスタマイズでは使っていないのですが

他のジャンルの制作の時にきっと使える機会があると思います!

 

カスタマイズチャレンジ

WEBサイトのテーマを決める

20代後半~30代の若い女性を対象にした、

ブライダルフェアの告知サイト。

結婚式場の様子を良く見てもらえることや

試食会など、イベント盛り沢山であることを

アピールしたい。

フェアの予約をしてもらいたい。

 

コンテンツの内容を変更

まずはデザインカンプを作成から!

使用ツール:Photoshop

デザインカンプ

デザインのサイズ

今回も今までと同じサイズで作っています。

PC版: フルHD, モバイル版 : iphone12

デザインのこだわり

架空の結婚式場は軽井沢をイメージした

自然豊かな会場です(^^)/

葉のイラストをロゴやタイトル周りに使って、

自然を感じられる雰囲気にしました。

サイトのメインカラーは白とベージュとピンクです。

若い女性向けを意識したカラーですが、どうでしょう~?

構成

PC版・モバイル版共に1カラム構成です。

デザインカンプ

Q&Aの部分は、アコーディオンのアニメーションを使用したので

実際のサイトでは質問だけの表示になってます💦

アニメーション使用箇所

①タイトル画面のピンクの「ご予約はこちら」の円を

読み込み後1回だけぴょこぴょこ動かしています。

 

②モバイルモードではメニュー画面がスライドして出てきますが、

本のデモサイトではメニュー内のリンクを押してもメニューは

Closeボタンを押さないと消えないところを

リンクを押したらメニュー画面も閉じるように変更しました!

 

③About Fairの各イベントの案内は、

スクロールするとふわっと表示されるようにしています(^^)/

こういう動作を入れるのが憧れでした♪

 

④Q & Aの部分は質問をクリックするとその回答が表示されます。

他の質問をクリックすると前の回答は閉じます。

 

②~④については以下のサイトも参考にさせて頂きました!!

各種ブラウザでの動作確認(PC、レスポンシブ)

GoogleChrome
MicrosoftEdge
FireFox
IE11 ×

※IEでは表示がぐちゃっとなってしまいます。対応する事は諦めました。

※SafariPC版はWindows用の開発が終了しているので未確認!

※私はWindows10ユーザーです(-.-)

Macユーザーの方、もしSafariでおかしな表示になっていたら
教えて頂けると大変助かります💦

 

カスタマイズ・デモサイトの完成

コーディング自体は1週間ほどかかりました~(・・;)

内容の理解は以前より進んだ気がするのですが…

CSSも前よりは整理して書くことを心掛けましたが…

まだまだ練習あるのみです!(;’∀’)

 

今回も表示が崩れたりお目汚しな点が多々あると思いますが、

沢山の方に見て頂けたら幸いです!

↑のサイトからは、

ブラウザの戻るボタンで帰って来てくださいね!(^^)!

 

今まで通り

twitterに#WCBカスタマイズチャレンジのハッシュタグで投稿する予定です!

インスタにもそのうち動画作って投稿しまーす!

 


以上になります。ご訪問ありがとうございました(^^)/

HTML/CSS
スポンサーリンク
この記事をシェア!
na2factoryをフォロー
Webデザイン勉強中

このサイト、
Na2 factory(なな ふぁくとりー)を運営している
"ななふ"と申します。

40代からのWEBデザイナーへの道!
少しづつステップアップしていきたいです。

このサイトでは、自分が覚えた事、
テクニック等を詳細に紹介していきたいと思います。
これからWEBデザイナーを目指す方々と
情報共有できたら嬉しいです!

約2.5か月かけて(^^;photoshopでのバナトレ30本達成できました!
さらにその倍ぐらいの時間をかけて、
illustratorでもバナトレ30本達成~!!
現在はXDとコーディング勉強中!

詳しいプロフィールはこちら

na2factoryをフォロー
Na2 factory

コメント

タイトルとURLをコピーしました