意外と盲点だったCSS3の役立つ小技まとめ

TwitterFacebookHatena
  • 公開：2016-7-4
  • 更新：2023-09-22
  • 文章量：3757
  • CSS

TL;DR

リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。

CSS3

オートフィルの背景色を解除

chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px 色指定 inset;
}

を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。 無事消えました。

backface-visibility で Chrome のチラつきを解決

fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイドバーで fixed を使っている箇所が 1px ずれたり、チラつきが発生する現象が起きることがあります。そんな時に「backface-visibility」を使って解決。

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

を body に設定。backface-visibilityは、transform の種類で裏面の表示／非表示を指定するものです。

プロパティは要素の裏面がユーザに面したときに、裏面を可視にするかどうかを決めます。 backface-visibility - CSS | MDN

hiddenにすると裏面の鏡像を表示しないとのことですが、ブログ内でvisibleを使うシーンは無さそうなので採用。 但し、-webkit-font-smoothingと併用するとレタリングに影響を与えるみたいなので、注意が必要とのことです。

背景画像と色を合成し中心に配置させ、高さをブラウザの大きさとフィットさせる

背景を中心に寄せ、色と合成し、ブラウザの大きさに応じて自動で高さを合わせたい。

ショートハンド・プロパティの background で（色、背景画像、位置、サイズ）を一括指定できます。位置とサイズの間にはスラッシュ「/」を入れると上手く表示されます。 後はbackground-blend-modeで背景色と画像を合成させ、背景画像と高さをブラウザの大きさとフィットさせたかったので、ビューポートの高さに対する割合を示すvhで要素の高さを 100%にします。 vhは viewport height の略で、親要素ではなく、ビューポートの高さに対する割合を示します。モバイルの向きなど気にせずに背景画像をブラウザにフィットさせることが出来ます。

background: #000 url(./img/404.jpg) no-repeat center/cover;
background-blend-mode: hard-light;
height: 100vh;

と３行だけ記載。画面の解像度は 1920x1080 が多いので、背景画像は大きめ（横 2000px くらい）のものを使います。 これでブラウザ幅が変わっても天地にフィットするし、合成する色を簡単に変えることができるし効率的。background-blend-mode の対応状況はこちら。IE 以外は大体 OK。

レスポンシブに最適な今時のフォントサイズ指定

フォントサイズは CSS3 の rem を使った指定に変更。rem は親要素のサイズの影響を受けず相対的にフォントサイズを指定できるので分かりやすいです。em は親要素の font-size を 1 とした倍率に対して、rem は html 要素の font-size を 1 とした倍率になります。 計算しやすいように html にはfont-size: 62.5%;を指定。ブラウザの対応状況はCan I use / rem。

html {
  font-size: 62.5%;
  /* 10px = 1rem */
}

h1,
h2,
h3 {
  /* font-size: 25px; フォールバック */
  font-size: 2.5rem;
}

h4 {
  /* font-size: 20px; */
  font-size: 2rem;
}

font / 大きさと line-height などを一括指定

フォントの指定も、font-size や line-height を一括で指定するショートハンドプロパティも使いましょう。font-size と font-family は必須の値で他は省略可能です。

/* font-weight: 300;, font-size:12px;, line-height:1.4;, font-family: sans-serif を一括設定 */
p {
  font: 300 12px/1.4 sans-serif;
}
body {
  font: 1rem/1.5 '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
}
#### 長方形の画像を正円に「中心」から切り抜く 縦横のサイズが同一でない画像をくり抜きたい時、「border-radius: 50%;」を使うと楕円形にゆがみますが、-webkit-clip-path: circleに「at center」を指定すると正円を中心から繰り抜けます。あとは%で大きさを指定。 
img {
  -webkit-clip-path: circle(50% at center);
  clip-path: circle(50% at center);
}

IE 以外は要素を消す

-webkit-clip-path: circleに 0 を指定すると要素が消えます。 使いドコロが難しいですが、IE でサポートされてないCan I useのを利用して

h1 {
  -webkit-clip-path: circle(0);
  clip-path: circle(0);
}

と書けば、IE 以外で要素が消え、IE だけ要素を表示することができます。

文字で画像をくり抜く

h1 {
  -webkit-background-clip: text;
  background-image: url('http://placeimg.com/640/480/any');
  color: transparent;
  font-size: 120px;
  text-align: center;
}

~個目以降のスタイルを全て変更する

~個目や奇数偶数の指定ではなく、~以降全てに同じスタイルを適用するには擬似要素 nth-child(n+任意の数値)を使います。

.foo:nth-child(n + 3) {
  width: 100%;
}

~個までに適用する場合はマイナスを付けます。

.foo:nth-child(-n + 3) {
  width: 100%;
}

Useful :nth-child Recipes | CSS-Tricks

記事中の最初の要素指定には擬似要素でなく隣接セレクタ

例えば、記事中の最初の画像だけ width: 100%を適用したい場合、「first-child」などは使えないので「隣接セレクタ」で指定します。以下は ul の次にある img を指定する場合。

section ul + img {
  width: 100%;
}

iPhone / タップした時の色を変更する

iPhone でリンクをタップした時の色を指定します。

-webkit-tap-highlight-color: red;

-webkit-tap-highlight-color - CSS | MDN

iPhone / フォーム要素をリセットする

実機確認しないと忘れがちなところ。角丸を消して、ボタンなどについているデフォルトのスタイルをリセットします。

input[type='button'],
input[type='submit'] {
  border-radius: 0;
  -webkit-appearance: none;
}

以上、CSS3 で気づいたことのメモでした。

Jamstack での制作を依頼する

意外と盲点だったCSS3の役立つ小技まとめ