デザインとの差異を修正（テキストとスタイル） #22
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mucho613
commented
Aug 16, 2025
| @@ -1,6 +1,6 @@ | |||
| <div class="relative mt-20 xl:mt-48"> | |||
| <div class="max-w-7xl mx-6 xl:mx-auto"> | |||
| <div class="max-w-3xl mx-auto xl:absolute xl:bottom-[45%]"> | |||
| <div class="max-w-3xl mx-auto xl:absolute xl:bottom-2/5"> | |||
There was a problem hiding this comment.
説明文の高さが大きくなったため位置を調整
mucho613
commented
Aug 16, 2025
| @@ -14,13 +14,13 @@ <h2 class="relative xl:hidden max-w-lg"> | |||
| </h2> | |||
|
|
|||
| <!-- 説明文セクション --> | |||
| <div class="mt-9 xl:ml-18 xl:max-w-[620px]"> | |||
| <p> | |||
| <div class="mt-9 xl:ml-18 xl:max-w-[620px] leading-7"> | |||
There was a problem hiding this comment.
デザインファイル(.psd)では行間は 28px なので、それに合わせて設定
mucho613
commented
Aug 16, 2025
| <div class="mt-9 xl:ml-18 xl:max-w-[620px]"> | ||
| <p> | ||
| <div class="mt-9 xl:ml-18 xl:max-w-[620px] leading-7"> | ||
| <p class="mb-4"> |
There was a problem hiding this comment.
デザインでは段落の間に余白が設けられていため、margin で確保する
mucho613
commented
Aug 16, 2025
| CoderDojoは子ども達にプログラミングを学ぶ場を提供する、ボランティア主導の世界的な非営利活動です。 | ||
| </p> | ||
| <p> | ||
| CoderDojoは2011年にアイルランドから始まり、現在は世界100カ国に2,000以上の道場があり、日本国内でも全国200以上の道場で毎年1,000回以上(*1)開催されています。CoderDojoはエンジニアやデザイナー、各地域の保護者や学生、研究者や経営者など（メンター）と子どもが出会える場にもなっています。<br /> | ||
| <small>*1 統計情報:https://coderdojo.jp/stats</small> | ||
| <small class="break-all">*1 統計情報:https://coderdojo.jp/stats</small> |
There was a problem hiding this comment.
ウィンドウ幅が縮んだ際（-300px 前後）で、この URL 部分が折り返さず body が見切れてしまうので、word-break: break-all で折り返すようにした
mucho613
commented
Aug 16, 2025
| @@ -4,7 +4,7 @@ | |||
| <h2> | |||
| <img src="/img/top/inspire-next/inspire-next-heading.webp" alt="Inspire NEXT ～好奇心に火をつけよう～" /> | |||
| </h2> | |||
| <div class="mt-9 max-w-3xl"> | |||
| <div class="mt-9 max-w-3xl leading-7"> | |||
There was a problem hiding this comment.
デザインファイル(.psd)では行間は 28px なので、それに合わせて設定
mucho613
commented
Aug 16, 2025
| @@ -32,7 +32,7 @@ <h2 class="relative max-w-7xl"> | |||
| <img class="h-[140%] w-auto absolute right-0 -bottom-1/5 w-3xs" src="/img/top/inspire-next/fire-transparent.webp" /> | |||
| </h2> | |||
|
|
|||
| <div class="mt-9"> | |||
| <div class="mt-9 leading-7"> | |||
There was a problem hiding this comment.
デザインファイル(.psd)では行間は 28px なので、それに合わせて設定
mucho613
commented
Aug 16, 2025
| @@ -9,7 +9,7 @@ <h2 class="text-4xl text-center mb-12"> | |||
| 生成AI時代における<br /> | |||
| 「子どもたちの創造」と学び | |||
| </p> | |||
| <p class="text-xl mb-4">宮島 衣瑛（みやじま きりえ）</p> | |||
| <p class="text-xl mb-2">宮島 衣瑛（みやじま きりえ）</p> | |||
There was a problem hiding this comment.
デザインではもっと余白が少なかったため調整
mucho613
commented
Aug 16, 2025
Comment on lines
+31
to
+35
| <h2 class="text-4xl text-center mb-12"> | ||
| 招待講演 | ||
| <span class="block mt-5 text-2xl">KEYNOTE 02</span> | ||
| </h2> | ||
|
|
mucho613
commented
Aug 16, 2025
| <div class="flex max-w-7xl mx-auto px-6 lg:px-12 jutify-between gap-x-12 flex-col lg:flex-row"> | ||
| <div class="w-full lg:w-[55%] mb-8"> | ||
| <p class="text-3xl lg:text-4xl leading-12 lg:leading-15 mb-2"> | ||
| 生成AIをはじめ急速に変化する環境で、<br /> | ||
| 子どもの好奇心をどう伸ばすか | ||
| </p> | ||
| <p class="text-xl mb-4">小宮山 利恵子（こみやま りえこ）</p> | ||
| <p class="text-xl mb-2">小宮山 利恵子（こみやま りえこ）</p> |
There was a problem hiding this comment.
デザインではもっと余白が少なかったため調整
mucho613
commented
Aug 16, 2025
| @@ -4,7 +4,7 @@ <h2 class="text-4xl mt-20 sm:mt-32 text-center"> | |||
| </h2> | |||
|
|
|||
| <div class="m-6 flex flex-col items-center"> | |||
| <ul class="border-y divide-y max-w-7xl mx-auto mb-12"> | |||
| <ul class="border-y border-[#ccc] divide-y divide-[#ccc] max-w-7xl mx-auto mb-12"> | |||
There was a problem hiding this comment.
区切り線の色をデザインと同じ色にした
mucho613
commented
Aug 16, 2025
| @@ -17,8 +17,8 @@ <h2 class="text-4xl mb-4 text-center lg:text-left"> | |||
| <li class="flex-1 min-w-full sm:min-w-64"> | |||
| <img class="w-full" src="https://placehold.jp/1920x1080.png" alt="セッションのイメージ"> | |||
| <p class="mt-2">セッションタイトル。2行ぐらいあるかも</p> | |||
| <p class="text-xs mb-2">セッションの説明です。最大2行ぐらいまで許容しそうな雰囲気</p> | |||
| <p class="text-xs text-gray-400"> | |||
| <p class="text-xs mb-2 leading-5">セッションの説明です。最大2行ぐらいまで許容しそうな雰囲気</p> | |||
There was a problem hiding this comment.
デザインと同じぐらいの行間になるように調整（.psd ファイル上でも、どこかのページのスクリーンショットが使われているため正確な行間値は測れなかった）
mucho613
commented
Aug 16, 2025
Comment on lines
+5
to
+8
| <div class="text-xl sm:text-2xl md:text-4xl text-center mt-10 mx-8 leading-6 sm:leading-10 md:leading-16"> | ||
| <div class="mb-4">DojoCon Japan 2025 実行委員会</div> | ||
| <div>一般社団法人 CoderDojo Japan</div> | ||
| </div> |
There was a problem hiding this comment.
- ウィンドウ幅が縮んだ際、テキストも段階的に小さくなるようにした（できるだけテキストが折り返さないように）
- 2つの項目の間に余白を確保
Fukusan64
approved these changes
Aug 16, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
デザインとの差異を修正