Nov.27, 2015 - 06h46m46s
  • CALC des CALC
スマホ版UIを作ったのは
いいけれど何気にバグも多くて
日々、困ってました。

一番困ったのは
記事タイトルの箇所…

PC版…


スマホ版…

…このデザインの実現には
リストタグを使ってます。

もっと
シンプルな方法もありそうだけど
思いつきませんでした…

…HTMLソースはこんな感じ。
<html>
<div id='topic'>
    <ul>
    <li class='hr_color'></li><li class='hr_top'></li>
    <li class='head_txt'>ブログ始めました(再)</li>
    <li class='hr_btm'></li>
    </ul>
</div>
</html>
…で、
PC版の時のwidth設定は…
/* 親 */
div#topic{
    width: 560px;
}
    /* テンプレカラーで配色変更可能な箇所 */
    .hr_color{
        width: 120px;
    }
    /* 上側の灰色のライン */
    .hr_top{
        width: 440px;
    }
    /* 下側の灰色のライン */
    .hr_btm{
        width: 100%;
    }
…具体的に
何に困ったかと言うと、
スマホ版の時に.hr_colorのwidthは
そのまま固定にしたい…

…でも、

.hr_topは可変しなきゃ
いけないからCSSを
上書きすることになる。

…だけど、
    .hr_top{
        width: 100%;
    }
って書いても
.hr_color(120px)分が
この上なく邪魔になる訳です。

120pxを無視して
スマホのwidthと同じ長さになる。

そりゃそうだけど
もうちょい融通を利かせてくれても…

かと言ってpx指定じゃ
色んなスマホに対応しない。

何か良い手はないかと
ネットダイバーやってると…

…あった、これだ…

CSSで計算式を可能にするcalc()ファンクション

…魔法のアイテムじゃないですか^^

もれなく…
    .hr_top{
        width: 200px;
        width : -webkit-calc(100% - 120px);
        width : calc(100% - 120px);
    }
100%から邪魔な120pxを
引くことで解決ゾロリ。

一番上のwidth: 200pxは
未対応ブラウザの保険だけど
サポートは増えてきてるみたい。

ついでにスマホ版UIを
大幅ブラッシュアップ。

勢いってとてもとても大切。

ゆっくり寝れそうだ。
  • posted at:
  • Nov.27, 2015 - 06h46m46s
  • modified:
  • Feb.26, 2018 - 12h02m07s
  • category:
  • パソコンとプログラム
  • tags:
  • mLabo ソース
  • description:
  • calc()ファンクションの話
  • trackback:
  • https://mlabo1977.sakura.ne.jp/mlabo1977/tb.php/100