1. はじめに
カンパニーサイトをGatsby/React/TailwindCSSを使って開発しておりますが、その際の気付きがあったため、ブログ化しました。尚、当方はWeb開発初心者であるため、至らない点がある場合はご容赦くださいませ。
2. 初期
事業内容ページの作成。背景色・線・画像・境界線・文字、を組み合わせて、スタイリッシュなレイアウトにしたい。先ずは今まで蓄えた知識で、形にしてみます。
ソースコードは、こんな感じです。
...
<div>
<div className="bg-primary text-center">
<p className="text-white">事業内容</p>
<hr></hr>
<StaticImage src="../images/biz.jpeg" />
<div className="text-primary border-solid border-2 border-primary bg-white">電気・電子機器の総合商社
</div>
<div className="text-white text-xs">産業や社会のあらゆる分野にかかわる様々な電気・機械設備関連のニーズに応え、幅広く膨大な機器の中から最適なものを選びシステム化、販売するのはもちろん、既存設備のメンテナンスや改良・更新の提案、さらにはお客様の抱える問題点をいち早く把握し解決に導くトータルソリューションカンパニーをめざしています。</div>
</div>
</div>
...すると、以下のようなOutputになりました。うん、カラーイメージはOK。ただ、各divごとにゆとりがないので、これをマージンを使って調整していこうと思います。
3. マージンを使った一般的な調整
Tailwind CSSの公式ページを見ながら、マージンを追加してみます。一部、パディングも使用しました。index-1.jsを以下のような感じに改良してみました
...
<div className="m-10">
<div className="bg-primary py-1 text-center">
<p className="text-white mt-3 mb-1">事業内容</p>
<hr></hr>
<StaticImage src="../images/biz.jpeg" className="my-6" />
<div className="text-primary border-solid border-2 border-primary bg-white">電気・電子機器の総合商社
</div>
<div className="text-white text-xs my-5 mx-4">産業や社会のあらゆる分野にかかわる様々な電気・機械設備関連のニーズに応え、幅広く膨大な機器の中から最適なものを選びシステム化、販売するのはもちろん、既存設備のメンテナンスや改良・更新の提案、さらにはお客様の抱える問題点をいち早く把握し解決に導くトータルソリューションカンパニーをめざしています。</div>
</div>
</div>
...すると、、さっきよりはだいぶスマートに！！見せれるものになった気がします。ただ、この画像と背景、線をより自由に表現したい・・。もう少しマージンで改善できないかを試行錯誤することにしました。
4. マイナスマージンを使ったレウアウト調整
これが、今回の記事でご紹介したいことです。TailwindCSS初心者の私にとっては画期的な発見でした。背景の幅から、画像と線を外に出したい。その時試行錯誤の結果、マイナスマージンに行きつきました。index-2.jsの m-10 マージンをベースに、マイナス設定をするイメージです。
...
<div className="m-10">
<div className="bg-primary py-1 ml-10 -mr-10 text-center">
<p className="text-white mt-3 mb-1">事業内容</p>
<hr className="-ml-20 mr-20"></hr>
<StaticImage src="../images/biz.jpeg" className="-mx-20 my-6" />
<div className="text-primary border-solid border-2 border-primary bg-white mr-10 -ml-10">電気・電子機器の総合商社
</div>
<div className="text-white text-xs my-5 mx-4">産業や社会のあらゆる分野にかかわる様々な電気・機械設備関連のニーズに応え、幅広く膨大な機器の中から最適なものを選びシステム化、販売するのはもちろん、既存設備のメンテナンスや改良・更新の提案、さらにはお客様の抱える問題点をいち早く把握し解決に導くトータルソリューションカンパニーをめざしています。</div>
</div>
</div>
...すると、、こんな感じになりました！背景に捉われずに、画像や線などを自由に配置することができるようになりました。
私にとっては新鮮な気付きでしたので、紹介させてもらいました。もっといいやり方などある場合は、是非教えてください！閲覧ありがとうございました。