Web制作(フリーランスWebデザイナー)

日にち2015/10/28
コーディング

CSSのbox-sizingが便利!

この記事は書いてから 約 2年 経過しています。 1年以上経過しているので情報が古い可能性があります。

CSSのbox-sizingが便利!

記者が好きなbox-sizing:border-box;を紹介したいと思います。paddingやborderでwidthより幅が広がる時にbox-sizing:border-box;を使うとwidthの幅内でpaddingやborderが収まります。これにより、だいぶ楽なコーディングになったと記者自身は思っています。

HTMLとCSSの使い方

  • CSS
ul{
    width: 100%;
    overflow: hidden;
}

ul li{
    width: 20%;
    padding: 1%;
    overflow: hidden;

    box-sizing:border-box;
    -webkit-box-sizing:border-box; /*Google Chrome、Safari*/
    -moz-box-sizing:border-box; /*Firefox*/
    -ms-box-sizing:border-box; /*IE*/
    -o-box-sizing:border-box; /*Opera*/
}
  • HTML
<ul>
    <li>テスト</li>
    <li>テスト</li>
    <li>テスト</li>
    <li>テスト</li>
    <li>テスト</li>
</ul>

簡単です。またいつか、記者が好きなCSSを紹介できたらと思っています。

facebook twitter

© 2013-2017 visual hallucination.