コーディング

2カラムのスマホサイトで片側だけ可変の横幅にする方法

2016.09.15

2017.05.24

壁越しにのぞき込む男性

レスポンシブサイトではwidthをパーセントで指定することは珍しくありません。ですがどうしても片側だけ横幅をピクセルで指定して、残りの領域は自動で埋まるように使いたい、そう思ったことはありませんか?

今回はそんなときに使えるcssサンプルです。
レスポンシブサイトで左右に振ったサムネイル画像の横に注釈テキストを回りこませたい、そんなときに使えるサンプルとなっています。

See the Pen jrqwWY by hoshu_t (@hoshu_t) on CodePen.

固定するdivにはwidthをpxで指定し、可変するdivにはwidth100%を指定します。
可変するdivに、固定するdivのwidth分、-(マイナス)のmargin-leftを指定します。
同じく可変するdivに、固定するdivのwidth分のpadding-leftを指定します。
同じく可変するdivに、box-sizing:border-box;を指定します。

知らないと意外と思いつかない方法かもしれません。覚えておくと便利です。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。