LoginSignup
0
0

More than 3 years have passed since last update.

メディアクエリ_HTML&CSS_20200118

Posted at

https://bitsofco.de/how-calc-works/
https://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.htmla
【calc()】
CSS関数
加算、減算、乗算、除算が可能

width: calc(100% - 50px);
幅いっぱいから50px引いた幅を指定

width: 33.33%;

width: calc(100% / 3);

HTML


CSS
media (max-width: 670px) {
.u-display__pc {
display: none;
}
}
画面幅が671px以上の場合には改行を行う。
画面幅が670px以下の場合には改行を行わない。
これにより、スマホなどで表示を行う際に綺麗に枠に合わせた文字出力が行われる。

CSS
position: fixed;
メニューの画面上部固定などに使える

transform: rotate();
要素を回転表示する(使い方わからない)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0