超現場ブログ

Technique,Design and Events

背景画の高さを取得するcss、calc()の怪 [web塾関東]

Twitter Facebook Google+ はてブ

背景画の高さを取得するcss、calc()の怪 [web塾関東]

ある広告会社の企業研修にて、受講生の方より質問がありました。

上記のようなレイアウトでサイトを構成されています。
左がPC、右がスマホのUIです。赤い部分はバナーが配置されていますが
SEOを考えて、全てaタグの中に背景画像でcssに指定されています。

PCの場合は、aタグのサイズと同じ画像サイズを指定すればいいですが、
スマホUIの場合は、リキッドデザインなので、背景に指定する画像の縦のサイズを
横幅を100%として%で取得する必要があります。

padding-bottomプロパティにcalc()という値を使用する事によって
横幅に対して縦サイズを取得する事が可能なのですが、

padding-bottom: calc(100%*200/800);

このように記述するとW3Cでエラーになるとの事。
確認したら確かにエラーがでました。

padding-bottom: 52.6%;

これだとエラーがでないそうです。

しかし、W3Cの 8.1. 数式: calc()の項目を見ても間違ってそうに思えないばかりか、

このページで例題に挙げてある、

section {
float: left;
margin: 1em; border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}

をcssヴァリデーションサービズに突っ込んで見てもエラーになります。
大変不可解ですね。どなたかこの怪を解いてくださるマークアップエンジニアの方、いらっしゃいませんか?

上記のリンク先は日本語訳ですが、8.1. Mathematical Expressions: calc()を翻訳したものですが同じ内容です。

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.