Skip to content

トップページの各セクションを実装 #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 15, 2025
Merged

トップページの各セクションを実装 #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 13 additions & 30 deletions _includes/navbar.html
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mucho613
相談

現状ankerlinkでスクロールしたとき、ターゲットの要素にナビバーがぶつかる状態と思います。
ptで余白を入れ(必要ならば-mtでその分をネガティブマージンで見た目上相殺して)対応したいのですが、
ナビバーの高さが画面幅に依存して変わるため今の実装では対応が困難です。
ナビバーの高さを固定にする方法を考えたいのですが
overflow-x-auto以外になにかアイディアありますか？
↑で一応できそうなのですが若干UX悪そうに思うので代替あれば、またはナビバーが要素にぶつからないようにできればそれで対応したいと思っています。

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Fukusan64 navbar の幅が足りなくなれば、ハンバーガーメニューに格納する方針でいきたいと思います 🙋

Original file line number Diff line number Diff line change
@@ -1,31 +1,14 @@
<header class="fixed-top">
<nav class="navbar navbar-expand-xxl header-nav">
<a class="navbar-brand" href="/#top">
<img src="/img/header/logo-bk.svg" class="d-inline-block align-top site-logo" alt="DojoCon Japan 2024">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="/">TOP</a>
<!--<a class="nav-item nav-link active" href="/#about-coderdojo">CoderDojoとは</a> -->
<a class="nav-item nav-link active" href="/#overview">開催概要</a>
<a class="nav-item nav-link active" href="/#news">お知らせ</a>
<!-- <a class="nav-item nav-link active" href="/#live">ライブ配信</a> -->
<a class="nav-item nav-link active" href="/posts/sponsors/">スポンサー</a>
<!-- <a class="nav-item nav-link active" href="/#staff">スタッフ</a> -->
<!--<a class="nav-item nav-link active" href="/timetable">タイムテーブル</a>-->
<a class="nav-item nav-link active" href="/sessions">セッション</a>
<a class="nav-item nav-link active" href="/events">企画</a>
<!--<a class="nav-item nav-link active" href="/exhibition">展示</a>-->
<!--<a class="nav-item nav-link active" href="/contest">コンテスト</a>-->
<!--<a class="nav-item nav-link active" href="/workshops">ワークショップ</a>-->
<!--<a class="nav-item nav-link active" href="/dojos">Dojo自慢</a>-->
<a class="nav-item nav-link active" href="{{ site.contact }}" target="_blank">問い合わせ</a>
<a class="nav-item nav-link active link_button" href="/registration" style="padding-left:30px;padding-right: 30px;color:white;font-weight: normal;">参加申込</a>
</div>
</div>
<div class="mx-4 sticky top-4 z-10">
<nav
class="rounded-[40px] w-fit mx-auto bg-[#f5f5f5] mt-8 inset-shadow-[0px_-2px_10px_rgba(125,125,125,0.25)] shadow-[7px_7px_10px_rgba(125,125,125,0.15)]">
<ul class="flex flex-wrap min-h-20 items-center p-5 justify-center divide-x-2 gap-y-2 *:text-[#cc8f2e] *:px-6">
<li><a href="#outline">開催概要</a></li>
<li><a href="#session">セッション</a></li>
<li><a href="/events">企画</a></li>
<li><a href="/contest">コンテスト</a></li>
<li><a href="https://suzuri.jp/DojoConJapan" target="_blank">グッズ</a></li>
<li><a href="/sponsorship">スポンサー募集</a></li>
<li><a href="{{ site.contact }}" target="_blank">お問い合わせ</a></li>
</ul>
</nav>
</header>

</div>
40 changes: 40 additions & 0 deletions _includes/top/sections/about-coderdojo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<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%]">
<!-- 見出しセクション -->
<!-- デスクトップの場合 -->
<h2 class="hidden xl:block mx-8">
<img src="/img/2025/top/about-coderdojo/about-coderdojo-heading.webp" alt="About CoderDojo" />
</h2>

