thr3a https://blog.hatena.ne.jp/thr3a/ 動かざることバグの如し https://blog.turai.work/ css CSSでは基本的にコンテンツを.containerとか.mainのdivで囲む。 大抵そのdiv要素はwidth768pxとかなんだけど、一部だけその要素を突き抜けてブラウザ幅いっぱいに表示したくなるときがある。 その時の回避法がいくつかあるんだけど、一番スマートで汎用的なのがあったのでメモ デモを見せろ こういうの See the Pen YaKLxW by thr3a (@thr3a) on CodePen. コード 親要素が.container、幅いっぱいに表示させたい要素を.full-widthとする。とHTMLは以下 <div class="container"> ほげほげほげほげほ… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.turai.work%2Fentry%2F20180308%2F1520485475" title="親要素を無視してブラウザ幅100%で表示するCSS - 動かざることバグの如し" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> Hatena Blog https://hatena.blog 2018-03-08 14:04:35 rich https://blog.turai.work/entry/20180308/1520485475 1.0 100%