はじめに
レスポンシブデザインでは、画面サイズに応じて要素の幅や位置を動的に調整することが求められます。その中で、calc()やclamp()を活用することで柔軟な指定が可能です！この記事では、calc()やclamp()を使った例を紹介します。
やりたいこと
以下のような構造で、画面幅が縮小しても「テキストエリア」が右端に固定され、見栄えを保つようにします。
記述方法
HTML
<div class="inner">
<div class="content">
<figure class="image">
<img src="/images/01.jpg">
</figure>
<p class="text">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</div>
CSS
.inner {
width: 100%;
max-width: 1200px; /* 親要素の最大幅を指定 */
margin-right: auto;
margin-left: auto;
}
.content {
position: relative;
}
figure {
margin: 0;
}
img {
max-width: 100%; /* 画像のレスポンシブ対応 */
}
.text {
position: absolute;
bottom: 0px;
right: 0;
width: calc((565 / 1200)* 100%); /* 親要素に対する比率計算 */
max-width: 565px; /* 最大幅を指定 */
padding-right: 20px;
padding-bottom: 20px;
font-size: 14px;
font-size: clamp(0.75rem, 0.023rem + 1.14vw, 0.875rem);
}ポイント
1.幅の指定
width: calc((565 / 1200)* 100%); /* 親要素に対する比率計算 */
max-width: 565px; /* 最大幅を指定 */- 親要素の幅を基準に、
565 / 1200の割合（約47%）で幅を動的に計算しています。 - 親要素の幅が変化しても、この比率に応じてテキストの幅が自動調整されます。
- 幅が広い画面では、幅が広がり過ぎてしますので、最大幅を指定します。
2.clamp()を使用したフォントサイズ調整
font-size: clamp(0.75rem, 0.023rem + 1.14vw, 0.875rem);- 画面幅に応じてフォントサイズを調整します
0.75rem（最小値）、0.875rem（最大値）、1.14vw（推奨値）の範囲でフォントサイズを動的に変更します- 計算は大変なので、ジェネレーターを使用すると便利です。
3.スマホ対応
スマホでは、画面幅が狭くなり可読性が失われるので、メディアクエリで、スマホ用に最適化された画像に切り替え、位置や余白を再指定します。
@media (max-width: 768px) {
.text {
width: 100%;
max-width: none;
padding-right: 15px;
padding-bottom: 15px;
}
}まとめ
この方法で、画面幅が縮小しても指定の位置と幅を維持できるようになりました！
レスポンシブデザインでは、calc()やclamp()などのプロパティが役立ちます。