<!-- モバイルの場合 -->
<h2 class="relative xl:hidden max-w-lg">
<img src="/img/2025/top/about-coderdojo/about-coderdojo-heading.webp" alt="About CoderDojo" />
<img class="h-full w-auto absolute right-0 top-0 w-3xs" src="/img/2025/top/about-coderdojo/coderdojo-logo-transparent.webp" />
</h2>

<!-- 説明文セクション -->
<div class="mt-9 xl:ml-18 xl:max-w-[620px]">
<p>
CoderDojoは子ども達にプログラミングを学ぶ場を提供する、ボランティア主導の世界的な非営利活動です。
</p>
<p>
CoderDojoは2011年にアイルランドから始まり、現在は世界100カ国に2,000以上の道場があり、日本国内でも全国200以上の道場で毎年1,000回以上(*1)開催されています。CoderDojoはエンジニアやデザイナー、各地域の保護者や学生、研究者や経営者など（メンター）と子どもが出会える場にもなっています。<br />
<small>*1 統計情報:https://coderdojo.jp/stats</small>
</p>
</div>
</div>
</div>

<!-- DojoCon の画像 -->
<!-- デスクトップの場合 -->
<div class="hidden xl:flex items-center -mx-4 xl:mt-18 justify-between">
<div class="w-2/7 mt-12"><img class="w-full" src="/img/2025/top/about-coderdojo/coderdojo-logo-transparent.webp" /></div>
<div class="w-2/3 mt-12"><img class="w-full" src="/img/2025/top/about-coderdojo/dojocon.webp" /></div>
</div>

<!-- モバイルの場合 -->
<div class="xl:hidden block m-8">
<img class="max-w-3xl place-self-center w-full" src="/img/2025/top/about-coderdojo/dojocon.webp" />
</div>
</div>
47 changes: 47 additions & 0 deletions _includes/top/sections/inspire-next.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!-- デスクトップの場合 -->
<div class="hidden xl:flex mt-48">
<div class="w-[45%] -mt-10 mx-auto absolute z-1 pr-16 right-0">
<h2>
<img src="/img/2025/top/inspire-next/inspire-next-heading.webp" alt="Inspire NEXT ～好奇心に火をつけよう～" />
</h2>
<div class="mt-9 max-w-3xl">
今年のDojoCon Japanのテーマは「Inspire NEXT〜好奇心に火をつけよう〜」です。<br />
この言葉には、「次の一歩をふみ出すきっかけになるようなひらめきや刺激を届けたい」という思いがこめられています。プログラミングやテクノロジーの世界は、AIなど新しいことがどんどん出てきて、変わり続けています。でも、子どもたちの「やってみたい！」「知りたい！」という好奇心は、いつの時代も変わりません。<br />
CoderDojoは、そんな好奇心を大切にし、応援する場所です。<br />
このイベントを通して、子どもも大人も、次のチャレンジに向かう気持ちに火がつくような出会いや体験を届けたいと考えています。新しい道場を作ってみたくなったり、今の道場をもっと良くしたくなったり――<br />
そんな「次」への一歩をみんなで応援します。
</div>
</div>

<div class="flex items-center -mx-4 mt-18 justify-between w-full">
<div class="w-2/3 relative">
<!-- 写真にかぶっても視認性を確保するためのオーバーレイ -->
<div class="bg-linear-to-r from-transparent from-70% to-white hidden top-0 xl:block absolute size-full">
</div>
<img class="w-full" src="/img/2025/top/inspire-next/exhibit.webp" />
</div>
<div class="w-1/4 -mt-48"><img class="w-full" src="/img/2025/top/inspire-next/fire-transparent.webp" /></div>
</div>
</div>

