こんにちは。ハコラトリ管理人のはこだてたろうです。
ハコラトリでは、React初心者向けの技術記事「プロプラ！」シリーズを不定期で連載していましたが、この度色々と思うところがあり、連載を一時停止させていただきますm(_ _)m
DailyUIチャレンジ、はじめます
ではこれから何を投稿していくのかといいますと、デザイン界隈でよく耳にする DailyUI にチャレンジしようと思います。
とは言っても、デザイナーに転身するというわけではなく、デザイン力アップが目的でもありません。
私はReactエンジニアなので、開発の手札を増やすことが目的です。
なので自身で一からデザインを起こすことはせず、XやDribbbleで投稿されている先輩たちの作品をトリビュートする形で進めていこうと思います。
もちろん、これから投稿していくUIを「自分のデザインだ！」と主張することはありませんし、トリビュートするデザインのURLは必ず記載します。
#001 Sign up
１日目のお題は Sign up でした。
Xで投稿された以下のデザインをトリビュートさせていただきました。
Day 001 out of 100. Sign up page#DailyUI #figma #uiuxdesign pic.twitter.com/jkQxSSyjcE
— peter chijioke (@AverageWeirdud3) April 9, 2024
画面いっぱいのイラスト画像の上にモーダルライクな入力フォームを置くスタイルがイケてるなと思いました！
作成した画面
以下の画面を Next.js で作成しました。
2024年4月に実装したので、春のテイストにしてみました。
今年は桜の開花がいつもよりも遅く、上野公園では２日前からの場所取りも虚しく「枝見」になってしまった、なんてニュースもありましたね。
私も埼玉の桜の名所である幸手に行く予定を立てていましたが、枝見になりそうだったので今年はやむなく見送りとなりました。
今年の桜は日本橋で堪能してきました。
実装のポイント
実装のポイントとしては２つです。
- 画像を画面いっぱいに表示する
- MUIのコンポーネントをカスタマイズする
それぞれのポイントについて、以下で解説します。
画像を背景として画面いっぱいに表示する
該当箇所のコードを記載します。
export default function SignUp() {
return (
<main>
<div className="fixed top-0 left-0 w-full h-screen z-[-1]">
<Image
src="/static/images/01_background.jpg"
alt="背景"
fill
/>
</div>
・・・ポイントとなるのは４行目と８行目の指定です。
４行目は TailwindCSS の指定になりますが、position を fixed にして、top と left にそれぞれ 0 を指定しています。
あとは width, height をそれぞれ画面いっぱいに広げることで画像を表示する領域を確保しています。
８行目は Next.js 組み込みの Imageコンポーネントの設定で、fill を指定することで画像を親要素いっぱいに表示することができます。
Imageコンポーネントは画像をいい感じに最適化してくれるので、ぜひ使っていきたいですね！
MUIのコンポーネントをカスタマイズする
該当箇所のコードを記載します。
const CssTextField = styled(TextField)({
'& label.Mui-focused': {
color: '#A0AAB4',
},
'& .MuiInput-underline:after': {
borderBottomColor: '#B2BAC2',
},
'& .MuiOutlinedInput-root': {
'&:hover fieldset': {
borderColor: "rgb(237,189,165)",
},
'&.Mui-focused fieldset': {
borderColor: "rgb(237,189,165)",
},
},
});
export default function SignUp() {
return (
<main>
・・・略・・・
<Typography
variant="h6"
sx={{
...textStyle,
marginTop: "2rem",
color: "dimgray"
}}
>
Email
</Typography>
<CssTextField
fullWidth
size="small"
placeholder="spring@sunset.com"
/>CssTextField は MUI の TextFieldコンポーネントをカスタマイズしています。
カスタマイズ方法も、MUI で紹介されている方法をほぼそのまま利用しています。
MUI の styledユーティリティを使用して TextFieldコンポーネントをカスタマイズしている形になりますが、主に入力欄にマウスがホバーしたとき、入力欄にフォーカスされたとき、それぞれの枠線の色を変更しています。
特筆する点としては、ホバーの指定をする際の記述の仕方でしょう。
'&:hover fieldset': {
borderColor: "rgb(237,189,165)",
},&:hover は Sass の記法で、疑似クラスを指定するためのものですが、ここで使われている & や : は JavaScript では特別な意味を持つため、JSON のキーとしてはそのまま使うことはできません。
&:hover fieldset: { // NG!!
borderColor: "rgb(237,189,165)",
},これらの文字は、上記のようにシングルクォーテーションで括ることで使うことができるようになります。
おわりに
今回実装したコードは以下のレポジトリで公開しています。
このコードを作成するのに、およそ２時間かかりました。
初日ということもありますが、もうすこしスピーディに実装したいなと思います。
コードの質としても、まだまだ改善の余地はありそうですね。
今後も精進していきたいと思います。
ご覧いただき、ありがとうございました。
コメント