CSSでcalcがあるのを知ってましたが、使いどころがわからずに、放置していました。
例えば、こちらのサンプルのように、レスポンシブなどで、画像の幅は固定し、テキスト部分は伸縮する時に使えますね。
HTML
<div class="wrap"> <div class="pht"><img src="https://placehold.jp/240x200.png"></div> <div class="text">テキストがはいります。</div> </div>
CSS
calcで幅100%から画像とマージン分を引いているだです。
.wrap {
width: 100%;
display: flex;
}
.pht {
width: 240px;
margin-right: 20px;
}
.text {
width: calc(100% - 260px);
}
こんなに便利なら、はやく試しておけばよかったです(-_-)
執筆者：KIYOTA
関連記事
-
-
WordPressに自動でBootstrapのレスポンシブのテーブルのクラスを適用する
SPONSORED LINK WordPressにBootstrapのレスポンシブのtableクラスである、table-responsiveを適用する方法です。 jQueryを使うことで、ソースを扱わ …
-
-
いやされるかわいさの「Simple animating emotions.」
SPONSORED LINK See the Pen Simple animating emotions. by Misha Heesakkers (@MishaHahaha) on CodePen. …
-
-
【CSS/JS】もっと目立たせて欲しいと言われた場合のTipsまとめ
SPONSORED LINK キャンペーンサイトなど、動きをつけて、もっと目立たせて欲しいなどの要望を受けることは多いのではないでしょうか。言われて探すのは結構手間がかかったりします。見栄えする動きを …
-
-
iPhoneのoverflowをスムーズにスクロールさせるCSS
SPONSORED LINK iPhoneでoverflow: scroll;の時に、 -webkit-overflow-scrolling: touch; を追加すれば、滑らかに慣性スクロールできま …
-
-
アイデアのヒントになる。Swiss Styleを動かしているアニメーション。
SPONSORED LINK Swiss in CSS: animating the International Typographic Styleで、Swiss Styleを動かしているアニメーショ …
