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

tasan

レスポンシブデザインで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だけで一方の側の幅のみ可変にすることができます。是非ご活用ください。

Follow me!

投稿者プロフィール

tasan

最新の投稿

カテゴリー: コンテンツ、HTML／CSSサンプルコード集

ホームページをスマホ対応する４つの方法

【コピペで使える】ワードプレス投稿画面で投稿者権限ユーザーのみ一部メニューを非表示にする方法

PAGE TOP