Takaaki Kakei

<h2 id="main%E7%B3%BB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#main%E7%B3%BB" aria-hidden="true"></a> Main系</h2>
<ul data-line="2" class="code-line">
<li data-line="2" class="code-line">flex-grow
<ul data-line="3" class="code-line">
<li data-line="3" class="code-line">親要素内で可能な限りのスペースを占める</li>
</ul>
</li>
<li data-line="4" class="code-line">flex
<ul data-line="5" class="code-line">
<li data-line="5" class="code-line">子要素をフレックスコンテナ内で配置</li>
</ul>
</li>
<li data-line="6" class="code-line">flex-col
<ul data-line="7" class="code-line">
<li data-line="7" class="code-line">子要素を縦方向（列）に設定</li>
</ul>
</li>
<li data-line="8" class="code-line">h-screen
<ul data-line="9" class="code-line">
<li data-line="9" class="code-line">ビューポート全体の高さを占める</li>
</ul>
</li>
</ul>
<h2 id="header%E7%B3%BB" data-line="11" class="code-line">
<a class="header-anchor-link" href="#header%E7%B3%BB" aria-hidden="true"></a> Header系</h2>
<ul data-line="13" class="code-line">
<li data-line="13" class="code-line">sticky
<ul data-line="14" class="code-line">
<li data-line="14" class="code-line">top-0と組み合わせることで、スクロールしてもヘッダーが画面の上部に固定される</li>
</ul>
</li>
<li data-line="15" class="code-line">shrink-0
<ul data-line="16" class="code-line">
<li data-line="16" class="code-line">要素が縮小されないようにする</li>
</ul>
</li>
<li data-line="17" class="code-line">items-center
<ul data-line="18" class="code-line">
<li data-line="18" class="code-line">Flexboxの子要素を垂直方向に中央揃えにする</li>
</ul>
</li>
<li data-line="19" class="code-line">justify-between
<ul data-line="20" class="code-line">
<li data-line="20" class="code-line">Flexboxの子要素を左右に均等に配置する</li>
</ul>
</li>
</ul>


<p data-line="0" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ddef87e2aaabe" src="https://embed.zenn.studio/card#zenn-embedded__ddef87e2aaabe" data-content="https%3A%2F%2Fui.shadcn.com%2Fdocs%2Fcomponents%2Fsidebar" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://ui.shadcn.com/docs/components/sidebar" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://ui.shadcn.com/docs/components/sidebar</a></p>
<p data-line="2" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/580f5e3b72cb-20241025.png" loading="lazy" class="md-img"></p>
<p data-line="4" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/96ead3354bdb-20241025.png" loading="lazy" class="md-img"></p>


<p data-line="0" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d4c5e471d7249" src="https://embed.zenn.studio/card#zenn-embedded__d4c5e471d7249" data-content="https%3A%2F%2Fui.shadcn.com%2Fblocks" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://ui.shadcn.com/blocks" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://ui.shadcn.com/blocks</a></p>
