W3.CSS ダウンロード

❮ 前章へ 次章へ ❯

W3.CSS のダウンロード

このリンクから最新バージョンをダウンロードします: http://www.w3schools.com/lib/w3.css


W3.CSS は無料

W3.CSS の利用は無料です。ライセンスの必要はありません。


W3.CSS の使用方法

W3.CSS を使用するには、ただ Web ​​ページに "w3.css" へのリンクを追加するだけです:

<!DOCTYPE html>
<html>
<title>My Web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
Try It Yourself ❯

または、w3.css をダウンロードして、自分の Web サイトから実行します:

<!DOCTYPE html>
<html>
<title>My Web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="w3.css">

サブフォルダに w3.css を入れた場合は、スラッシュの間にフォルダ名を追加します:

<!DOCTYPE html>
<html>
<title>My Web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/foldername/w3.css">

Web​​ のルートに w3.css 置いた場合は、スラッシュを追加します:

<!DOCTYPE html>
<html>
<title>My Web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/w3.css">


最新バージョン

バージョン 説明
2.75 Added w3-opacity-off and w3-opacity-hover-off.
2.74 Added w3-navitem.
2.73 Added w3-panel.
2.72 Added w3-codespan.
Removed w3-padding-hor-number. Use CSS padding instead.
2.71 Adjusted w3-pale colors.
Adjusted w3-collapse min-width from 992px to 993px.
2.7 Version 2.7  June 2016. Download 2.7
2.68 Adjusted w3-dropnav values.
2.67 Adjusted w3-display-middle values.
2.65 Added w3-disabled.
Increased w3-select padding from "8px 0", to "9px 0".
Added w3-btn-bar.
2.64 Adjusted w3-ripple values.
2.63 Removed w3-image and w3-title. Use w3-display-container instead.
Increased top and bottom padding for w3-select from 4px to 8px.
2.62 Removed w3-padding-ver-number. Use CSS padding instead.
Removed w3-margin-number. Use CSS margin instead.
2.61 Removed "font-weight:bold" from w3-tag and w3-badge. Use <strong> instead.
2.6 Version 2.6  May 2016. Download 2.6
2.52 Added w3-padding-hor and w3-padding-ver.
2.5 Version 2.5  April 2016. Download 2.5
2.5 Adjusted minor transition values.
2.4 Added w3-threequarter.
Added w3-display-topmiddle and w3-display-bottommiddle.
Added w3-transparent and w3-hover-none.
Changed animation duration of w3-animate-opacity from 4 to 1.5 seconds.
2.3 Fixed minor pixel errors in media queries.
Added all color classes to w3-border-color.
2.2 Added 100% width to <li> elements in w3-navbar on small screens (< 601px width).
2.1 Added w3-hover-shadow.
Added w3-hover-text-color.
Changed z-index of w3-modal to "3" (instead of 1).
2.0 February 2016.
1.9 January 2016.
1.8 December 2015.
1.7 November 2015.
1.6 October 2015.
1.5 September 2015.
1.4 August 2015.
1.3 August 2015.
1.2 July 2015.
1.1 June 2015.
1.0 May 2015.

W3.CSS の検証

W3.CSS を検証すると、いくつかのエラーが返されることがあります。

W3C validations を実行すると、いくつかのエラーが発生することがあります。
常に、現在の W3C 仕様外のブラウザに特有な値が若干存在します。

プロパティ説明
pointer-events CSS4 で提案されたもので、CSS3 では無効なプロパティ。
無効な要素から、手の形をしたポインタを削除するために W3.CSS で使用している。
user-select CSS4 で提案されたもので、CSS3 では無効なプロパティ。
クリック可能要素からテキスト選択を削除するために W3.CSS で使用している。
pseudo-class :valid CSS4 で提案されたもので、CSS3 では無効な値。
有効な入力を表すために W3.CSS で使用している。
@-webkit-keyframes アニメーションが、webkit ブラウザ(クローム、サファリ、オペラの旧バージョン)で動作するように W3.CSS に追加している。

W3.CSS のカスタマイズ

W3.CSS には、基本的なフォントやフォントサイズが含まれています。

これらの設定を変更することにより、W3.CSS をカスタマイズすることができます:

html {
  font-family: Verdana, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Segoe UI", Verdana, sans-serif;
  font-weight: 400;
  line-height: 1;
  margin: 20px 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: inherit;}
h1 {font-size: 36px}
h2 {font-size: 30px}
h3 {font-size: 24px}
h4 {font-size: 20px}
h5 {font-size: 18px}
h6 {font-size: 16px}

hr {
  height: 0;
  border: 0;
  border-top: 1px solid #eee;
  margin: 20px 0;
}
Try It Yourself ❯

W3.CSS の正規化

スタイルシートの正規化は、次のことを行います:

Normalize.css からの抜粋は、 W3.CSS で使用しています。

これは、W3.CSS が全てのブラウザで一貫した、且つ最新の web 標準に則った HTML 表示を行うようにしています


❮ 前章へ 次章へ ❯