フリーランスWebデザイナー・ななふの
デザイン、コーディングの勉強記録やTIPSなど

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でおかしな表示になっていたら教えて頂けると大変助かります💦
※その後Macも手に入れました!!Safariでも問題ないと思います。

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

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

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

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

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

今回も表示が崩れたりお目汚しな点が多々あると思いますが、沢山の方に見て頂けたら幸いです!

↑のサイトからは、ブラウザの戻るボタンで帰って来てくださいね!(^^)!

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

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

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


HTML/CSS
スポンサーリンク
この記事が気に入ったらシェアしてね!
na2factory ななふをフォローする
na2factory ななふ
フリーランス Webデザイナー

群馬県在住の40代女子です。
2020年8月からWebデザインの勉強を独学でスタートし、
2021年11月に開業しました。
守備範囲はバナー・チラシ制作からWordPressでのサイト制作まで。

このサイトでは、Webデザイナーになるべく自分が調べた事、
自主制作物、テクニック等を紹介しています。

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

Na2 factory ななファクトリー

コメント