CSSについてtailwindとともに整理する～画像にテキストを回り込ませる編～

はじめに

• だいぶ昔に学習したCSSですが、仕事上の役割とともにだいぶ忘れているなぁと思いますので、再度知識を整理したいと思います。
• 今回は、画像にテキストを回り込ませるやつです。
  • 近頃じゃあまり使わないように思うfloatですが、こういう時に使う感じになるかなと思います。

やってみた

• サンプルコード

import { FC, PropsWithChildren } from 'react';
import dummy from '../../assets/sport_soccerball.png';

type Props = PropsWithChildren;

const Container: FC<Props> = ({ children }) => {
  return (
    <>
      <div className="containerCSS">
        {' '}
        <div className="floatBox">
          <img src={dummy} className="soccerBall floatLeft" />
          <p className="">
            これはサッカーボールですね🎵これはサッカーボールですね…
          </p>
        </div>
      </div>

      <div className="max-w-5xl mx-[10px] my-3 bg-gray-500 lg:mx-auto ">
        <div className="flow-root">
          <img src={dummy} className="w-[100px] float-left" />
          <p className="">
            これはサッカーボールですね🎵これはサッカーボールですね…
          </p>
        </div>
      </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;
  }
}

.soccerBall {
  width: 100px;
}

.floatBox {
  display: flow-root;
}
.floatLeft {
  float: left;
}

.floatRight {
  float :right;
}

こんな感じの表示

• 画像にテキストが回り込んでいます。

CSS解説

• ポイントは、イメージとテキストを囲むブロックをdisplay: flow-rootとすること
  • 画像にテキストを回り込ませるのは、 floatでできますが、後続の要素はすべて適用した要素に回り込むように配置されます。
  • そのため、floatを解除する必要があります。
  • そこで登場するのが、イメージとテキストを囲む親要素にdisplay: flow-rootを指定すること
  • これで、この範囲を抜けると、floatが解除されます。

tailwind解説

• 特にないかな…。

所感…

• 昔は結構このfloatを多用せざるを得なかった気がしますが、現在の用途はこれくらいですかね。
• 基本は、flexやgridを使うと思うので…。