W3.CSS-環境のセットアップ

W3.CSSの使い方は？

W3.CSSを使用する方法は2つあります-

Local Installation −ローカルマシンにW3.CSSファイルをダウンロードして、HTMLコードに含めることができます。
CDN Based Version − W3.CSSファイルをコンテンツ配信ネットワーク（CDN）から直接HTMLコードに含めることができます。

ローカルインストール

に移動 https://www.w3schools.com/w3css/w3css_downloads.asp 利用可能な最新バージョンをダウンロードします。
次に、ダウンロードしたw3.cssファイルをWebサイトのディレクトリ（/ cssなど）に配置します。

例

これで、次のようにcssファイルをHTMLファイルに含めることができます-

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "css/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

次の結果が得られます-

CDNベースのバージョン

W3.CSSファイルをコンテンツ配信ネットワーク（CDN）から直接HTMLコードに含めることができます。W3Schools.comは、最新バージョンのコンテンツを提供しています。

Note −このチュートリアルでは、ライブラリのW3Schools.comCDNバージョンを使用しています。

例

ここで、W3Schools.comCDNのjQueryライブラリを使用して上記の例を書き直してみましょう。

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width =  device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

次の結果が得られます-