レスポンシブデザインの実装 #131

kagomen · 2024-03-27T12:59:45Z

概要

レスポンシブデザインの実装
アバウトセクションの文章の編集
その他細かなスタイルの変更など

その他

参考

#134

残課題

コードのリファクタリング
- リスト部分をmap()で書き換えるか、コンポーネント化したい
- その他にもやるべきところがあれば！
Tailwind CSSのサイズの使用についての確認
- 通常のCSSだと8の倍数（細かく調整したい場合は4の倍数）を基準にpxを指定していくが、Tailwindを用いた場合はどうするのか？を確認したい
  - 個人的には、既にTailwind側がそのような数値になるよう調整してくれているので、好きな数値を使っていいと思っていた！
  - また、大きな数値はm-64などとするより[--px]の方がわかりやすいと思っているが、そのあたりの認識のすり合わせもしたい！

pss-aileen

プルリク作成ありがとうございました！
確認しました！

SP、タブレットでのデザインの変更（要素の移動や背景色の変更など）は @kagomen さんが実装してくださった感じで良いかと思います！

いくつか気になる点があったので、レビューで記載しています！
ご確認よろしくお願いいたします！🙇‍♀️

pss-aileen · 2024-03-27T17:26:32Z

src/app/page.tsx

-        <div className="flex-1">
-          <p className="inline-block bg-zinc-100 px-4 py-2">
+      <section className=" mx-auto max-w-2xl px-6 lg:flex lg:h-screen lg:max-w-7xl lg:items-center lg:justify-center lg:gap-10">
+        <div className="mt-[80px] lg:mt-[100px] lg:flex-1">


PC: ヒーロエリアのテキストと画像のズレ

テキストが下がって、画像が上に上がっているので
この mt-[80px] あたりを削ると上下中央良い感じにそろうかなと思いました。

気付きませんでした💦ありがとうございます……！✨

pss-aileen · 2024-03-27T17:27:51Z

src/app/page.tsx

+              <AutoAwesomeRoundedIcon className="text-[120px] mb-4 text-yellow-300" />
+            </div> */}
+            <div className="hidden lg:inline-block lg:flex-[0.4]">
+              <img


Octcat

Discordでも話があがっていましたが、一旦なしで良いかなと思います🙇‍♀️

了解です！
Octocatの代わりに何か画像入れた方が良いと思いますか？

それと、リスト番号のアイコンについてもご意見伺いたいです！

個人的に今のアイコン微妙だなと思うのですが、Aileenさんはどう思われますか？
Material Iconsで番号のアイコンを探すと1~9まで数字があるものが今使用してるものしかないのです……。
最初から選択肢の多いreact-iconsを導入しておけばよかったなあと思っているのですが……。
参考　#86 (comment)

そして、

そもそもアイコン要らない

数字アイコンではなく、例えば⭐️などの記号アイコンにしたらコードの記述量も減る

なんならアイコンではなく絵文字だったら一番楽

と考えると、わけがわからなく・・・😵

あと、きっとtailwindで番号にのみスタイルつける方法もありますよね（こちら未調査です）
もしご意見あれば伺いたいです……！！🙏

参考：react-iconsで使える数字一覧
https://react-icons.github.io/react-icons/search/#q=number

色々悩んだのですが、
Discordでみなさんのメッセージを確認しつつ、
ポップにしていくと実装で悩みが生じそうなので
原点に戻って？、
シンプルに

#70 (comment)

こちらのデザインをそのままレスポンシブ対応で良いのかな？と思いました。

コーディングしながらデザイン考えるのは個人的に楽しくて好きなのですが
効率面を考えるとかなり時間を要してしまうので
カンプがない現状で、とりあえず完成に近づけるのであれば↑が良いのかなと思います...！

自分でも作ってみよう〜と思って #134 を作ったりはしましたが、
こちらは「こんな感じのアイディアも浮かびました〜！」といった感じなので
一旦無視していただいて....！

今回はレスポンシブ対応するといったことが目的なので、そちらに焦点をあてていく方向で良いかなと！

#134 確認しました！めちゃくちゃ素敵です！！！
絵文字もこんな感じで使ってあげたら立派なデザインになるんですね👀✨

シンプルにこちらのデザインをそのままレスポンシブ対応で良いのかな？と思いました。

たしかにそうですね……！
こちらのイシューの本筋がレスポンシブ対応であることを忘れてました。
懸念点があれば残課題にすべきですね。

既に修正した分もあるので、#134 を参考にさせてもらいつつ、合わせてプルリク出そうと思います！

感謝感謝です…！

pss-aileen · 2024-03-27T17:33:54Z