<!-- モバイルの場合 -->
<div class="xl:hidden relative mt-20 mx-6">
<div class="max-w-3xl mx-auto">
<h2 class="relative max-w-7xl">
<img src="/img/2025/top/inspire-next/inspire-next-heading.webp" alt="Inspire NEXT ～好奇心に火をつけよう～" />
<img class="h-[140%] w-auto absolute right-0 -bottom-1/5 w-3xs" src="/img/2025/top/inspire-next/fire-transparent.webp" />
</h2>

<div class="mt-9">
今年のDojoCon Japanのテーマは「Inspire NEXT〜好奇心に火をつけよう〜」です。<br />
この言葉には、「次の一歩をふみ出すきっかけになるようなひらめきや刺激を届けたい」という思いがこめられています。プログラミングやテクノロジーの世界は、AIなど新しいことがどんどん出てきて、変わり続けています。でも、子どもたちの「やってみたい！」「知りたい！」という好奇心は、いつの時代も変わりません。<br />
CoderDojoは、そんな好奇心を大切にし、応援する場所です。<br />
このイベントを通して、子どもも大人も、次のチャレンジに向かう気持ちに火がつくような出会いや体験を届けたいと考えています。新しい道場を作ってみたくなったり、今の道場をもっと良くしたくなったり――<br />
そんな「次」への一歩をみんなで応援します。
</div>
</div>

<div class="max-w-3xl mx-auto mt-8">
<img class="place-self-center w-full" src="/img/2025/top/inspire-next/exhibit.webp" />
</div>
</div>
53 changes: 53 additions & 0 deletions _includes/top/sections/keynote.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<h2 class="text-4xl text-center mb-12">
基調講演
<span class="block mt-5 text-2xl">KEYNOTE 01</span>
</h2>

<div class="flex px-6 lg:px-12 max-w-7xl mx-auto jutify-between gap-x-12 mb-16 flex-col lg:flex-row-reverse">
<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-xs mb-8 leading-5">
一般社団法人 CoderDojo Japan 理事<br />
CoderDojo Kashiwa Champion
</p>
<p class="leading-7 mb-8">
AI（人工知能）がどんどん進化し、わたしたちのまわりにも当たり前のように使われるようになってきました。そんな時代に、子どもたちはどんなふうに学び、何を創り出していくのでしょうか？<br />
この講演では、生成AIの今とこれから、そしてAIとともに学ぶことの楽しさや可能性について、わかりやすくお話しします。<br />
未来をつくる子どもたちの「創造力」を育むために、わたしたち大人ができること、CoderDojoが果たせる役割についても、一緒に考えていきましょう。
</p>
</div>
<div class="place-self-center lg:place-self-start max-w-full lg:w-[45%]">
<div class="aspect-[1/cos(30deg)] overflow-hidden flex items-center justify-center"
style="clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);">
<img class="w-full" src="https://placehold.jp/512x512.png" alt="宮島 衣瑛">
</div>
</div>
</div>

<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-xs mb-8 leading-5">
スタディサプリ教育AI研究所所長<br />
国立大学法人 東京学芸大学大学院教育学研究科准教授
</p>
<p class="leading-7 mb-8">
AIやテクノロジーの進化によって、わたしたちの生活や学びの環境は、これまでにないスピードで変わっています。そんな時代に、子どもたちの「知りたい！」「やってみたい！」という気持ちをどう育てていけばいいのでしょうか？<br />
そして、子どもたちの好奇心を守り、伸ばすために、大人にはどんなかかわり方ができるのでしょうか？教育とテクノロジーの専門家である小宮山さんが、たくさんの事例をまじえながら、未来の学びについてやさしく語ってくれます。
</p>
</div>
<div class="place-self-center lg:place-self-start max-w-full lg:w-[45%]">
<div class="aspect-[1/cos(30deg)] overflow-hidden flex items-center justify-center"
style="clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);">
<img class="w-full" src="https://placehold.jp/512x512.png" alt="小宮山 利恵子">
</div>
</div>
</div>
16 changes: 16 additions & 0 deletions _includes/top/sections/news.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<h2 class="text-4xl mt-20 sm:mt-32 text-center">
お知らせ
<span class="block mt-5 text-2xl">NEWS</span>
</h2>

