こんにちは、元ヨガインストラクターのもこです🌸
web制作を独学で学んでいます😊
今回は、ヨガスタジオのホームページを作成したので
そのサイトをご紹介していきます🌸
jQueryも使ってみました(^^)
![もこ](https://moco-yoga.com/wp-content/uploads/2022/03/de67dced2b9558dcfe0da5d62538bd6d.png)
見てもらえたら嬉しいです♪
どんなヨガスタジオを想定したの?
個人で経営している、小さなヨガスタジオのホームページを想定しました。
淡い色をたくさん使って、女性らしい繊細な雰囲気をイメージしています😊♪
作成したヨガスタジオのホームページ
作ったヨガスタジオのホームページは下のリンクから見ることができます🌸
![](https://moco-yoga.com/wp-content/uploads/2022/04/yoga_webD.001-800x600.jpeg)
工夫したところ
全体的に淡いカラーを使用することで、女性らしい印象が得られるように工夫しました。
また、一番上のヨガスタジオの画像をjQueryで固定することで、
ユーザーがスタジオの中に入っていくような感覚が得られるようにしてみました♪🌸
![もこ](https://moco-yoga.com/wp-content/uploads/2022/03/de67dced2b9558dcfe0da5d62538bd6d.png)
清潔感と可愛らしさを1番重視して作成しました♪
参考にした書籍
![](https://moco-yoga.com/wp-content/uploads/2022/04/b7f2efe877493d01f7c16189910c0cca-800x420.jpg)
ヨガスタジオのサイトを作成する上で、参考にした書籍をご紹介します(^^)
動くWebデザインアイディア帳
サイト全体の配置を考える時の参考にしました😊
表現ごとにjQueryのコードを載せてくれいるので、
そのままコピペするだけで、いろんな表現ができるようになります🌸
購入者特典で、サンプルサイトのコードが手に入るので
コピーしてコーディングするだけで
簡単におしゃれなサイト作ることができます(^^)
Webデザインの新しい教科書
細かい部分の調整方法をする時に、この本を参考にしました♪
HTMLタグをdivタグを使うか、articleタグを使うか
どっちがいいのかな?など迷った時によくみました😊
コードを書き込んでいく時に、とても役に立ちました(^^)
1冊で全て身につく HTML&CSSとWebデザイン
主に配色方法や、画像のタイル配置をする時に参考にしました。
わかりやすく丁寧に解説されているので、
「あれ?gridの配置ってどうやるんだっけ?」みたいな時の逆引きに使っていました🌸
さいごに
![](https://moco-yoga.com/wp-content/uploads/2022/04/e8a6609bbdfa1eaf29401500da5e8c92-800x420.jpg)
この記事では、ヨガスタジオのホームページをご紹介しました。
自分がもともとヨガインストラクターをやっていたこともあって、
気合を入れて作っちゃいました😊🌸
最後まで記事を見ていただき、ありがとうございました♪
![もこ](https://moco-yoga.com/wp-content/uploads/2022/03/de67dced2b9558dcfe0da5d62538bd6d.png)
web制作の勉強頑張ります♪