src/app/page.tsx

            className="w-full"
          />
        </div>
+        <p className="mx-auto mb-10 mt-5 rounded-sm bg-stone-200 px-4 py-2 text-center lg:hidden">


8px、16pxの倍数であわせていくと綺麗になるかも！

あとすごく細かくて申し訳ないのですが、
ご存知かもしれませんが
Webサイトのデザインは8、16倍で作ると良い感じになる！といった考え方があります！
なので、mt-2(8px)、mt-4(16px)、mt-6(24px)、mt-8(32px)あたりで統一して作っていくと良いのかなと思います。

ただ、最終的には好みになると思うので10、20の倍数でも良いかとおもいます！
どこかで統一が必要だと思うので一応メモをかねて共有です🙇‍♀️

了解です！✨

pss-aileen · 2024-03-27T17:37:30Z

src/app/layout.tsx

    <html lang="ja">
-      <body className={`${inter.variable} ${notojp.variable} `}>
+      <body
+        className={`${inter.variable} ${notojp.variable} bg-stone-100 text-stone-800`}


背景色はグレーで良いと思います🙆

背景色白になることに関しては、個人的にあまり気にならなかったので、グレーでなくても良いかな？と思いました！
ただ、真っ白より目にやさしい気がするのでグレーでも良いかも...！！！
なのでそのままでOKです✨

気にならないのであれば、グレーじゃなくて良いかもです……！笑
自分もどっちでも良いです……！（とりあえずそのままにしときます！）

pss-aileen · 2024-03-27T17:41:07Z

src/app/page.tsx

+      <section className=" pb-2 md:bg-red-600 md:p-10 md:pb-0">
+        <div className="rounded-xl bg-stone-100 px-5 pb-10 md:p-20 md:pt-8">
+          <h2 className="rounded-sm bg-red-600 p-4 text-center text-xl font-bold tracking-tighter text-white md:bg-transparent md:pt-10 md:text-3xl md:text-red-600">
            簡単７ステップでコントリビューション！


READMEの目次を反映

README
READMEのステップ数と違うので、READMEに合わせた方が良いのかな？と思いました。
READMEのほうも、9ステップと書いてありましたが、実際の目次を見ると8ステップなので、こちらも修正が必要かも...！

こちら別タスクに切り分けるつもりでした！
でもREADMEの内容もほぼ確定してますし、一緒にしても良さそうですね✨

READMEのほうも、9ステップと書いてありましたが、実際の目次を見ると8ステップなので、こちらも修正が必要かも...！

Finishを1ステップとしてカウントするかどうかって感じですかね……？！

一応お尋ねなのですが、@kazzyfrog さん、READMEの画像↑9つのステップというのはFinishを含めたものでしょうか？
目次にはFinishはステップとして数えられていなかったので8で良いかと思ったのですが....🕵️

9つのステップというのはFinishを含めたものでしょうか？

おっしゃる通り、Finishを含めたつもりでした！
確かに、わかりづらかったです🙏

以下のような表記の方が、自然な流れですかね？

Step9: メインプロジェクトにマージされます 🎉

Step9: Finish 🎉

もしくは、マージ（Finish）は、ステップから外して、８ステップにしても良いと思います！

pss-aileen · 2024-03-27T17:43:51Z

src/app/page.tsx

+      <section className=" pb-2 md:bg-red-600 md:p-10 md:pb-0">
+        <div className="rounded-xl bg-stone-100 px-5 pb-10 md:p-20 md:pt-8">
+          <h2 className="rounded-sm bg-red-600 p-4 text-center text-xl font-bold tracking-tighter text-white md:bg-transparent md:pt-10 md:text-3xl md:text-red-600">
            簡単７ステップでコントリビューション！


タブレット: 見出しの最大横幅

タブレットでここの見出しが左右に飛び出していっているので、
ヘッダーの最大横幅に合わせるとより綺麗になると思いました！

ありがとうございます。了解です！✨

pss-aileen · 2024-03-27T17:47:29Z

src/app/page.tsx

-          </ol>
-          <div className="mb-16 text-center text-2xl font-bold leading-relaxed">
-            <p className="mb-8 text-4xl text-red-600">⬇︎</p>
+          <div className="mx-auto max-w-2xl max-w-md md:flex md:max-w-4xl md:items-center md:justify-center md:gap-10">


タブレット: 要素の幅に合わせられる w-fit

リストの大きさを把握して、中央揃えにしたい場合は
w-fit を使うと、リストの内容に合わせて横幅が変わってくれるので、こちらを ul に設定すると良いかもしれません！

Width - Tailwind CSS

ありがとうございます！確認してみます🙏✨

