技術っぽいことを書いてみるブログ

PythonとかVue.jsとか技術的なことについて書いていきます。

CSSについてtailwindとともに整理する～コンテンツの中央揃え～

はじめに

  • だいぶ昔に学習したCSSですが、仕事上の役割とともにだいぶ忘れているなぁと思いますので、再度知識を整理したいと思います。
  • 今回は、コンテンツ領域を中央に揃えるやつです。
    • 昔に比べて横幅が1920を超えるPCは当たり前になってきまいたが、コンテンツ領域が画面いっぱいにあると見にくいです。
    • なので、一般的にはコンテンツは、中央に配置する感じが普通かなと思います。

注意点

  • メインはCSSの整理ですが、プログラムはReactで書きます。
  • また、CSSライブラリのtailwindの書き味も確認します。

やってみた

  • サンプル
import { FC, PropsWithChildren } from 'react';

type Props = PropsWithChildren;

const Container: FC<Props> = ({ children }) => {
  return (
    <>
      <div className="containerCSS">{children}</div>

      <div className="max-w-5xl mx-[10px] my-3 bg-gray-500 lg:mx-auto ">
        {children}
      </div>

      <div className="container bg-gray-700 mx-auto">fugafuga</div>
    </>
  );
};

export default Container;

@tailwind base;
@tailwind components;
@tailwind utilities;


.containerCSS {
  margin: 12px 10px;
  background-color: gray;
}

@media (min-width: 1024px) {
  .containerCSS {
    max-width: 1024px;
    margin: 12px auto;
    background-color: gray;
  }
}
  • 表示イメージ

CSS解説

  • 注目すべきは、 margin: 12px auto; ここです。
    • margin: 〇 ×と書くことで、〇は上下のマージン領域の指定、×は左右のマージン領域の指定となります。
    • margin: 〇 △ □ × と書くことで、〇は上、△は右、□は下、×は左のマージン領域の指定をすることになります。
    • marginにautoをつけることで、親要素の幅 - 当該要素の幅を計算して、自動的にマージン領域を設定してくれます。
      • これによりautoを左右のマージンに設定することで、コンテンツ領域を中央に寄せることができます。

tailwind解説

  • 注目すべきは、lg:mx-autoです。
    • lgをつけることで、@media (min-width: 1024px)におけるクラス指定の意味になります。
      • つまり、画面幅が、1024pxを超えた場合は、mx-autoを使いますよ♪という意味です。
      • mx-autoは、X軸方向のマージンの意味で、設定する値がautoになります。
  • 他に注目すべきは、mx-[10px]です。
    • tailwindはある程度の幅に応じたマージンをmx-4、mx-6といった形で用意していますが、細かい値を指定したい場合は[]に単位付きで設定することができます。
  • なお、tailwindでは、様々な画面幅に応じたcontainerというクラスが用意されていました。

マージンのたたき込み

  • 一つ目のdivの領域（上下のマージンは、12とっている）

  • 二つ目のdivの領域（上下のマージンは、12とっている）

  • 一つ目の下マージンは12pxで、二つ目の上マージンは12pxだから、間は24pxマージンされるはずじゃ？？？

解説

  • これは、マージンのたたき込みといわれるCSSの仕様です。
  • マージンのたたき込みとは、ふたつの要素に設定した上下マージンが隣接するとき、どちらか大きい方のマージンが採用されるというルールです。
  • なお、たたき込みが行われるのは、上下マージンだけで、左右のマージンの場合は発生しません。
  • 今回の例は、兄弟要素におけるマージンのたたき込みです。
    • 他に親要素と子要素のマージンのたたき込みも発生します。
      • 親要素の上マージンと最初の子要素の上マージン、親要素の下マージンと最後の子要素の下マージンが叩き込まれます。
      • この場合、親要素の外側にマージンが作られます。
      • 親要素のマージンが0の場合でもたたみ込みが行われ、この場合は子要素のマージンが親要素の外側にできます。

所感…

徐々に投稿していきますね。。