コーディングの際、ウィンドウサイズが変わっても画像を特定の位置に固定したい場合があります。特に、画像やバナーなど、常に同じ場所に表示させたい要素に対しては、CSSのpositionプロパティを使うことで柔軟に対応できます。この記事では、positionプロパティを活用して、画像をウィンドウサイズに合わせて固定する方法を解説します。
position: fixed で位置を固定
まず、画像を固定するために、CSSのpositionプロパティを使用します。これにはいくつかのオプションがありますが、画像の位置を画面に固定するには、fixedという値を使います。fixedは、ページをスクロールしても指定された位置に画像を固定します。
【HTML】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像の位置固定</title>
<style>
.fixed-image {
position: fixed; /* 画面上に固定する */
top: 10px; /* 上からの位置を指定 */
right: 10px; /* 右からの位置を指定 */
width: 150px; /* 画像の幅を指定 */
}
</style>
</head>
<body>
<h1>ウィンドウサイズを変えても画像を固定する</h1>
<img src="logo.png" alt="ロゴ画像" class="fixed-image">
</body>
</html>
画像がウィンドウの右上に固定されるように設定しています。position: fixed;を使うことで、ページをスクロールしてもこの画像は常に表示され続けます。また、topやrightのプロパティで、画像がウィンドウのどの位置に表示されるかを指定しています。
【CSS】
@media (max-width: 600px) {
.fixed-image {
width: 100px; /* スマートフォンでは画像サイズを縮小 */
top: 5px; /* 上のマージンも調整 */
right: 5px;
}
}position: fixedのポイント
- 画像は常にウィンドウの指定した位置に固定される。
- ページがスクロールされても位置が変わらない。
- ウィンドウサイズが変わっても、指定した位置に固定される。
calc()関数を使った画像の位置固定
画像の配置には、CSSのpositionプロパティとcalc()関数を使います。calc()関数を使うことで、相対値（%）と絶対値（px）を組み合わせて、画面サイズに依存しない柔軟な配置が可能です。以下のコードを参考にしてください。
【CSS】
.fixed-image {
position: absolute;
right: calc(50% + 115px); /* ウィンドウの中央から115px右に配置 */
top: 20px; /* 上から20pxの位置に固定 */
}コードの解説
position: absolute;
画像を絶対位置で配置するためにabsoluteを指定します。right: calc(50% + 115px);
画像の位置をウィンドウの幅の50%（中央）からさらに115px右に移動させるためにcalc()を使っています。この方法で、画面サイズが変わっても画像が適切な位置に固定されます。top: 20px;
画像を上から20pxの位置に固定します。
まとめ
画像の位置を固定するためには、CSSのpositionプロパティを使うのが基本です。この方法を使えば、ユーザーがスクロールしたりウィンドウサイズを変更したりしても、画像が常に指定した場所に表示され続けます。また、レスポンシブデザインを考慮して、メディアクエリを使って画像サイズや位置を調整することも重要です。
webサイトをより使いやすく、美しくデザインするために、ぜひこのテクニックを活用してみてください。
