タイトルがなんともわかりづらいけど、キャプチャのような表現をする話。 記事の引用とかコードの表現でこういう見た目にしたいことがある。 やり方は色々あるけど、これをCSSのcalc()でやってみる。 記事全体を包括している親要素の幅が決まっていて、一部のブロック、セクションだけ左右ぶち抜きたい。 マークアップとCSSはこんな感じ。 <article class="entry"><!-- width: 44em; --> <h1 class="entry-title">セロ弾きのゴーシュ</h1> <div class="entry-body"> <p>...</p> <div class="dialogue"><!-- ぶち抜きたいところ --> <p>...</p> </div> <p>...</p> </div> </article>