【実機確認用】主要なCSS関数のサンプル一覧
主要なCSS関数のサンプルをひたすら並べていきます｡
リクエストなどあればコメントで教えてください！
参考ページ
CSS 関数記法 - CSS: カスケーディングスタイルシート | MDN
目次
数学関数
calc()
これが効かなければこのサイトでも崩れてます｡
width: calc(100% - 100px);
clamp()
スマホの方は200px､PCの方は500pxになると思います｡
width: clamp(200px, 50vw, 500px);
max()
max(最大値, 値) と書式が決まってるのかと思ってましたが
複数の値から最大の値を取得するようです｡
なので､max(50%, 50vh, 100px) などとも書けるみたい｡
スマホの方は300px､PCの方は50vwになるはず｡
width: max(50vw, 300px);
min()
こちらも､min(最小値, 値) と決まってるのかと思ってましたが
min(50%, 50vh, 100px) など書けばその中の最小値を取得するようです｡
スマホの方は50vw､PCの方は300pxになるはず｡
width: min(50vw, 300px);
clamp() × calc()
あわせ技はどうか｡
スマホの方は200px､PCの方は500pxになると思います｡
width: clamp(calc(300px - 100px), 50vw, calc(600px - 100px));
max() × calc()
スマホの方は300px､PCの方は50vwになるはず｡
width: max(50vw, calc(400px - 100px));
calc() × clamp()
calc()の中にclamp()
スマホの方は200px､PCの方は500pxになるはず｡
width: calc(clamp(300px, 50vw, 600px) - 100px);
calc() × min()
calc()の中にmin()
スマホの方は50vw-100px､PCの方は300pxになるはず｡
width: calc(min(50vw, 400px) - 100px);
フィルター関数
この画像にフィルターをかけていきます｡
ちなみに実家のうさぎの写真です｡
blur()
画像をぼかします｡
filter: blur(5px);
brightness()
画像を明るくしたり暗くしたりします。
filter: brightness(1.5);
contrast()
画像のコントラストを上げたり下げたりします。
filter: contrast(2);
drop-shadow()
画像の背後にドロップシャドウを適用します。
filter: drop-shadow(30px 10px 4px #4444dd);
grayscale()
画像をグレイスケールに変換します。
filter: grayscale(1);
hue-rotate()
画像の色相を全体的に変更します。
filter: hue-rotate(90deg);
invert()
画像の色を反転させます。
filter: invert(1);
opacity()
画像を半透明にします。
filter: opacity(0.2);
saturate()
入力画像の彩度を上げたり下げたりします。
filter: saturate(5px);
sepia()
画像をセピア調に変換します。
filter: sepia(1);
画像関数
conic-gradient()
扇形グラデーションは、円を描くように徐々に色を変化させます。
background: conic-gradient(red, orange, yellow, green, blue);
linear-gradient()
線形グラデーションは、想像上の線に沿って徐々に色を変化させます。
background: linear-gradient(#e66465, #9198e5);
radial-gradient()
放射グラデーションは、中心点（原点）から徐々に色を変化させていきます。
background: radial-gradient(#e66465, #9198e5);
repeating-linear-gradient()
linear-gradient() に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色停止点を繰り返します。
background: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
repeating-radial-gradient()
radial-gradient() に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色停止点を繰り返します。
background: repeating-radial-gradient(#e66465, #9198e5 20%);
repeat-conic-gradiant()
conic-gradient() に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色停止点を繰り返します。
background: repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);
カウンター関数
counter()
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>ul {
counter-reset: listCounter;
}
ul li {
counter-increment: listCounter;
}
ul li::after {
content: counter(listCounter);
}効いてれば､リスト1､リスト2､リスト3､リスト4ってなります｡
- リスト
- リスト
- リスト
- リスト
シェイプ関数
circle()
円形に切り取り
clip-path: circle(50% at 50% 50%);
ellipse()
楕円に切り取り
clip-path: ellipse(50% 35% at 50% 50%);
inset()
四角形に切り取り
clip-path: inset(40% 0 30% 0);
polygon()
多角形に切り取り
clip-path: polygon(50% 0%, 100% 40%, 75% 100%, 25% 100%, 0% 40%);
参照関数
attr()
属性の値を､疑似要素のcontent()で表示できます｡
<p class="address" data-pref="東京都">新宿区</p>.address::before {
content: attr(data-pref);
}「東京都新宿区」になってればOK
新宿区
var()
<p class="textred">赤い文字になってればOK</p>:root {
--my_red: #e74c3c;
}
.textred {
color: var(--my_red);
}赤い文字になってればOK
var() × clamp()
var()でclamp()を定義するとちゃんと効くか？
:root {
--my_width: clamp(200px, 50vw, 500px);
}
.bar {
width: var(--my_width);
}スマホの方は200px､PCの方は500pxになると思います｡
以上です｡
こちらでも随時追加していきますが､リクエストなどあればコメントで教えてください！
