【positon:absoluteとtransform:translate】子要素を自由自在に配置する方法まとめ

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

子要素をposition:absoluteやtransform:translateを使って、上下中央、左右中央+上など自由自在に配置する方法が知りたい
知らないと確実に損するし、要素の配置に躓く大きな要因になるtransform:translateの使い方が知りたい

という方のお悩みを解決します！

今回、紹介するサンプルコードはぼくがふだん、実際のWebサイト制作案件で使用しているものです。

ここだけの話、このTipsを使わないコーディング案件にはほとんど出会ったことがありません笑

それだけ習得必須の技術となりますのでぜひ覚えていってください！

絶対配置の要素のコーディングに悩んでいる方のお役に立てれば幸いです。

上下中央に配置
左右中央 + 上に配置
左右中央 + 下に配置
上下中央 + 左に配置
上下中央 + 右に配置
まとめ

上下中央に配置

親要素のど真ん中に配置するスタイリングです。

これ、めちゃくちゃ頻繁に使います！！笑

HTML

<div class="Inner">
  <div class="Card">
    <div class="Card-Badge">タイトル</div>
  </div>
</div>

CSS

.Inner{
  padding-top: 40px;
}
.Card{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 320px;
  height: 200px;
  background: #5bc8ac;
}
.Card-Badge{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  
  width: 120px;
  background: #eee;
  font-weight: bold;
}

左右中央 + 上に配置

たまに、見出しのデザインで添付画像のような配置のものがあります。

HTML

<div class="Inner">
  <div class="Card">
    <div class="Card-Badge">タイトル</div>
  </div>
</div>

CSS

.Inner{
  padding-top: 40px;
}
.Card{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 320px;
  height: 200px;
  background: #5bc8ac;
}
.Card-Badge{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-50%);
  
  width: 120px;
  background: #eee;
  font-weight: bold;
}

左右中央 + 下に配置

HTML

<div class="Inner">
  <div class="Card">
    <div class="Card-Badge">タイトル</div>
  </div>
</div>

CSS

.Inner{
  padding-top: 40px;
}
.Card{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 320px;
  height: 200px;
  background: #5bc8ac;
}
.Card-Badge{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,50%);
  
  width: 120px;
  background: #eee;
  font-weight: bold;
}

上下中央 + 左に配置

HTML

<div class="Inner">
  <div class="Card">
    <div class="Card-Badge">タイトル</div>
  </div>
</div>

CSS

.Inner{
  padding-top: 40px;
}
.Card{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 320px;
  height: 200px;
  background: #5bc8ac;
}
.Card-Badge{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%,-50%);
  
  width: 120px;
  background: #eee;
  font-weight: bold;
}

上下中央 + 右に配置

HTML

<div class="Inner">
  <div class="Card">
    <div class="Card-Badge">タイトル</div>
  </div>
</div>

CSS

.Inner{
  padding-top: 40px;
}
.Card{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 320px;
  height: 200px;
  background: #5bc8ac;
}
.Card-Badge{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%,-50%);
  
  width: 120px;
  background: #eee;
  font-weight: bold;
}

まとめ

以上、絶対配置の要素をあらゆる場所に揃える方法をまとめてを紹介しました。

実際のWeb制作案件のコーディングに臨むにあたって、今回紹介したTipsを知っているのと知らないのでは天と地の差があります。

じゃんじゃん使って、コーディングを楽にしていきましょう〜！

コーディングスキルアップシリーズはこちら！