クリエイティブ業界の注目情報や求人情報などを発信する、クリエイターのための総合情報サイトです。
column_general_header

【CSS】レスポンシブでコーディングするときにdivタグを横3つ並べるのに簡単な方法とは

レスポンシブデザインでコーディングする時って、横3列とか4列とかでボックスを並べると思いますが、正直計算して並べるのって、面倒だと思いませんか?

最近のブラウザで使えるCSS3では何と計算ができます!

普通レスポンシブで横3列に並べる時って、

	.col3{
		width:33.3333%;
     }

こんな感じですよね。
ここにさらにボックスの両端を10pxずつmarginをあけたい時ってどうしますか?
【width:33.3333%-20px】とかできたら最高ですよね!

そこで使えるのが、【calc】です。

		.col3{
		width:calc(100%/3-20px);
      }
	

こんな便利な指定ができます!かなり便利です。

ただ、未だに使っている人が多いらしい【AndroidOS 4.2】などは対応していません。もちろんIE8も。まあいつものことですが。
Webkitの指定などもしておいた方がいいですね。
Webkitの指定を入れると、

		.col3{
		width:-webkit-calc(100%/3-20px);
		width:calc(100%/3-20px);
		}
	

こんな感じです。

author

narumasa(なるまさ)

http://narumasa.com


フリーランスのWebクリエイターとして2001年から活動。
レコーディング・エンジニアとして職歴をスタートし、Webの勉強をすべくスクールに通い、デザイン会社のWebデザイナーへ。2001年に退職後、フリーランスのWebクリエイターとして活動しつつ、商品企画会社に入社し、企画プロデューサー・取締役を経て、再びフリーランスに。
現在はフリーランスのWebクリエイターとして数々の大企業のホームページから街の商店のホームページまで、1人で企画からディレクション、デザイン、コーディング、プログラミングまで全てを担当している。

関連記事