on:2020年1月16日sponsorsWeb制作でモダンブラウザをターゲットにした場合、CSSにおけるブラウザによる互換性の問題は以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットやすべてをリセットする必要は全くありません。Dev.toなど)もでてきました。現在の制作環境に合わせて制作された新しいCSSリセットの中から特に注目すべき、CSSリセットを紹介します。stylesheet)」と呼ばれるデフォルトのスタイルが付属しています。これらのスタイルシートはオープンソースで公開されています。stylesheetをまとめました。stylesheetで一貫されていますが、一貫されていないものもあります。stylesheetごとの矛盾を扱うために、CSSリセットは誕生しました。CSSリセットとはブラウザ間でより標準化されたベースを作成することが目的で、通常は他のスタイルの前にページに適用されるスタイルのセットです。似たものとしてノーマライズがあります。stylesheetのスタイルを維持するものです。-モダンブラウザ用のCSSリセットモダンブラウザをターゲットにしたWeb制作では、CSSにおけるブラウザの互換性の問題はIE6の頃に比べるとはるかに少なくなり、無理なリセットやすべてをリセットする必要はなくなりました。border-box;を定義し、リストやフォーム周りにも細やかな配慮がされたCSSリセットです。!important}}※2020/2/4のバージョン(GitHub)上記のスタイルシートは、コメントなどを削除したものです。各スタイルシートの詳しい説明は、以前の記事をご覧ください。Remedy」がお勧めです。Developerによる新しいプロジェクトで、後方互換性を備えつつ、現在のデスクトップやスマホの環境に合わせたCSSリセットです。プロパティや値を後方互換性について心配する必要がない場合のみ定義し、CSSがデフォルトでどのように動作するべきか現代的な考えでUAスタイルを上書きすることができます。0;color:inherit;height:0;overflow:visible}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle;max-width:100%}canvas,img,svg,video{height:auto}audio{width:100%}img{border-style:none}svg{overflow:hidden}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}※2019/9/13のバージョン(GitHub)上記のスタイルシートは、コメントなどを削除したものです。各スタイルシートの詳しい説明は、以前の記事をご覧ください。CSSやNormalize.cssよりも使いやすく、これからのWebサイトやスマホアプリのCSSリセットとして設計された「Reboot.css」です。Bootstrapで採用されているので、多くの実績があるのも特徴です。2.0に似ていますが、リセット用の便利なスタイルが用意されています。-webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}※2019/11/28のバージョン(GitHub)上記のスタイルシートは、コメントなどを削除したものです。各スタイルシートの詳しい説明は、以前の記事をご覧ください。「Reboot.css」の特徴と使い方を解説どのCSSリセットが適しているかの選び方・カスタマイズ方法この記事ではたくさんのCSSリセットを紹介していますが、実際に使用する際には1つで十分です。どのCSSリセットが自分に適しているか、その選び方とカスタマイズ方法を紹介します。Resetさすがに古いので使用するには、カスタマイズが必要だと思います。Reset)normalize.cssバージョンアップが重ねられ、2020年でも現役で使用できるCSSリセットです。CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説sanitize.cssreset.cssとnormalize.cssに続くCSSリセット。