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

• 作成：2016/07/4
• 更新：2016/07/04
• Web制作 >

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

エンジニア速報は Twitter の@commteで配信しています。

CSS3

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

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

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

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

無事消えました。

• Coderwall | Change background color for autocompleted inputs in Google
• Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも

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と併用するとレタリングに影響を与えるみたいなので、注意が必要とのことです。

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

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

• 404ページ

ショートハンド・プロパティの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。

• Can I use / background-blend-mode
• Can I use / viewport-units

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

フォントサイズは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;
}

• font - CSS | MDN

長方形の画像を正円に「中心」から切り抜く

縦横のサイズが同一でない画像をくり抜きたい時、「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で気づいたことのメモでした。