※Basic認証あり。ID/PWは apicetec
Web制作会社で作成したサイトです。
機能パッケージサービスサイトのトップページをコーディングしました。
※カンプはデザイナーの方が作成しました。
![](https://gallery-elephant.com/wp-content/uploads/2023/05/wadaiko_pc-1024x600.png)
▼PC表示
![](https://gallery-elephant.com/wp-content/uploads/2023/05/wadaiko_ss-1.png)
元々別のトップページだったものをこちらのデザインに当て込めてリンク先を残しながらコーディングしました。
🔻トップページ
和楽器のスクールのサイトでしたので、トップは華やかで躍動感のある和太鼓の写真を採用しました。
🔻メインページ
所々に雲のあしらいが有ったのでpositon absoluteで配置しました。
表題がレスポンシブでは縦並びから横並びになるので、いくつか画像を作成し、レスポンシブ対応にしました。
🔻サイト検索
講座を検索するためのPHPのプログラムが入っていたので崩さないように気をつけながら配色の変更をしました。
🔻講座名
講座名が縦にずらした配置になっていたので、こちらもposition rerative やabsoluteを使って配置しました。
レスポンシブでは、すっきりわかりやすくする為に横並びに配置しました。
🔻講師陣紹介
元々写真スライドのJavascriptが入っていましたが、表示件数の変更の編集をしました。
▼レスポンシブ表示
![](https://gallery-elephant.com/wp-content/uploads/2023/05/wadaiko_sp1-109x1024.png)
![](https://gallery-elephant.com/wp-content/uploads/2023/05/wadaiko_sp2-98x1024.png)