☰

CSS で算術演算を実行するにはどうすればいいですか? 質問する

tag-icon • tag-icon css
CSS で算術演算を実行するにはどうすればいいですか? 質問する

CSS で算術演算を実現する方法を知りたいです。

例えば: 幅がそれぞれ 50% の 2 つの div を並べて配置し、これらの div に境界線を付けたいと思います。ルールは次のように記述します。

#container {
    width: 50% - 1px; // I know this does not work.
}

なぜブラウザは CSS でのこのような算術演算をサポートしないのでしょうか?

そして、どうすればこれを機能させることができるのでしょうか?

ベストアンサー1

すでに存在する; CSS3calc()表記法を使用できます:

div {
    background: olive;
    height: 200px;
    width: 200px;
}

div > div {
    background: azure;
    height: calc(100% - 10px);
    width: 100px;
}

http://jsfiddle.net/NejMF/

注: これは、最新のブラウザ(IE9+) であり、最近になってモバイル ブラウザーに採用されました。

おすすめ記事