kagomen · 2024-03-28T18:27:02Z

確認お願いします🙇
Aileenさんのデザインを参考に、リストの数字部分をSTEP nとして改行させ、横幅に余裕ができたので、PC版の赤枠のデザインをスマホ版でもそのまま流用することができました。どうでしょうか？
上記のため、背景色も薄いグレーから白に戻しました。（記述量もこちらの方が少ないので！）

kagomen · 2024-03-28T18:31:14Z

最終的に、リスト部分をコンポーネント化したいです……！

kazzyfrog · 2024-03-28T18:42:57Z

お疲れ様です！！
細かいコミット、スクショまで助かります！！！👍

見た感じ、レスポンシブ画面も、PCのアバウトセクションもめっちゃ良いと思います！

細かいCSS系の調整や、リスト部分などのコンポーネント化は、
別のタスクとして後に回しても良さそうですね！

pss-aileen

実装ありがとうございます！！
すごくすごく良いと思います✨！！

こちらでいきましょう🙆‍♀️

どんどん形になってきて楽しい〜🕺

pss-aileen · 2024-03-29T01:41:17Z

あ、勝手にDraftから変更しちゃいましたが、こちらマージでよければ @kagomen さんよろしくお願いします！！

kagomen · 2024-03-29T06:13:38Z

お二人ともありがとうございます！🙏
これからプルリク文を編集したのち、マージします！

kagomen added 2 commits March 27, 2024 13:34

🎨 style:レスポンシブデザインの実装、スタイルの手直し #64

e43135d

🐛 fix: スタイルの修正

b47b04d

pss-aileen reviewed Mar 27, 2024

View reviewed changes

kagomen added 4 commits March 28, 2024 14:32

🐛 fix: (PC)ヒーロエリアのレイアウトのずれを修正

b8ae81a

🐛 fix: READMEの目次を反映

00b2b9f

🐛 fix: 不要なアイコンと画像の削除

f12d174

🐛 fix: リスト周辺の不要なCSSの削除・修正

95fa25d

pss-aileen mentioned this pull request Mar 28, 2024

デザイン面（提案用） #134

Closed

kagomen added 2 commits March 29, 2024 02:56

🐛 fix: アバウトセクションの修正とフッターの調整

26632d9

🐛 fix: カラーの変更・スタイルの微調整

d2d5b0b

pss-aileen approved these changes Mar 29, 2024

View reviewed changes

pss-aileen marked this pull request as ready for review March 29, 2024 01:39

🐛 fix: 最終的なスタイルの微調整、コード内の不要な空白の削除

4c538af

kagomen merged commit 2fdf550 into main Mar 29, 2024

kagomen deleted the style/#64_add_responsive_design branch March 29, 2024 06:25

kagomen changed the title ~~レスポンシブ対応（確認用）~~ レスポンシブデザインの実装 Mar 29, 2024

kagomen mentioned this pull request Mar 29, 2024

READMEのステップ数を9→8に変更 #137

Closed

1 task

kazzyfrog mentioned this pull request Mar 29, 2024

チュートリアルのステップ数を修正 #140

Merged

kazzyfrog added Type: 🎨 style スタイル（見た目）に関するもの Type: ✨ feat 新機能の作成に関するもの and removed Type: 🎨 style スタイル（見た目）に関するもの labels Apr 4, 2024

Uh oh!

レスポンシブデザインの実装 #131

レスポンシブデザインの実装 #131

Uh oh!

Conversation

kagomen commented Mar 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

概要

関連するIssue

その他

参考

残課題

Uh oh!

pss-aileen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

PC: ヒーロエリアのテキストと画像のズレ

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Octcat

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kagomen Mar 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

8px、16pxの倍数であわせていくと綺麗になるかも！

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

背景色はグレーで良いと思います🙆

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

READMEの目次を反映

Uh oh!

kagomen Mar 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

タブレット: 見出しの最大横幅

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

タブレット: 要素の幅に合わせられる w-fit

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kagomen commented Mar 28, 2024

Uh oh!

kagomen commented Mar 28, 2024

Uh oh!

kazzyfrog commented Mar 28, 2024

Uh oh!

pss-aileen left a comment

Choose a reason for hiding this comment

Uh oh!

pss-aileen commented Mar 29, 2024

Uh oh!

kagomen commented Mar 29, 2024

Uh oh!

Reviewers

Assignees

kagomen commented Mar 27, 2024 •

edited

Loading

kagomen Mar 28, 2024 •

edited

Loading

kagomen Mar 28, 2024 •

edited

Loading

タブレット: 要素の幅に合わせられる `w-fit`