<div class="m-6 flex flex-col items-center">
<ul class="border-y divide-y max-w-7xl mx-auto mb-12">
{% for i in (1..5) %}
<li class="text-sm flex items-center py-4 flex-wrap sm:flex-nowrap gap-y-1">
<time class="block min-w-24">2025.06.20</time>
<span class="block min-w-24 text-center mr-6 px-4 py-px rounded-xs bg-[#cc8f2e] text-white">レポート</span>
DojoCon Japan 2025開催のお知らせ　今年のテーマは「Inspire NEXT〜好奇心に火をつけよう〜」
</li>
{% endfor %}
</ul>
</div>
8 changes: 8 additions & 0 deletions _includes/top/sections/organized-by.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<h2 class="text-4xl text-center">
主催
<span class="block mt-5 text-2xl">ORGANIZED BY</span>
</h2>
<p class="text-2xl sm:text-4xl text-center mt-10 mx-8 leading-16">
DojoCon Japan 2025 実行委員会<br />
一般社団法人 CoderDojo Japan
</p>
38 changes: 38 additions & 0 deletions _includes/top/sections/outline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<h2 id="outline" class="text-4xl text-center mb-8 pt-20">
開催概要
<span class="block mt-5 text-2xl">OUTLINE</span>
</h2>

<div class="md:max-w-3xl xl:max-w-7xl mx-auto">
<div class="flex mx-6 justify-between flex-wrap text-center text-xl gap-y-8
flex-col min-[400px]:flex-row
min-[400px]:*:w-[45%] xl:*:w-[24%]">
<div class="flex flex-col justify-between">
<div class="flex flex-1 items-center justify-center mb-4">
<img class="place-self-center align-middle" src="/img/2025/top/outline/date.webp">
</div>
<p>開催日時</p>
</div>

<div class="flex flex-col justify-between">
<div class="flex flex-1 items-center justify-center mb-4">
<img class="place-self-center align-middle" src="/img/2025/top/outline//kurume-kappa.webp">
</div>
<p class="whitespace-pre">福岡県久留米市<wbr />六ツ門町８−１</p>
</div>

<div class="flex flex-col justify-between">
<div class="flex flex-1 items-center justify-center mb-4">
<img class="place-self-center align-middle" src="/img/2025/top/outline//city-plaza.webp">
</div>
<p class="whitespace-pre">久留米市<wbr />シティプラザ</p>
</div>

<div class="flex flex-col justify-between">
<div class="flex flex-1 items-center justify-center mb-4">
<img class="place-self-center align-middle" src="/img/2025/top/outline//free.webp">
</div>
<p>参加無料</p>
</div>
</div>
</div>
27 changes: 27 additions & 0 deletions _includes/top/sections/session.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<div id="session" class="max-w-3xl lg:max-w-[1800px] px-8 mx-auto mt-8 mb-16 flex flex-col lg:-mt-64 lg:flex-row items-center lg:items-start">
<div class="w-full lg:w-2/5 mb-8 lg:mt-68">
<div class="lg:max-w-sm lg:place-self-end lg:mr-[10%]">
<h2 class="text-4xl mb-4 text-center lg:text-left">
セッション
<span class="block mt-2 text-2xl">SESSION</span>
</h2>
<p class="leading-7 mb-10">
さまざまな分野で活やくしている人たちの話を聞いて、考え方やアイデアを広げてみよう。<br />
プログラミングや教育、地域での活動など、たくさんのヒントがつまった時間です。
</p>
</div>
</div>

