🧀👩🏻‍💻 01. Reset CSS



CSSリセットとは

  • 各Webブラウザは異なるデフォルトスタイルを指定しており、これを初期化することで、異なるWebブラウザ環境で同じスタイル設定を適用することができます!
  • W 3 Cで正式に推奨されている技術というより、実際の操作で勝手に指定した設定です!
  • 正規化方法


    Reset CSSにはいろいろな方法がありますが、最近はnormalizeです.主にcssを使用
    CDNテクノロジーによるリンク応用:https://cdnjs.com/libraries/normalize
    CDNインフラストラクチャCDNは、元のコンテンツを格納するサーバではなく、ユーザの物理的位置に近いネットワーク位置でWebコンテンツ要求にキャッシュされたバージョンで応答することで、コンテンツサーバのトラフィックを分散させ、Web体験を向上させる.
    適用方法:<head></head>に次のスクリプトを追加します.
  • RESET CSSにCSS効果を追加する場合はnormalize.cssをダウンロードして追加することができて、もし圧縮するRESET CSSが必要ならば、min.cssをダウンロードして
  • を使うことができます
  • Normalize RESET CSSの特徴は、デフォルトのスタイルを保持し、異なるブラウザスタイルのみを初期化するように適用すること(すなわち、すべての効果をリセットしない)
  • である.
    💻 html code
    
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
      </head>
      <body></body>
    </html>

    RESET CSSファイル


    🌟 RESET CSSファイルをインポートする方法としても使えます!
    RESET CSSを
  • ファイルとして使用する方法は、プライマリcssファイルにインポートし、
  • を適用することです.
  • importメソッド:@import "reset.css";
  • 💻 RESET CSS
    
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,
    small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,
    aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,
    nav,output,ruby,section,summary,time,mark,audio,video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,
    nav,section {
      display: block;
    }
    body {
      line-height: 1;
    }
    ol,
    ul {
      list-style: none;
    }
    blockquote,
    q {
      quotes: none;
    }
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
      content: "";
      content: none;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    input:focus {
      outline: none;
    }
    a {
      color: inherit;
      text-decoration: none;
    }