Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
485
Help us understand the problem. What is going on with this article?
@rigani

珍しいCSSプロパティたち

More than 3 years have passed since last update.

あまり見かけない、かつ実用的なCSSのプロパティをまとめました。
他プロパティに依存するプロパティは割愛します。
ブラウザ対応状況はCan I Use等でご確認ください。

紹介するCSSプロパティ

will-change

予め演算処理をさせておくプロパティです。
これから変化する スクロール位置 / 要素 / プロパティ を値に設定すると、事前に変化をブラウザに知らせる事ができます。
アニメーションのカクつきを、いくらか抑えることができるでしょう。
ただ、何にでも指定してしまうと、無駄なリソースを消費することになります。
:hover など、うまく事前にだけ指定できる工夫をしてください。

a {
  transition: transform 0.1s;
}
a:hover {
  will-change: transform;
}
a:active {
  transform: rotate(5deg);
}

scroll-behavior

ユーザが行う以外のスクロール(アンカーリンクなど)が発生したときの振る舞いを制御するプロパティです。
スクロールボックスに対してsmoothを指定するだけでスムーススクロールが実現できます。

この記事ページで開発者ツールを開いて、以下のスタイルを追記してみてください。

html {
  scroll-behavior: smooth;
}

ページ内リンクが滑らかに動作するはずです。モダンなブラウザなら、きっと。
もうJavaScriptで泥臭い記述をしなくて済みますね:)

resize

ユーザが要素の大きさを変更できるようになります。
textarea要素の挙動を想像していただくと、分かりやすいかと思います。

none
リサイズを許可しません。

both
水平・垂直方向のリサイズを許可します。

horizontal
水平方向のリサイズを許可します。

vertical
垂直方向のリサイズを許可します。

注意: overflowプロパティにvisible以外を指定しないとリサイズできません。
textarea {
  width: 400px;
  height: 300px;
  resize: none;
}

上記のように、textarearesize: none;を指定すると、リサイズできないテキストエリアになります。

object-fit と object-position

object-fit
インライン置換要素に、親要素へのフィットの方法を指定します。
object-position
位置を指定します。

例えば、次のようにbackground-size, background-positionと似た効果を得ることができます。

img {
  object-fit: cover; /* 縦横比を保ちながら、親要素を埋めるようにフィットする */
  object-position: right bottom; /* オブジェクトを要素の右下に揃える */
}

object-fitには、fill, cover, contain, scale-down, noneの値が用意されています。

appearance

ブラウザがそれぞれ用意しているスタイル付けをします。
appearance: button;でボタンっぽく。
非常に多くの値があります。わさビーフでも食べながらリファレンスを見てください。
noneを指定すると、プラットフォームの影響を受けない、プレーンな状態にすることができます。
buttonなどのform部品にスタイルを付ける場合、appearance: none;を最初に指定しておくと良いでしょう。

user-select

ユーザのドラッグによる選択範囲を指定します。
値にnoneを指定すると、選択を禁止します。
選択の背景色を透明にしたいだけならば、::selectionで背景色を指定します。

font-feature-settings

OpenType機能の使用を制御します。
OpenType機能については、Adobeの解説記事を。
CSS での OpenType 機能の構文

font-feature-settings: "palt";

タグ名が4文字じゃなかったり、許可されていない文字コードを使ったりすると、このプロパティ全体が無効になります。

カーニングを行うためにpalt(プロポーショナルメトリクス)が多く使われる印象があります。
ICS MEDIAさんが高濃度な記事を公開されています。非常に読みやすいので、ぜひ。
文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング

text-rendering

テキストのレンダリングを指定します。
アンチエイリアスやカーニングを施してくれます。
値の中には、挙動が環境によって異なるものがあるため、よく調べて設定してください。
読みやすさを重視したtext-rendering: optimizeLegibility;を指定することが多いようです。
これとは別に、カーニングのためのfont-kerningプロパティもあります。

font-smoothing

SafariやFirefox向けのアンチエイリアス処理を指定します。
animationでフォントがピクピクする不具合は、下記で解消する可能性があります。
font-smoothing: antialiased;

hyphens

どのようにハイフネーション改行を行うかをブラウザに伝えるプロパティです。
noneではハイフネーションを行いません。
autoはブラウザがよしなにします。
manualは改行候補文字のみに従ってハイフネーションを行います。

U+2010 (HYPHEN)
ハードハイフン(見える改行候補文字)
U+00AD (SHY)
ソフトハイフン(見えない改行候補文字)
HTML特殊文字は ­

pointer-events

マウスイベントを制御します。
値にnoneを指定すると、イベントを拾わなくなります。
マウスイベントは通過であるため、要素が奥にあれば、そちらにイベントが発生します。
::before / ::after 擬似要素のマウスイベントを剥がすのに便利です。

おまけ

便利な値、関数たち

vw / vh / vmax / vmin
viewportに対しての割合
vwは幅、vhは高さです。vmaxは幅と高さの大きい方、vminは小さい方になります。
width: 80vmin;
height: 80vmin; /* 正方形になります */

rem
root(html要素)に対してのem
font-size: 1.2rem;

calc
括弧内で単位を跨ぐ計算をしてくれます。
calc内で更に括弧計算する場合には、calcの文字は要りません。
width: calc(100% - 200px);
height: calc((100% - 40px) / 2);

currentColor
colorプロパティの値を引き継ぎます。
colorに使用すると、通常の継承(inheritと同等)になります。
color: #123456;
background-color: currentColor;

!important
優先度を引き上げます。
極力使わずに済むコーディングを心掛けたいところです。
margin-left: 20px !important;


修正 :『ユニバーサルセレクタ』を『ワイルドセレクタ』と誤って記載していました。ご指摘ありがとうございます。

485
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
rigani
絵の休憩にコード書いて、コードの休憩に絵を描いてます👏 Ruby と CSS がすこ
basicinc
マーケティングとテクノロジーで社会のあらゆる問題を解決する集団

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
485
Help us understand the problem. What is going on with this article?