[w3schools.com]からの引用＆改変文
New in Version 5
| w3-rtl |
Adjusts text direction for right to left (rtl) layout |
| w3-ltr |
Adjusts text direction for left to right (ltr) layout |
| w3-text-center |
Center text (same as w3-center) |
| w3-bold |
Changes the font to bold |
| w3-text-bold |
Changes the font to bold (same as w3-bold) |
| w3-italic |
Changes the font to italic |
| w3-text-italic |
Changes the font to italic (same as w3-italic) |
Container Classes
| Class |
Defines |
| w3-container |
HTML container with 16px left and right padding |
| |
Used as header |
| |
Used as footer |
| w3-panel |
HTML container with 16px left and right padding and 16px top and bottom margin |
| |
Used to display a note |
| |
Used to display a quote |
| w3-badge |
Circular badge |
| w3-tag |
Rectangular tag |
| w3-ul |
Unordered list |
| w3-display-container |
Container for w3-display-classes (enables positioning of elements
inside the container) |
| w3-block |
Class that can be used to define a full width for any element |
| w3-code |
Code container |
| w3-codespan |
Inline code container (for code snippets) |
| w3-content |
Container for fixed size centered content |
| w3-auto |
Container for responsive size centered content |
| w3-stretch |
Class that removes right and left margins (especially useful for stretching padded rows (w3-row-padding)) |
| w3-rtl |
Adjusts text direction for right to left (rtl) layout |
| w3-ltr |
Adjusts text direction for left to right (ltr) layout |
Table Classes
| Class |
Defines |
| w3-table |
Container for an HTML table |
| w3-striped |
Striped table |
| w3-border |
Bordered table |
| w3-bordered |
Bordered lines |
| w3-centered |
Centered table |
| w3-hoverable |
Hoverable table |
| ws-table-all |
All properties set |
| |
With w3-striped, w3-border, and w3-bordered |
| |
With colored head |
| |
With w3-responsive |
| |
With w3-tiny |
| |
With w3-small |
| |
With w3-large |
| |
With w3-xlarge |
| |
With w3-xxlarge |
| |
With w3-xxxlarge |
| |
With color |
| |
With w3-jumbo |
| w3-responsive |
Creates a responsive table |
Card Classes
| Class |
Defines |
| w3-card |
Same as w3-card-2 |
| w3-card-2 |
Container for any HTML content (2px bordered shadow) |
| w3-card-4 |
Container for any HTML content (4px bordered shadow) |
Responsive Classes
| Class |
Defines |
| w3-row |
Container for one row of fluid responsive content |
| w3-row-padding |
Row where all columns have a default padding |
| w3-auto |
Container for responsive size centered content |
| w3-stretch |
Class that removes right and left margins |
| w3-half |
Half (1/2) screen column container |
| w3-third |
Third (1/3) screen column container |
| w3-twothird |
Two third (2/3) screen column container |
| w3-quarter |
Quarter (1/4) screen column container |
| w3-threequarter |
Three quarters (3/4) screen column container |
| w3-col |
Column container for any HTML content |
| w3-rest |
Occupies the rest of the column width |
| |
|
| l1 - l12 |
Responsive sizes for large screens |
| m1 - m12 |
Responsive sizes for medium screens |
| s1 - s12 |
Responsive sizes for small screens |
| |
|
| w3-hide-small |
Hide content on small screens (less than 601px) |
| w3-hide-medium |
Hide content on medium screens |
| w3-hide-large |
Hide content on large screens (larger than 992px) |
| |
|
| w3-image |
Responsive image |
| |
|
| w3-mobile |
Adds mobile-first responsiveness to any element.
Displays
elements as block elements on mobile devices. |
Layout Classes
| Class |
Defines |
| w3-cell-row |
Container for layout columns (cells). |
| w3-cell |
Layout column (cell). |
| w3-cell-top |
Aligns content at the top of a column (cell). |
| w3-cell-middle |
Aligns content at the vertical middle of a column (cell). |
| w3-cell-bottom |
Aligns content at the bottom of a column (cell). |
Bar Classes - Navigation
| Class |
Defines |
| w3-bar |
Horizontal bar |
| w3-bar-block |
Vertical bar |
| w3-bar-item |
Provides common style for bar items |
| w3-sidebar |
Side bar |
| |
A side bar can contain all types of content |
| |
A side bar overlaying main content |
| |
A side bar overlaying all main content |
| |
A side bar shifting main content to the right |
| |
A side bar with an overlay background |
| |
A Side bar on the right side |
| w3-collapse |
Used together with w3-sidebar to create a fully automatic responsive side navigation. For this class to work, the page content must be within a "w3-main" class |
| w3-main |
Container for page content when using the w3-collapse class for responsive side navigations |
| |
Fully automatic right-sided responsive side navigation |
Dropdown Classes
| w3-dropdown-click |
Clickable dropdown element |
| w3-dropdown-hover |
Hoverable dropdown element |
| |
Hoverable dropdown element (used in w3-bar) |
| |
Hoverable dropdown element (used in w3-bar-block) |
| |
Hoverable dropdown element (used in w3-sidebar) |
Button Classes
| Class |
Defines |
| w3-button |
Rectangular button with grey background color on hover |
| w3-btn |
Rectangular button with shadows on hover |
| w3-circle |
Can be used to create a circular button |
| w3-ripple |
Rectangular button with ripple effect |
| |
Circular floating button with ripple effect |
| w3-bar |
Can be used to group elements (like buttons) in an horizontal bar |
| w3-block |
Class that can be used to define a full width w3-button |
| |
Full width w3-btn |
| |
Full width circular button |
Input Classes
| Class |
Defines |
| w3-input |
Input elements |
| |
Input form as a card |
| |
Input elements (top labels) |
| |
Input elements (bottom labels) |
| w3-check |
Checkbox input type |
| w3-radio |
Radio input type |
| w3-select |
Input select element |
| w3-animate-input |
Animates the width of an input to 100% |
Modal Classes
| Class |
Defines |
| w3-modal |
Modal container |
| w3-modal-content |
Modal pop-up element |
| w3-tooltip |
Tooltip element |
| w3-text |
Tooltip text |
Animation Classes
| Class |
Defines |
| w3-animate-top |
Animates an element from the top -300px to 0px |
| w3-animate-left |
Animates an element from left -300px to 0px |
| w3-animate-bottom |
Animates an element from the bottom -300px to 0px |
| w3-animate-right |
Animates an element from right -300px to 0px |
| w3-animate-opacity |
Animates an element's opacity from 0 to 1 |
| w3-animate-zoom |
Animates an element from 0 to 100% in size |
| w3-animate-fading |
Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out) |
| w3-spin |
Spin an icon 360 degrees |
| |
Spin any element 360 degrees |
| w3-animate-input |
Animates the width of an input field to 100% |
Font and Text Classes
| Class |
Defines |
| w3-tiny |
Specifies a font size of 10 pixels |
| w3-small |
Specifies a font size of 12 pixels |
| w3-large |
Specifies a font size of 18 pixels |
| w3-xlarge |
Specifies a font size of 24 pixels |
| w3-xxlarge |
Specifies a font size of 32 pixels |
| w3-xxxlarge |
Specifies a font size of 48 pixels |
| w3-jumbo |
Specifies a font size of 64 pixels |
| w3-wide |
Specifies a wider text |
| w3-serif |
Changes the font to serif |
| w3-sans-serif |
Changes the font to sans-serif |
| w3-cursive |
Changes the font to cursive |
| w3-monospace |
Changes the font to monospace |
| w3-center |
Center text |
Display Classes
| Class |
Defines |
| w3-center |
Centered content |
| w3-left |
Floats an element to the left (float: left) |
| w3-right |
Floats an element to the right (float: right) |
| w3-left-align |
Left aligned text |
| w3-right-align |
Right aligned text |
| w3-justify |
Right and left aligned text |
| w3-block |
Class that can be used to define a full width for any element |
| w3-circle |
Circled content |
| w3-hide |
Hidden content (display:none) |
| w3-show |
Show content (display:block) |
| w3-show-block |
Alias of w3-show (display:block) |
| w3-show-inline-block |
Show content as inline-block (display:inline-block) |
| w3-top |
Fixed content at the top of a page |
| w3-bottom |
Fixed content at the bottom of a page |
| w3-display-container |
Container for w3-display-classes (position: relative) |
| w3-display-topleft |
Displays content at the top left corner of the w3-display-container |
| w3-display-topright |
Displays content at the top right corner of the w3-display-container |
| w3-display-bottomleft |
Displays content at the bottom left corner of the w3-display-container |
| w3-display-bottomright |
Displays content at the bottom right corner of the w3-display-container |
| w3-display-left |
Displays content to the left (middle left) of the w3-display-container |
| w3-display-right |
Displays content to the right (middle right) of the w3-display-container |
| w3-display-middle |
Displays content in the middle (center) of the w3-display-container |
| w3-display-topmiddle |
Displays content at the top middle of the w3-display-container |
| w3-display-bottommiddle |
Displays content at the bottom middle of the w3-display-container |
| w3-display-position |
Displays content at a specified position in the w3-display-container |
| w3-display-hover |
Displays content on hover inside the w3-display-container |
Effect Classes
| Class |
Defines |
| w3-opacity |
Adds opacity/transparency to an element (opacity: 0.6) |
| |
Add opacity/transparency to text |
| w3-opacity-off |
Turns off opacity/transparency (opacity: 1) |
| w3-opacity-min |
Adds opacity/transparency to an element (opacity: 0.75) |
| w3-opacity-max |
Adds opacity/transparency to an element (opacity: 0.25) |
| w3-grayscale-min |
Adds a grayscale effect to an element (grayscale: 50%) |
| w3-grayscale |
Adds a grayscale effect to an element (grayscale: 75%) |
| w3-grayscale-max |
Adds a grayscale effect to an element (grayscale: 100%) |
| w3-sepia-min |
Adds a sepia effect to an element (sepia: 50%) |
| w3-sepia |
Adds a sepia effect to an element (sepia: 75%) |
| w3-sepia-max |
Adds a sepia effect to an element (sepia: 100%) |
| w3-overlay |
Creates an overlay effect |
Background Color Classes
Red
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-red
Pink
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-pink
Purple
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-purple
Deep Purple
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-deep-purple
Indigo
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-indigo
Cobalt
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-cobalt
Blue
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-blue
Light Blue
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-light-blue
Cyan
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-cyan
Aqua
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-aqua
Teal
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-teal
Emerald
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-emerald
Green
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-green
Light Green
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-light-green
Lime
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-lime
Khaki
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-khaki
Yellow
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-yellow
Amber
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-amber
Orange
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-orange
Deep Orange
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-deep-orange
Blue Gray
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-blue-gray
Olive
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-olive
Taupe
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-taupe
Sienna
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-sienna
Brown
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-brown
Crimson
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-win8-crimson
Sand
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-sand
White
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-white
Paper
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-paper
Light Gray
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-light-gray
Gray
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-gray
Dark Gray
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-dark-gray
Asphalt
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-asphalt
Black
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-black
Pale Red
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-pale-red
Pale Yellow
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-pale-yellow
Pale Green
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-pale-green
Pale Blue
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-pale-blue
DANGER
Red often indicates a dangerous or negative situation.
w3-danger
WARNING
Orange often indicates a warning that might need attention.
w3-warning
SUCCESS
Green often indicates something successful or positive.
w3-success
Info
Blue often indicates a neutral informative change or action.
w3-info
Note
Yellow is often used for notifications.
w3-danger, w3-warning, w3-sucess, w3-info, w3-note are new in W3.CSS version 5.0.
w3-note
Transparent
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
w3-transparent
Hover Color Classes
The colors above can also be used as hover classes:
| Class |
Defines |
| w3-hover-white |
Hover color white |
| w3-hover-black |
Hover color black |
| w3-hover-red |
Hover color red |
| w3-hover-blue |
Hover color blue |
| w3-hover-green |
Hover color green |
| w3-hover-aqua |
Hover color aqua |
| w3-hover-orange |
Hover color orange |
| w3-hover-grey |
Hover color grey |
| w3-hover-pale-green |
Hover color pale green |
Text Color Classes
| Class |
Defines |
| w3-text-red |
Text color red |
| w3-text-green |
Text color green |
| w3-text-blue |
Text color blue |
| w3-text-yellow |
Text color yellow |
| w3-text-light-grey |
Text color light-grey |
| w3-text-grey |
Text color grey |
| w3-text-dark-grey |
Text color dark grey |
| w3-text-black |
Text color black |
| w3-text-white |
Text color white |
| w3-text-pink |
Text color pink |
| w3-text-purple |
Text color purple |
| w3-text-teal |
Text color teal |
| w3-text-light-green |
Text color light green |
| w3-text-lime |
Text color lime |
| w3-text-deep-purple |
Text color deep purple |
| w3-text-indigo |
Text color indigo |
| w3-text-light-blue |
Text color light blue |
| w3-text-blue-grey |
Text color blue grey |
| w3-text-cyan |
Text color cyan |
| w3-text-aqua |
Text color aqua |
| w3-text-amber |
Text color amber |
| w3-text-orange |
Text color orange |
| w3-text-deep-orange |
Text color deep orange |
| w3-text-sand |
Text color sand |
| w3-text-khaki |
Text color khaki |
| w3-text-brown |
Text color brown |
Hover Text Classes
The text classes above can also be used as hover classes:
| Class |
Defines |
| w3-hover-text-red |
Hover text color red |
| w3-hover-text-green |
Hover text color green |
| w3-hover-text-blue |
Hover text color blue |
| w3-hover-text-yellow |
Hover text color yellow |
Other Hover Classes
| Class |
Defines |
| w3-hover-border-color |
Hover border color |
| w3-hover-opacity |
Adds transparency to an element on hover (opacity: 0.6) |
| w3-hover-opacity-off |
Removes transparency from an element on hover (100% opacity) |
| w3-hover-shadow |
Adds shadow to an element on hover |
| w3-hover-grayscale |
Adds a black and white (100% grayscale) effect to an element |
| w3-hover-sepia |
Adds a sepia effect to an element on hover |
| w3-hover-none |
Removes hover effects from an element |
Round Classes
| Class |
Defines |
| w3-round |
Element rounded (border-radius) 4px |
| w3-round-small |
Element rounded (border-radius) 2px |
| w3-round-medium |
Element rounded (border-radius) 4px |
| w3-round-large |
Element rounded (border-radius) 8px |
| w3-round-xlarge |
Element rounded (border-radius) 16px |
| w3-round-xxlarge |
Element rounded (border-radius) 32px |
Padding Classes
| Class |
Defines |
| w3-padding-small |
Padding 4px top and bottom, and 8px left and right. |
| w3-padding |
Padding 8px top and bottom, and 16px left and right. |
| w3-padding-large |
Padding 12px top and bottom, and 24px left and right. |
| w3-padding-16 |
Padding 16px top and bottom |
| w3-padding-24 |
Padding 24px top and bottom |
| w3-padding-32 |
Padding 32px top and bottom |
| w3-padding-48 |
Padding 48px top and bottom |
| w3-padding-64 |
Padding 64px top and bottom |
| w3-padding-top-64 |
Padding 64px on top |
| w3-padding-top-48 |
Padding 48px on top |
| w3-padding-top-32 |
Padding 32px on top |
| w3-padding-top-24 |
Padding 24px on top |
Margin Classes
| Class |
Defines |
| w3-margin |
Adds an 16px margin to an element |
| w3-margin-top |
Adds an 16px top margin to an element |
| w3-margin-right |
Adds an 16px right margin to an element |
| w3-margin-bottom |
Adds an 16px bottom margin to an element |
| w3-margin-left |
Adds an 16px left margin to an element |
| w3-section |
Adds an 16px top and bottom margin to an element |
Border Classes
| Class |
Defines |
| w3-border |
Borders (top, right, bottom, left) |
| w3-border-top |
Border top |
| w3-border-right |
Border right |
| w3-border-bottom |
Border bottom |
| w3-border-left |
Border left |
| w3-border-0 |
Removes all borders |
| w3-border-color |
Displays any defined borders in a specified color (like red, etc) |
| w3-bottombar |
Adds a thick bottom border (bar) to an element |
| w3-leftbar |
Adds a thick left border (bar) to an element |
| w3-rightbar |
Adds a thick right border (bar) to an element |
| w3-topbar |
Adds a thick top border (bar) to an element |
| w3-hover-border-color |
Hoverable border color |
is6.be
is6.stars.ne.jp