これはよく見かけるmargin-top<pre><code>&lt;div className="flex justify-center items-center p-12"&gt;
 &lt;h1&gt;見出し&lt;/h1&gt;
 &lt;p className="mt-2"&gt;hoge&lt;/p&gt;
 &lt;p className="mt-2"&gt;huga&lt;/p&gt;
&lt;/div&gt;</code></pre> gapを使うと均等に余白を取ってくれます。<pre><code>&lt;div className="flex justify-center items-center p-12 gap-2"&gt;
 &lt;h1&gt;見出し&lt;/h1&gt;
 &lt;p&gt;hoge&lt;/p&gt;
 &lt;p&gt;huga&lt;/p&gt;
&lt;/div&gt;</code></pre> イメージとしてこんな感じです。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/664a5a1fdb4547caabea818a4cf95594/Group%2067.png" alt="">

marginに頼りすぎている

tailwindのdocsにも書かれていますがw-4やw-80などの数字はrem指定です。(w-4 = width: 1rem; / 16px /fullや1/2などは%指定となってます。<a href="https://tailwindcss.com/docs/width" target="_blank" rel="noopener noreferrer">https://tailwindcss.com/docs/width</a> よく見かけるのが <pre><code>&lt;div className="w-full"&gt;
 &lt;p&gt;hoge&lt;/p&gt;
&lt;/div&gt;</code></pre>親が%はダメです。基準としてみるwidthがないのでダメです。 親で100%を取りたい場合はscreenを使いましょう。<pre><code>&lt;div className="w-screen"&gt;
 &lt;p&gt;hoge&lt;/p&gt;
&lt;/div&gt;</code></pre>

基準のない%指定

背景だけ50%透過したいとします。opacityを使うと子要素にも透過が適用されてしまいます。<pre><code>&lt;div className="w-screen hscreen bg-sky-500 opacity-5"&gt;
 &lt;p&gt;hoge&lt;/p&gt;
 &lt;p&gt;huga&lt;/p&gt;
&lt;/div&gt;</code></pre> bg-sky-500/50で背景のみ50%透過することができます。<pre><code>&lt;div className="w-screen hscreen bg-sky-500/50"&gt;
 &lt;p&gt;hoge&lt;/p&gt;
 &lt;p&gt;huga&lt;/p&gt;
&lt;/div&gt;</code></pre>

opactyを単体の要素にのみ適応

よく見かけるレイアウト構造を例に紹介していきました。できるだけ親要素がclassを持っている方が分かりやすいかなと思います。

まとめ

レイアウト構造を考え直してみる

<pre><code>* {
 outline: 1px solid red;
}</code></pre> なんとこれを全体のcssに書くだけ。下記の画像のようにはみ出てる要素が一目瞭然！<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/53c8aa53b7174c28bb395fedf0b14963/image.png" alt=""> <code>overflow: hidden</code>をつけて無事修正完了。

BuildersIO produced by YOKU

#CSS の記事一覧

レイアウト構造を考え直してみる

スマホ表示で画面が横スクロールする現象の画期的な原因調査方法

Nuxt.jsをS3にデプロイしてCloudFront経由でアクセスする

OpenAIとDeeplのAPIを使ってChatGPTのCLIツール作ってみた

単体テストのベストプラクティス