<ul class="flex flex-wrap gap-x-6 gap-y-12 lg:w-3/5">
{% for i in (1..6) %}
<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">
登壇者：仮の団体名・仮の登壇者の氏名<br />
所属：仮の所属名</p>
</li>
{% endfor %}
</ul>
</div>
45 changes: 45 additions & 0 deletions _includes/top/sections/sponsor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<h2 class="text-4xl text-center">
スポンサー
<span class="block mt-5 text-2xl">SPONSOR</span>
</h2>

<h3 class="text-2xl mt-22 mx-8 text-center mb-4">ゴールドスポンサー
<span class="block text-base mt-1">GOLD SPONSOR</span>
</h3>

<div class="flex gap-x-8 px-8 max-w-3xl mx-auto">
<img class="w-full max-w-3xl mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="ゴールドスポンサーのロゴ">
</div>

<h3 class="text-2xl mt-22 mx-8 text-center mb-4">シルバースポンサー
<span class="block text-base mt-1">SILVER SPONSOR</span>
</h3>

<div class="flex gap-x-8 px-8 max-w-3xl mx-auto">
<div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="シルバースポンサーのロゴ">
</div>
<div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="シルバースポンサーのロゴ">
</div>
</div>

<h3 class="text-2xl mt-22 mx-8 text-center mb-4">ブロンズスポンサー
<span class="block text-base mt-1">BRONZE SPONSOR</span>
</h3>

<div class="flex gap-x-8 px-8 max-w-3xl mx-auto">
<div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="ブロンズスポンサーのロゴ">
</div>
<div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="ブロンズスポンサーのロゴ">
</div>
</div>

<h3 class="text-2xl mt-22 mx-8 text-center mb-4">インカインドスポンサー
<span class="block text-base mt-1">IN-KIND SPONSOR</span>
</h3>

<div class="flex gap-x-8 px-8 max-w-3xl mx-auto">
<div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="インカインドスポンサーのロゴ">
</div>
<div><img class="w-full mx-auto mb-8" src="https://placehold.jp/1920x1080.png" alt="インカインドスポンサーのロゴ">
</div>
</div>
48 changes: 48 additions & 0 deletions _includes/top/sections/staff.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<h2 class="text-4xl text-center pt-20 xl:pt-30">
実行員紹介
<span class="block mt-5 text-2xl">STAFF</span>
</h2>

<!-- デスクトップで表示 -->
<div class="hidden xl:block max-w-7xl mx-auto my-24">
<ul class="staff flex flex-wrap justify-center gap-x-36">
{% for i in (1..42) %}
<li class="-mt-[74px]">
<div class="relative aspect-[1/cos(30deg)] w-50 overflow-hidden flex items-center justify-center"
style="clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);">

<div class="block absolute size-full opacity-0 hover:opacity-100 transition-200 transition-opacity">
<div class="absolute size-full mix-blend-multiply bg-[#6f6f6f]"></div>
<p class="flex flex-col items-center justify-center text-white text-center absolute size-full">
<span class="text-xs">肩書き</span>
名字 名前
<span class="text-xs">道場名</span>
</p>
</div>
<img class="w-full" src="https://placehold.jp/320x320.png" alt="スタッフの写真">
</div>
</li>
{% endfor %}
</ul>
</div>

<!-- モバイルで表示 -->
<div class="block xl:hidden mx-auto mt-9 mb-20">
<ul class="flex flex-wrap justify-center gap-x-2 gap-y-6 mx-[2%]">
{% for i in (1..42) %}
<li class="flex flex-col items-center gap-y-2">
<div class="relative aspect-[1/cos(30deg)] w-24 sm:w-30 overflow-hidden flex items-center justify-center"
style="clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);">
<img class="w-full" src="https://placehold.jp/320x320.png" alt="スタッフの写真">
</div>

<!-- モバイルで表示する、肩書きや氏名の表示 -->
<p class="flex flex-col text-center">
<span class="text-xs">肩書き</span>
名字 名前
<span class="text-xs">道場名</span>
</p>
</li>
{% endfor %}
</ul>
</div>
Loading