社会人2年間の集大成！占いサイトを作成した話⑤

社会人2年間の集大成！占いサイトを作成した話④のつづきとなります！

占い師一覧画面の紹介

機能の紹介

画面に遷移すると占い師の一覧が表示されます。
「申し込む」ボタンをクリックすると・・

申し込みフォームに遷移します。
「申し込む」ボタンをクリックすると・・

「申し込みが完了しました！」というメッセージのモーダルが表示されます。

何も入力せずに「申し込む」ボタンを押下した場合はエラーにします。

実装方法の紹介

このページではJavaScriptやHTMLでは特別な処理はしていないため使用したCSSを紹介します！

占い師達のレイアウト

// 占い師の画像の周りを囲む線を設定
.fortune-teller-img {
    border: solid;
    border-color: black;
    margin: 10px 30px 0px 30px;
}
// １行目の占い師を横並びにし中央寄せに設定
.first {
    display: flex;
    justify-content: center;
}
// ２行目の占い師を横並びにし中央寄せに設定
.second {
    display: flex;
    justify-content: center;
}

justify-contentプロパティは、フレックスアイテムの主軸方向の揃え位置を指定します。

申し込みフォームのレイアウト

// 項目の幅と文字の太さの設定
label {
    width: 25.5%;
    font-weight: 500;
}
// 必須項目のラベルの後ろに*を赤字で表示
.required:after {
    content: " *";
    color: red;
}
// 入力欄毎に周りの余白と区切り線の設定
.form-group {
    padding: 26px 0;
    border-top: 1px solid #e5e5e5;
}
// 入力欄の幅と周りの余白と入力欄の内側の影を設定
input,select {
    width: 74.5%;
    padding: 9px 10px;
    border: 1px solid #d9d9d9;
    box-shadow: inset 0.5px 0.866px 3px 0px rgba(5, 1, 2, 0.25);
}

widthを%で指定することで、画面幅が変化しても一定のレイアウトが保てます。
box-shadowを設定することで入力欄が立体的になります。

まとめ

今回は申し込みフォームをよく見かけるwebページと同じような見た目にすることに苦労しました。見た目は簡単そうでもいざ実現しようとすると知識が足りない点がありました。
また、占い師の先生の名前を決めるのに苦労しましたインターネットで調べると色んな先生の名前があり、占い業界について少し触れることができました！
今回はここまでとなります。次回は最後！！特集ページの紹介を行っていきます

続きはこちら！
社会人2年間の集大成！占いサイトを作成した話⑥