The Fab Four Technique - とめるける

基礎

メディアクエリなしでレスポンシブなレイアウトを組むテクニックの一つ。

コンテナの横幅がある一定のブレイクポイントを下回った場合は、<div> コンテナひとつ丸ごと非表示にする。

<!-- ブレイクポイントを 500px に設定 -->
<div style="width: 100%; display: inline-flex; flex-direction: row;">
  <div
    style="background-color:aqua; min-width: 0; width: calc((100% - 500px) * 1000); max-width: 80px; overflow: hidden;">
    &#8203;
  </div>
  <div
    style="background-color: red; min-width: calc(100% - 80px); width: calc((500px + 0.5px - 100%) * 1000); max-width: 100%;">
    <div>
      main
    </div>
  </div>
</div>

反対バージョン。

<div style="width: 100%; display: inline-flex; flex-direction: row-reverse;">
  <div
    style="background-color:aqua; min-width: 0; width: calc((100% - 500px) * 1000); max-width: 80px; overflow: hidden;">
    &#8203;
  </div>
  <div
    style="background-color: red; min-width: calc(100% - 80px); width: calc((500px + 0.5px - 100%) * 1000); max-width: 100%;">
    <div>
      main
    </div>
  </div>
</div>

なぜこんな回りくどいことをしようとしたかというと、やはり吹き出しテンプレートのためである。 style 属性にはメディアクエリが使えない、それでもレスポンシブ対応したい、ということで、なんとかできないかと苦心の末の結論である。

応用

サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。

<!-- たーせるくん（ボトムマージン調整版）-->
<div style="width:100%;display:inline-flex;flex-direction:row;"><div style="margin:0;padding:0;border:none;min-width:0;width:calc((100% - 540px)*1000);max-width:120px;overflow:hidden;">&#8203;</div><div style="min-width:calc(100% - 120px);width:calc((540px + 0.5px - 100%)*1000);max-width:100%;margin:0;margin-bottom:3px;padding:0;border:none;display:grid;grid-template-columns:1fr minmax(1rem,max-content) 20px max-content;"><div style="grid-column:1/2;"></div><div style="grid-column:3/4;padding-top:48px;"><div style="width:0;height:0;border-style:solid;border-width:0px 0 8px 20px;border-color:transparent transparent transparent #d7d6d6;position:relative;z-index:1"></div></div><div style="grid-column:4/5;width:80px;height:80px;margin:0;margin-bottom:-1rem;padding:0;background-image:url('https://cdn-ak.f.st-hatena.com/images/fotolife/t/tercel_s/20200113/20200113211534.png');background-repeat:no-repeat;background-size:contain;"></div><div style="grid-row:1/2;grid-column:2/3;display:grid;grid-template-rows:40px max-content;"><div></div><div style="margin:0;margin-left:3px;padding:0;padding-right:0.3rem;padding-left:0.3rem;border-radius:0.3rem;color:#412318;background:#d7d6d6;box-shadow:0 1px 3px #412318;font-size:0.9rem;"><!-- ここに吹き出しの内容を HTML で書いてください --></div></div></div></div>

<!-- たーせるくん（ボトムマージン非調整版）-->
<div style="width:100%;display:inline-flex;flex-direction:row;"><div style="margin:0;padding:0;border:none;min-width:0;width:calc((100% - 540px)*1000);max-width:120px;overflow:hidden;">&#8203;</div><div style="min-width:calc(100% - 120px);width:calc((540px + 0.5px - 100%)*1000);max-width:100%;margin:0;margin-bottom:3px;padding:0;border:none;display:grid;grid-template-columns:1fr minmax(1rem,max-content) 20px max-content;"><div style="grid-column:1/2;"></div><div style="grid-column:3/4;padding-top:48px;"><div style="width:0;height:0;border-style:solid;border-width:0px 0 8px 20px;border-color:transparent transparent transparent #d7d6d6;position:relative;z-index:1"></div></div><div style="grid-column:4/5;width:80px;height:80px;margin:0;padding:0;background-image:url('https://cdn-ak.f.st-hatena.com/images/fotolife/t/tercel_s/20200113/20200113211534.png');background-repeat:no-repeat;background-size:contain;"></div><div style="grid-row:1/2;grid-column:2/3;display:grid;grid-template-rows:40px max-content;"><div></div><div style="margin:0;margin-left:3px;padding:0;padding-right:0.3rem;padding-left:0.3rem;border-radius:0.3rem;color:#412318;background:#d7d6d6;box-shadow:0 1px 3px #412318;font-size:0.9rem;"><!-- ここに吹き出しの内容を HTML で書いてください --></div></div></div></div>

<!-- ネコフード -->
<div style="width:100%;display:inline-flex;flex-direction:row-reverse;"><div style="margin:0;padding:0;border:none;min-width:0;width:calc((100% -   540px)*1000);max-width:120px;overflow:hidden;">&#8203;</div><div style="min-width:calc(100% - 120px);width:calc((540px +  0.5px - 100%)*1000);max-width:100%;margin:0;margin-bottom:3px;padding:0;border:none;display:grid;grid-template-columns:max-content 20px minmax(1rem,max-content);"><div style="width:80px;height:80px;margin:0;padding:0;background-image:url('https://cdn-ak.f.st-hatena.com/images/fotolife/t/tercel_s/20200112/20200112212801.png');background-repeat:no-repeat;background-size:contain;"></div><div style="padding-top:48px;"><div style="width:0;height:0;border-style:solid;border-width:0px 20px 8px 0;border-color:transparent #c6bab6 transparent transparent;position:relative;z-index:1"></div></div><div style="display:grid;grid-template-rows:40px max-content;"><div></div><div style="margin:0;margin-right:3px;padding:0;padding-left:0.3rem;padding-right:0.3rem;border-radius:0.3rem;color:#412318;background:#c6bab6;box-shadow:0 1px 3px #412318;font-size:0.9rem"><!-- ここに吹き出しの内容を HTML で書いてください --></div></div></div></div>