並列要素の一方を固定幅に、もう一方を可変で画面幅いっぱいに広がるようにするCSSサンプル

並列要素の一方を固定に、残りを可変で画面幅いっぱいに広がるようにするCSSサンプル

レスポンシブデザインでWebページを作成しているとき、テーブル以外でも上記のように並列要素の一方を固定幅にして、もう一方を画面幅いっぱいに広がる可変にしたいといった場合が出てきます。

各要素の横幅をパーセント指定（30%と70%等）することもできるのですが、この場合画面幅によって見出し部分が改行してしまったり、逆に余白ができすぎたりと、省スペースが求められるスマートフォン表示ではちょっと微妙・・・といったケースがどうしても発生してしまうのです。

実はこれ、CSSのcalcという機能を使うと実現することができます。今回はこのやり方について紹介したいと思います。
 

目次

HTML


<dl>
<dt>見出し部</dt>
<dd>コンテンツ部</dd>
</dl>

CSS


dl dt {
  display:inline-block;
  width: 150px;
}
dl dd {
  display:inline-block;
  width: calc( 100% - 150px ); /* 画面幅から150px引いた幅を指定している */
}

実に簡単ですね。tableやbootstrapを使わなくても、この方法ならCSSだけで一方の側の幅のみ可変にすることができます。是非ご活用ください。