はじめに
今回は簡単にサイドバーを作成していきたいと思います。
簡単で実装しやすい方法だと思うので、よければ参考にしてください。
目的
- 記事ページに 関連記事やナビゲーションを右側に表示
- レスポンシブ対応：スマホでは記事下に表示、PCでは右サイドに固定
Sidebarを作成
こちらが今回作成したサイドバーです。詳しく説明していこうと思います。
"use client";
type SidebarProps = {
articles: { id: string; title: string }[];
};
export default function Sidebar({ articles }: SidebarProps) {
return (
<aside className="w-64 ml-6 sticky top-20 h-[calc(100vh-5rem)] overflow-y-auto">
<h2 className="text-xl font-semibold mb-4">関連記事</h2>
<ul className="space-y-2">
{articles.map((article) => (
<li key={article.id}>
<a href={`/blogs/${article.id}`} className="text-blue-600 hover:underline">
{article.title}
</a>
</li>
))}
</ul>
</aside>
);
}
ポイント
w-64 ml-6 sticky top-20 h-[calc(100vh-5rem)] overflow-y-auto
-
w-64
w-1 = 4px
w-32 = 128px
w-64 = 256px
一般的な PC ブラウザ画面幅：1366px × 768pxになります。
ですので今回は約20%ほどをサイドバーの長さに指定 -
ml-6
Tailwind の margin-leftです。上記の例に習うと24px左側にマージンを取ります。 -
sticky
ページをスクロールしても、ある位置までSidebarが追従するようになります。 -
top-20
高さの指定でもありますが、Sidebar がスクロール追従するとき、上から 5rem の位置で止まるようにします。こちらは自身が使用しているヘッダーの高さで微調整しましょう。 -
h-[calc(100vh-5rem)]
高さをcalcでカスタムしています。100vhは全体の高さ - 5rem(ヘッダーの高さや余白分を引く)
こちらの設定でSidebar がスクロール追従する領域を画面に収めることができます。
1ren = 16pxですので h-[calc(100vh-80px)] と書くことも可能 -
overflow-y-auto
要素のサイズを超えたコンテンツの表示方法を制御します。overflow-yは縦方向の呼び出しを制御する。
autoを指定することで記事が多くなり、コンテナ(今回だとaside)の高さを超えるとスクロール表示になります。
layout.tsx
<Header />
<div className="flex flex-col md:flex-row justify-center max-w-6xl w-full gap-6 mx-auto">
<main className="flex-1 bg-white p-6 rounded shadow pt-16 pb-12">
{children}
<div className="mt-6 md:hidden">
<Sidebar articles={allArticles} />
</div>
</main>
<div className="hidden md:block md:w-64 md:ml-6">
<Sidebar articles={allArticles} />
</div>
</div>
<Footer />
flex flex-col md:flex-row
要素を縦並びにするようにflex flex-colを使用します。
md:flex-rowを使用することで、md以上の時に横並びにする設定をします。
こうすることでスマホでは縦、md以上(PC)では横並びにサイドバーが並びます。
flex-1
残りのスペースを全部使わせることができます。幅を自動で調節することができます。これにより、サイドバーが表示されないときは自動で記事の中身のみが全体で確認できます。
md:hidden
md(768px)でhidden(非表示)にします。サイドバーを隠すことに成功します。
-
rounded
角丸にする設定です。 -
hidden md:block md:w-64 md:ml-6
もうわかってきましたね。
hiddenを使用しデフォルトで非表示にし、md以上なら表示、幅を調整、左のマージンをあける
表示UI
PC
スマホ
おわりに
本題ではhidennを使用した、画面表示/非表示が大事なポイントだったかなと思います。
スマホ、PCのUIの調整は複雑な場面が多く設計方法も最初は難しいと思います。まだ、実装に触れていない書きたい記事がたくさんあるので一緒に頑張っていきましょう。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼
下記記事ではCSSの紹介ページを運営していますので参考にしていただければと思います。
▼▼▼