並列要素の一方を固定幅に、もう一方を可変で画面幅いっぱいに広がるようにする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だけで一方の側の幅のみ可変にすることができます。是非ご活用ください。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
