🙆

余白をつくるいろいろな方法【React×MUI】

かめ

2024/09/07に公開

React

tech

ここでは、ReactでWEBアプリの画面を作っているときに、アイテムとアイテムの間に余白を設けるいろいろな方法を紹介していきたいと思います。
!この記事でわかること
余白を設定する方法

margin、padding、gapといったプロパティの使い方
完成イメージはコチラ↓
変更前


変更後






文字やテーブル、ボタンなどのアイテムを配置する際に、余白を設けたり、間隔を空けたいときってありますよね。どのようにすると、それが実現するのでしょうか。
余白や間隔を空けるには、CSSプロパティを設定することで実現できます。一般的に使用できるプロパティとして大きく３つあります。
margin
padding
gap
それぞれのプロパティの使用方法を見ていきましょう。もとのコードはこんな感じです。
// コンポーネント内、import文などは省略
<Box sx={{ display: "flex", flexDirection: "column" }}>
  <Typography>下にボタンが３つあります</Typography>
  {/* onClickイベントは未設定 */}
  <Button variant="contained" color="error" onClick={() => null}>
    ボタン１
  </Button>
  <Button variant="contained" color="primary" onClick={() => null}>
    ボタン２
  </Button>
  <Button variant="contained" color="success" onClick={() => null}>
    ボタン３
  </Button>
  <Typography>上にボタンが３つあります</Typography>
</Box>
このコードに変更を加えていきます。

画面は一番上の画像と同じく、こんな感じです。


 margin// margin
<Box sx={{ display: "flex", flexDirection: "column" }}>
  <Typography>下にボタンが３つあります</Typography>
  {/* onClickイベントは未設定 */}
  <Button variant="contained" color="error" sx={{ mb: "16px" }} onClick={() => null}>
    ボタン１
  </Button>
  <Button variant="contained" color="primary" sx={{ mb: "16px" }} onClick={() => null}>
    ボタン２
  </Button>
  <Button variant="contained" color="success" onClick={() => null}>
    ボタン３
  </Button>
  <Typography>上にボタンが３つあります</Typography>
</Box>
sx={{ mb: "16px" }} というプロパティをボタン１と２に設定しました。するとこのように変化します。



marginプロパティを使用することで、要素の外側にスペース（余白）を追加することができます。このプロパティは、要素の周り（上下左右全て）に均一なスペースを設定するために一つの値を指定するか、上下左右のスペースを個別に設定するために複数の値を指定できます。
mb はmarginBottomの略で 、要素の下側に余白を作る設定です。省略せずに、
sx={{ marginBottom: "16px" }}と、記載することも可能で、意味は同じです。
下側の他にも、上側に余白を設けるならsx={{ marginTop: "16px" }}もしくは
sx={{ mt: "16px" }}と記載すると実現します。左右なら、同様にmarginの後ろをLeftやRightに変えることで実現します。また単にsx={{ margin: "16px" }}とすると、上下左右全てに16pxの余白ができます。他にも、marginBlockやmarginInline など設定できるプロパティが多数存在します。

 padding// padding
<Box sx={{ display: "flex", flexDirection: "column" }}>
  <Typography>下にボタンが３つあります</Typography>
  <Button variant="contained" color="error" sx={{ p: "16px" }} onClick={() => null}>
    ボタン１
  </Button>
  <Button variant="contained" color="primary" sx={{ p: "16px" }} onClick={() => null}>
    ボタン２
  </Button>
  <Button variant="contained" color="success" sx={{ p: "16px" }} onClick={() => null}>
    ボタン３
  </Button>
  <Typography>上にボタンが３つあります</Typography>
</Box>
sx={{ p: "16px" }} というプロパティをすべてのボタンに設定しました。するとこのように変化します。



paddingプロパティを使用することで、要素の内側にスペース（余白）を追加することができます。これにより、要素の内容（子コンポーネントやテキストなど）と要素の境界線の間に余白が生まれます。paddingもmarginと同様に、一つの値で均一なパディングを設定したり、上下左右別々に設定することができます。要素の内側なのか外側なのかが、marginとの相違点です。
p はpaddingの略で、この場合上下左右に余白を作る設定です。これも、省略せずに、
sx={{ padding: "16px" }}と、記載することも可能で、意味は同じです。

 gap// gap
<Box sx={{ display: "flex", flexDirection: "column", gap: "16px" }}>
  <Typography>下にボタンが３つあります</Typography>
  <Button variant="contained" color="error" onClick={() => null}>
    ボタン１
  </Button>
  <Button variant="contained" color="primary" onClick={() => null}>
    ボタン２
  </Button>
  <Button variant="contained" color="success" onClick={() => null}>
    ボタン３
  </Button>
  <Typography>上にボタンが３つあります</Typography>
</Box>
sx={{ gap: "16px" }} というプロパティを、<Box> タグに設定しました。するとこのように変化します。

gapプロパティを使用することで、フレックスボックス（display: "flex"）やグリッド（display: "grid"）コンテナ内の子要素間（ここでは２行のテキストと３つのボタン）の間隔を設定することができます。これにより、子要素間に均等なスペースを追加することができます。

 まとめアイテム間に余白や間隔を設けたいとき
アイテムの外側に余白を設けたいときはmargin
アイテムの内側に余白を設けたいときはpadding
アイテム間に均等な間隔を設けたいときはgap
を使用することで実現できる

株式会社XronotechPublication

福岡でシステム開発を行うXronotechの公式アカウントです。 Webアプリやスマホアプリを開発しています。

margin

padding

gap

まとめ

Discussion