kzk4043

<p>カルーセルとかアコーディオンとかよくあるパーツのコンポ作成方針についてメモ</p>


<h2 id="%E5%85%A8%E4%BD%93" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E5%85%A8%E4%BD%93" aria-hidden="true"></a> 全体</h2>
<ul data-line="2" class="code-line">
<li data-line="2" class="code-line">padding/marginなどを子コンポ側が持たない？
<ul data-line="3" class="code-line">
<li data-line="3" class="code-line">これはちょっと整理した方がよさそう</li>
</ul>
</li>
</ul>


<h1 id="%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%B3">
<a class="header-anchor-link" href="#%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%B3" aria-hidden="true"></a> アコーディオン</h1>
<ul>
<li>開閉animation &gt; FramerMotion使う想定（<a href="https://zenn.dev/soma3134/articles/20220819_accordion" target="_blank">to 100%へのアニメーション可</a>）</li>
</ul>
<h2 id="%E3%81%82%E3%82%8A%E5%BE%97%E3%82%8B%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3">
<a class="header-anchor-link" href="#%E3%81%82%E3%82%8A%E5%BE%97%E3%82%8B%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3" aria-hidden="true"></a> あり得るパターン</h2>
<ul>
<li>最初は高さ固定で隠して開閉</li>
<li>カードのような羅列要素の何枚目まで初期表示表示</li>
</ul>


<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a0e92f595f234" src="https://embed.zenn.studio/card#zenn-embedded__a0e92f595f234" data-content="https%3A%2F%2Fzenn.dev%2Fmiravy%2Farticles%2F33b97d94bb7ea7" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/miravy/articles/33b97d94bb7ea7" style="display:none" target="_blank">https://zenn.dev/miravy/articles/33b97d94bb7ea7</a></p>


<h1 id="%E3%82%BF%E3%83%96">
<a class="header-anchor-link" href="#%E3%82%BF%E3%83%96" aria-hidden="true"></a> タブ</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fafc932d3173d" src="https://embed.zenn.studio/card#zenn-embedded__fafc932d3173d" data-content="https%3A%2F%2Fzenn.dev%2Fstafes_blog%2Farticles%2Fnano72mkn-tab-a11y" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/stafes_blog/articles/nano72mkn-tab-a11y" style="display:none" target="_blank">https://zenn.dev/stafes_blog/articles/nano72mkn-tab-a11y</a></p>


<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ce4a6f01c48a" src="https://embed.zenn.studio/card#zenn-embedded__ce4a6f01c48a" data-content="https%3A%2F%2Fqiita.com%2Fdegudegu2510%2Fitems%2F319226d98e05a348b204" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/degudegu2510/items/319226d98e05a348b204" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/degudegu2510/items/319226d98e05a348b204</a></p>


<h1 id="heading" data-line="0" class="code-line">
<a class="header-anchor-link" href="#heading" aria-hidden="true"></a> heading</h1>
<p data-line="2" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8052598655b71" src="https://embed.zenn.studio/card#zenn-embedded__8052598655b71" data-content="https%3A%2F%2Fwebfrontend.ninja%2Fhtml-hgroup-element%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://webfrontend.ninja/html-hgroup-element/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://webfrontend.ninja/html-hgroup-element/</a></p>
