cssでサイズ変更可能なボックス

2021/07/22

はじめに

自分の作った ReactApp を，<iframe>で埋め込むという試みをした．

そこで，埋め込みアプリが，記事の幅に収まっているとアプリを触りづらいという問題が発生した．

そこで，マウスドラッグで枠を簡単にリサイズできるようにした．その時のメモを残す．

リサイズ自体は CSS だけで設定できるとのこと．

resizable_example

.classname {
  border: 2px solid;
  resize: both;
  overflow: auto;
}

可変サイズ<div>の上に<iframe>を乗せるという設計にしたが，右下のリサイズ用の２本線が隠れてしまってうまくリサイズできないという問題が発生した．

そこで，上に乗せる<iframe>の右下を丸めることで解消した．

sample_of_rouded_iframe

<iframe style={{borderBottomRightRadius: '30px'}} src={src}/>

右下が丸いのは見た目は良くないかもしれないが，埋め込みアプリを可変に出来たので満足．