CSS を使用してテキストを上に移動する
Web ページを作成しているときに、テキストを下部またはフッターに配置することがあるため、テキストの下にスペースを空けてテキストを上に移動する必要がある場合があります。 ウェブページの下部からテキストを上に移動する方法を学びます。
position および bottom CSS プロパティを使用してテキストを上に移動する
以下の例では、bottom-text クラス名を使用して識別できる <div> 要素を作成しました。 <div> 要素内に、テキストを含む <h3> 要素を追加し、それに text クラスを割り当てました。
CSS コードでは、position: absolute を <div> 要素に指定して、ドキュメント自体である親要素に対して相対的に移動します。 また、margin-top: 90vh を指定して、<div> 要素をクラス名 bottom-text で Web ページの下部に配置します。
text クラスに CSS を追加して、テキストを現在の位置から上に移動します。 ここでは、position プロパティの値として relative を選択しました。これにより、テキストをその位置に対して相対的に移動できます。
テキストを上に移動するには、bottom プロパティを使用しました。この値を割り当てたので、テキストを 60 ピクセル上に移動します。 ユーザーは、bottom プロパティの値を変更して、テキストをさまざまな量だけ上に移動することもできます。
bottom プロパティに負の値を割り当てると、テキストが下に移動します。
HTML コード:
<div class="bottom-text">
<h3 class="text">This is the text at bottom.</h3>
</div>
CSS コード:
.bottom-text{
position: absolute;
margin-top: 90vh;
}
.text{
position: relative;
bottom: 60px;
}
上記の出力イメージでは、左のイメージは元の位置にあるテキストを示し、右のイメージはテキストを現在の位置から上に移動した後のテキストを示しています。
margin-top CSS プロパティを使用してテキストを上に移動する
以下の例では、margin-top CSS プロパティを使用して、テキストを現在の位置から上に移動しています。
上記の例で説明したように、この例には、bottom-text クラスを持つ <div> 要素と、text クラス名を持つ <h3> 要素も含まれています。 bottom-text クラスにいくつかの CSS を追加して、Web ページの下部にテキストを設定しました。
テキストを上に移動するには、margin-top プロパティを text クラスに適用し、それに負の値を割り当てます。 margin-top プロパティに正の値を設定すると、値の量だけテキストが下に移動します。
HTML コード:
<div class="bottom-text">
<h3 class="text">This text will be shown at the bottom.</h3>
</div>
CSS コード:
.bottom-text{
position: absolute;
margin-top: 90vh;
}
.text{
margin-top:-100px;
}
負の margin-top 値は、テキストまたは HTML 要素を現在の位置から上に移動する最良の方法です。
