ウェブサイトを制作していて、他のコンテンツに被らせたり、わざと離してみたりしたいこと、ありませんか?

今回は、特定のコンテンツを自由に配置する方法を紹介します。

基本のコードは、以下になります。

<div class="box box-1"></div>
<div class="box box-2"></div>
body {
  padding: 50px;
}

.box {
  width: 200px;
  height: 200px;
}

.box-1 {
  background-color: blue;
}

.box-2 {
  background-color: brown;
}

image2

四角形が縦に並んでいます。

コンテンツを横方向に移動する

コンテンツを横方向に移動するには、transform: translateX();を使用します。

カッコの中に、どのくらい移動するのか値を指定します。

例えば、青い四角形を横に 50px 移動したい場合、transform: translateX(50px);と書きます。

.box-1 {
  background-color: blue;
  transform: translateX(50px);
}

ブラウザで確認すると、

image3

青い四角形が右に移動しました。

左に移動するには、値をマイナスにします。

.box-1 {
  background-color: blue;
  transform: translateX(-30px);
}

image4

値は px だけではなく、%でも指定できます。

.box-1 {
  background-color: blue;
  transform: translateX(100%);
}

image5

青い四角形がコンテンツ 1 個分、横に移動しました。

コンテンツを縦方向に移動する

コンテンツを縦方向に移動するには、transformtranslateY();を設定します。

例えば、青い四角形を縦に 50px 移動したい場合、transform: translateY(50px);と書きます。

.box-1 {
  background-color: blue;
  transform: translateY(50px);
}

ブラウザで確認すると、

image6

青い四角形が下に移動しました。

上に移動するには、値をマイナスにします。

.box-1 {
  background-color: blue;
  transform: translateY(-30px);
}

image7

コンテンツを縦と横方向に移動する

コンテンツを移動するには、transformtranslate(◯, □);を設定します。

カッコの中の ◯ に横方向、□ に縦方向を指定します。

例えば、青い四角形を横方向に 50px、縦方向に 100px 移動させたい場合、transform: translate(50px, 100px);と書きます。

.box-1 {
  background-color: blue;
  transform: translate(50px, 100px);
}

ブラウザで確認すると、

image8

青い四角形が自由に移動できました。

たった 1 行でコンテンツを自由に配置することができるので、ぜひ試してみてください。

ブログ一覧