[Gatsby/React/TailwindCSS]マージンを使いこなしてみた

tailwind システム開発

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ごとにゆとりがないので、これをマージンを使って調整していこうと思います。

Output-1

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>
...

すると、、さっきよりはだいぶスマートに!!見せれるものになった気がします。ただ、この画像と背景、線をより自由に表現したい・・。もう少しマージンで改善できないかを試行錯誤することにしました。

Output-2

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>
...

すると、、こんな感じになりました!背景に捉われずに、画像や線などを自由に配置することができるようになりました。

Output-3

私にとっては新鮮な気付きでしたので、紹介させてもらいました。もっといいやり方などある場合は、是非教えてください!閲覧ありがとうございました。

コメント

タイトルとURLをコピーしました