このリンクから最新バージョンをダウンロードします: http://www.w3schools.com/lib/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 を検証すると、いくつかのエラーが返されることがあります。
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 をカスタマイズすることができます:
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 ❯
スタイルシートの正規化は、次のことを行います:
Normalize.css からの抜粋は、 W3.CSS で使用しています。
これは、W3.CSS が全てのブラウザで一貫した、且つ最新の web 標準に則った HTML 表示を行うようにしています