CSS を使用してテキストをシフトする
Jay Singh
2023年2月20日
2022年5月23日
CSS は、HTML 要素の配置を支援します。任意の HTML 要素をページのどこにでも配置できます。
要素をページの自然な位置に対して配置するか、親要素に対して絶対的に配置するかを選択できます。これで、ページの周りのテキストを適切と思われるように移動できます。
position プロパティと上下の 2つの値を使用して、ページ上の任意の場所に HTML テキスト要素を移動できます。
- テキストを左に移動する必要がある場合は、
leftに負の値を使用します。 - テキストを右に移動する必要がある場合は、
leftに正の値を使用します。 - テキストを上に移動する必要がある場合は、
topに負の値を使用します。 - テキストを下に移動する必要がある場合は、
topに正の値を使用します。
CSS で相対位置を使用してテキストをシフトする
この例では、相対配置により、テキスト要素の位置が通常表示される場所に対してシフトします。値の増減に伴い、テキスト要素をシフトできます。
<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:20px; background-color:yellow;">
Hello! I am DelftStack.
</div>
</body>
</html>
CSS で絶対位置を使用してテキストをシフトする
position: absolute を使用すると、要素の座標は画面の左上隅を基準になります。
<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
Hello! I am DelftStack.
</div>
</body>
</html>
