このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • かしこいかわいい新PC「エリーチカ」がやってきた(時々ポンコツ) (11/28)
  • Windows:目的毎,ファイルの種類(拡張子)毎に既定アプリを変更 (11/25)
  • Windows:ヘッドホン(イヤホン)から音が出ないときの対処法 (11/23)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

    CSS: widthなどの数値を自動計算してくれる神機能「calc」

    このエントリーをはてなブックマークに追加
    イメージ


    こんにちは、さち です。

    CSS には「margin」「padding」「width」「height」など
    数値を指定するプロパティがたくさんあります。

    ただ、サイトの構造が複雑になると
    固定の数値を指定するだけでは足りない場面もあり
    数値を自動算出して欲しいと思うことが…。

    そんなときに超便利なのが「calc」です。
    「calc」は CSS(CSS3) の標準機能なので前準備は不要。
    今すぐ使えます。




    「calc」で式を書けば数値を計算してくれる

    「calc」は計算式を書くとそれを自動計算してくれる
    CSS(CSS3) に標準で備わっている機能です。

    例えば、「width」の値をこう書けば自動的に「33.3333…%」と計算してくれます。
    割り切れない数を指定するのが簡単になりますね。
    .OneThird {
    width: calc(100% / 3); /* =33.3333…% */
    float: left;
    }

    <div class="wrap">
    <div class="OneThird">left</div>
    <div class="OneThird">center</div>
    <div class="OneThird">right</div>
    </div>

    サンプル


    「こんなの display: table-cell; 使えばいいじゃん」という
    ごもっともな意見もあるかと思いますが
    %指定だと面倒な隙間なし3等分も一発!という見本なのでお許しを…。

    計算記号(演算子)は下記のとおり。
    基本的にエクセルなどと同じなので簡単です。
    表

    下記のような決まりがありますが別に覚えなくていいです。
    意識しなくても自然とそういう式を書くはずですからね。
    • 「かけ算」は、引数の少なくとも1つは数量(単位なし数値)にする
    • 「わり算」は、右側は数量(単位なし数値)にする

    計算する順番は通常の四則計算と同じ(かけ算、わり算が先)です。
    「カッコ」を使うことで計算の順番を指定ができます。
    この辺もエクセルなどと同じですよね。
    .class1 {
    width: calc((100px - 20px) / 2); /* =40px */
    }

    .class2 {
    width: calc(100px - 20px / 2); /* =90px */
    }




    単位(%, px, em など)ゴチャ混ぜOK

    計算に使う単位はゴチャ混ぜでOK。
    「calc」最強伝説といっても過言ではありません。
    これで勝つる!

    例えば、幅を 66.6666…% から 30px だけ小さくすることも非常に簡単です。
    .wrap div {
    float: left;
    }

    .left {
    width: calc(100% * 2 / 3 - 30px); /* =66.6666…%より30px小さい */
    margin-right: 30px;
    }

    .right {
    width: calc(100% / 3); /* =33.3333…% */
    }

    <div class="wrap"><br>  <div class="left">left</div>
    <div class="right">right</div>
    </div>

    サンプル


    適切な width を「calc」が計算してくれるので
    .warp の width を動かしまくっても
    30px の margin-right を維持したままレイアウトは崩れません。

    昔なら HTML, CSS を工夫したり、JavaScript でやっていたことが
    「calc」を使えば CSS だけで簡単にできます。

    横幅を固定しないサイトを作るときに無茶苦茶便利ですよね。
    革命的!便利すぎる!もっと早くに知りたかった…。
    定期的にちゃんと CSS を勉強しないといけませんね。

    あとは、padding, border を使いつつ width を調整して
    要素全体の幅を親要素の 50% にしたいなんてときとかにも便利かも。
    (これは box-sizing: border-box; でも解決するけれど)




    「+」「-」の前後には必ず半角スペースを!

    「+」「-」の計算記号(演算子)の前後には必ず半角スペースを入れましょう。
    そうしないと「calc」が動作しません。
    /* 動かない */
    .class {
    width: calc(100% -5px);
    }

    /* 動く */
    .class {
    width: calc(100% - 5px);
    }

    例えば、「-5px」は
    ひき算ではなく負の値「-5」と見なされ「calc」がはたらきません。

    「*」「/」の計算記号(演算子)は
    前後に半角スペースがなくても問題ないですが
    「+」「-」と同じく半角スペースを付けておいた方が無難です。




    対応ブラウザ

    表

    ベンダープレフィックスが必要なバージョンも一部ありますが
    結構対応してますよね。

    未対応ブラウザ用に、calc を使わない値も書いておいた方が安心かもしれません。
    .class {
    width: 99%; /* 未対応ブラウザ用 */
    width: -webkit-calc(100% - 5px); /* iOS 6 用 */
    width: calc(100% - 5px);
    }




    例では、「width」ばかりで「calc」を使いましたが
    数値を扱うプロパティであれば何にでも利用できます。
    ものすごく便利なのでぜひ使いましょう。




    【参考サイト】

       → calc - CSS | MDN
       → calc() - Can I use...









    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2016 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