nazo6 notememo

CSSでヘッダー、ナビバーを持つコンテンツを作るにはどうするのが良いか?

作成:2023/06/28

更新:2023/06/28

1. flexを使う

<div class="flex flex-col">
<div>Header</div>
<div class="flex flex-row">
<div>Navbar</div>
<div>Content</div>
</div>
</div>
的な感じのやつ。
  • pros
    • わかりやすい
  • cons
    • なんかはみだしたりする

2. ヘッダとナビバーをfloatにする

<div className="h-full">
<div className="md:ml-[18rem] pt-10 z-0">
<Content />
</div>
<div className="fixed top-0 w-full h-10 flex flex-row items-center bg-white">
<Header />
<div className="hidden md:block fixed top-0 mt-10 min-w-[18rem] border-gray-700 border-r h-full bg-white">
<Sidebar />
</div>
</div>

  • pros
    • なんだかんだうまくいく