CODE-LIFE│コーディング・プログラミングのメモブログ

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ

【CSSで3等分】 要素をきっちり三分割するスタイルシートの書き方

今日のお題は「きっちり」三等分できる書き方。

どんな書き方を想像しましたか?

この書き方を知るまで僕は

のような書き方をしていました。  

 

実際にこの書き方をしているウェブサイトもよく見かけます。 が、性格の問題もあるかもしれませんが割り切れない 余り があるのがちょっと許せない。

 

width: 1/3;

 

みたいな書き方ができたらいいのになー って思ってました。 で、探してみたところ発見!

1/3サイズを指定する方法があったんです! 感動(´ェ`)

 

 

CSSで計算式を可能にするcalc

対応ブラウザ:IE9以降、Safari6以降、Google Chrome19以降、Firefox4以降

 

使い方:

 

これだけ! 簡単ですね。全体の幅100%の3分の1サイズという、まさに僕が探していた等分指定!!!

 

上記にさらにベンダープレフィックスを付け加えて・・・

これで完成形です!!

ウェブページ製作で実際に使う場面としては、ランキングのトップ3を横並びにさせたい時なんかオススメです。

  不明点があればコメントください!