レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法

世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。

[rryu]

収まらないというか、無段階で大きさの変わる画像に文字を乗せるなら文字サイズも無段階で変わるようにすればいいという感じ。

[field_combat]

なるほど「clamp(最小値, 推奨値, 最大値)」

[kibitaki]

どうしても収まらないというのは縦横比云々に限った話ではないので釣りタイ。

[heguro]

そういえばこんなのあったな…IE終了で使えるようになったのね 便利そう https://developer.mozilla.org/ja/docs/Web/CSS/clamp

[kagoyax]

テキストまで画像にするのが楽って奴は今後は保守のことまで考えて開発してくれ。周りが迷惑するから

[itochan]

10px って何ptだっけ？（ググった、10px=7.5ptらしいwin https://www.nda.co.jp/memo/pxpt.html ）　＞人間の目からしても10pxより小さい文字は読めないという理由からです。

[wirknichtvoraus]

こういうバナーっぽいやつだけでなく、本文含むテキスト全体に使えます／フォントを画像にしたほうが簡単？やりたいことが全然ちがうし…

[shuheiok]

clamp

[blueboy]

　最初からフォントを画像で出しておいて、全部を１つの画像にする方が楽。　ていうか、レスポンシブデザインで横長配置にするな。「上下配置　←→　左右並び」を基本とするべき。今回は狭めたら文字を上に上げよ。

[hdampty7]

clamp

[mayumayu_nimolove]

へー、全く同じロジックをsassでやってたけど標準プロパティで出来るんだ

[toaruR]

clamp

[kno]

clampタグ

[thirty206]

スポンジボブ対応

[aTn]

こちらも合わせて読んでおきましょう。https://coliss.com/articles/build-websites/operation/css/css-clamp-calculator.html