まず以下のhtmlがあるとする
<!DOCTYPE html>
<html>
<head>
<title>相対位置・絶対位置</title>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
</head>
<style>
.container {
width: 400px; /* テキストボックスの幅 */
height: 40px; /* テキストボックスの高さ */
border: 2px solid red;
}
</style>
<body>
<div class="container">
</div>
<script>
$(document).ready(function() {
});
</script>
</body>
</html>このような矩形が出力される。
この矩形の右端に逆三角形の文字(▼)を表示したい。
cssをこのように設定する。
.container {
position: relative;
width: 400px; /* テキストボックスの幅 */
height: 40px; /* テキストボックスの高さ */
border: 2px solid red;
}
.container::before {
content: "▼"; /* 逆三角のマーク */
position: absolute;
top: 50%;
right: 10px; /* テキストボックスの右端からの距離 */
transform: translateY(-50%);
pointer-events: none;
color: #000;
font-size: 14px;
}結果はこうなる
簡単に解説すると、
.container {
position: relative;
width: 400px; /* テキストボックスの幅 */
height: 40px; /* テキストボックスの高さ */
border: 2px solid red;
}position: relative;: 要素の位置を相対的に指定する。この場合、テキストボックス内の子要素に対して位置を調整するために使用する。
.container::after {
content: "▼"; /* 逆三角のマーク */
position: absolute;
top: 50%;
right: 10px; /* テキストボックスの右端からの距離 */
transform: translateY(-50%);
pointer-events: none;
color: #000;
font-size: 14px;
}.container::before:::before疑似要素。これは.container要素の後に挿入される仮想の要素。content: "▼";: 疑似要素に表示する内容を指定する。ここでは逆三角のマーク “▼” を表示。position: absolute;: 疑似要素の位置を絶対位置に設定する。親要素である.containerに対して相対的な位置調整を行う。top: 50%;: 疑似要素を垂直方向に中央揃えにする。right: 10px;: テキストボックスの右端からの距離を10ピクセルに設定。transform: translateY(-50%);: 垂直方向に中央揃えにした後、疑似要素を上に50%移動させて垂直方向に正確に中央揃えにする。pointer-events: none;: 疑似要素はマウスイベントをキャッチしないようにする。これにより、テキストボックスがクリック可能なままであることが保たれる。color: #000;: 疑似要素の文字色を黒に設定する。font-size: 14px;: 疑似要素のフォントサイズを14ピクセルに設定する。
position: relative と position: absolute; はセットで使うことが多い。
只今、イメージセットを取得中です。
Absolute 5
￥250 (2025年10月22日 19:36 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
Absolute Zero -絶対零度-
(2025年10月22日 19:36 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
【国内正規品】ABSOLUTE・3D Perfect Enclosure 2倍強化ガラスカメラプロテクター・iPhone 17シリーズ対応 (iPhone 17 Pro)
￥1,870 (2025年10月22日 19:36 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)iPhone 17シリーズ用に設計されたABSOLUTE・3D Perfect Enclosure 2倍強化ガラスカメラプロテクターは、透明度やデザインを損なうことなくレンズを保護します。 【硬度9H:日常を超える強さ】 9H 硬度を備えたこのカメラプロテクターは、日常的な擦り傷を防ぎながら、写真や動画をクリアな画質で守ります。 【究極の表面コーティング】 美しさを保ち、清潔に。 先進コーティングにより指紋や汚れを防止。レンズはいつも鮮明で、最高の写真を残せます。 【焼入れ工程を2 倍行うことで... もっと読む
