最新のWeb開発のチュートリアル
×

CSS チュートリアル

CSS HOME CSS 導入 CSS 構文 CSS の仕方 CSS 色 CSS 背景 CSSボーダー CSS 余白 CSS パディング CSS 高さ/幅 CSS テキスト CSS フォント CSS リンクス CSS リスト CSS テーブル CSS ボックスモデル CSSの概要 CSSの表示 CSS 最大幅 CSSのポジション CSS 浮く CSS Inline-block CSS 整列します CSS コンビネータ CSS 擬似クラス CSS 擬似要素 CSS ナビゲーションバー CSS ドロップダウン CSS ツールチップ CSS イメージギャラリー CSS 画像の不透明度 CSS 画像のスプライト CSS attrのセレクタ CSSフォーム CSS カウンター

CSS3

CSS3 導入 CSS3 角丸 CSS3 ボーダーイメージ CSS3 背景 CSS3 色 CSS3 グラデーション CSS3 影 CSS3 テキスト CSS3 フォント CSS3 2Dトランスフォーム CSS3 3Dトランスフォーム CSS3 トランジション CSS3 アニメーション CSS3 画像 CSS3 ボタン CSS3 ページネーション CSS3 複数の列 CSS3 ユーザーインターフェース CSS3 ボックスのサイズ設定 CSS3 Flexbox CSS3 メディアクエリー CSS3 MQ例

CSS レスポンシブWebデザイン

レスポンシブWebデザイン イントロ レスポンシブWebデザイン ビューポート レスポンシブWebデザイン グリッドビュー レスポンシブWebデザイン メディアクエリー レスポンシブWebデザイン 画像 レスポンシブWebデザイン ビデオ レスポンシブWebデザイン フレームワーク

CSS Examples

CSS 例 CSS クイズ CSS 証明書

CSS References

CSS 参照 CSS セレクタ CSS 機能 CSS リファレンス聴覚 CSS Web Safe フォント CSS アニメーション CSS ユニット CSS PX-EMコンバータ CSS 色 CSS 色値 CSS 色名 CSS3 ブラウザのサポート

 

CSSの構文

要素セレクタ
IDセレクタ
(すべての要素の)クラスセレクタ
(のみのクラスセレクタ<p>要素)
セレクタのグループ化

CSSの構文を説明しました


CSSの背景

ページの背景色を設定します。
異なる要素の背景色を設定します。
ページの背景として画像を設定します。
水平方向にのみ背景画像を繰り返す方法
背景画像を配置する方法
固定背景画像(この画像は、ページの残りの部分と一緒にスクロールしません)
1宣言内のすべてのバックグラウンド・プロパティ
高度なバックグラウンドの例

背景のプロパティを説明しました


CSSボーダー

4境界線の幅を設定
トップ境界線の幅を設定します。
下の境界線の幅を設定します。
左境界線の幅を設定します。
右側の境界線の幅を設定します。
4境界線のスタイルを設定します。
上部の境界線のスタイルを設定します。
下の境界線のスタイルを設定します。
左境界線のスタイルを設定します。
右側の境界線のスタイルを設定します。
4境界線の色を設定します。
上罫線の色を設定します。
下の境界線の色を設定します。
左の境界線の色を設定します。
右側の境界線の色を設定します。
1宣言内のすべての境界線のプロパティ
それぞれの側に異なるボーダーを設定します
1宣言内のすべての上部の境界線のプロパティ
1宣言内のすべての下の境界プロパティ
1宣言内のすべての左境界線のプロパティ
1宣言内のすべての右側の境界線のプロパティ

ボーダーのプロパティを説明しました


CSSマージン

要素の各辺に異なる余白を指定します
左マージンは親要素から継承されてみましょう
マージン短縮型プロパティー
そのコンテナ内の要素を中心にautoにマージンを設定します

マージン特性を説明しました


CSSのパディング

要素の左パディングを設定します。
要素の右パディングを設定します
要素の上部パディングを設定します。
要素の下パディングを設定します
1宣言内のすべてのパディングプロパティ

パディングのプロパティを説明しました


CSSテキスト

異なる要素のテキストの色を設定します。
テキストを揃えます
リンクの下の行を削除します
テキストを飾ります
テキストの文字を制御します
インデントテキスト
文字間のスペースを指定します。
ライン間のスペースを指定します
要素のテキストの方向を設定します。
単語の間に空白を増やします
要素内のテキストの折り返しを無効にします
テキスト内の画像の垂直方向の配置

テキストプロパティを説明しました


CSSフォント

テキストのフォントを設定します。
フォントのサイズを設定します。
PXでのフォントのサイズを設定
全角のフォントのサイズを設定
パーセントと全角のフォントのサイズを設定します。
フォントのスタイルを設定します。
フォントのバリアントを設定します
フォントの太さを設定します。
1宣言内のすべてのフォントのプロパティ

フォントの特性を説明しました


CSSリンク

訪問/未訪問のリンクに異なる色を追加
リンクのテキストの装飾の使用
リンクの背景色を指定します
ハイパーリンクに他のスタイルを追加します。
[詳細] - [リンクボックスを作成します。
アドバンス-ボーダーとのリンクボックスを作成します。

リンクプロパティを説明しました


CSSリスト

リスト内のすべての異なるリストアイテムマーカー
リスト項目のマーカーとして画像を設定します。
リスト項目のマーカーを配置します
1宣言内のすべてのリストプロパティ
色とスタイルのリスト
全角境リスト

リストのプロパティを説明しました


CSSテーブル

テーブル、目、およびTD要素のための黒の境界線を指定します
国境崩壊の使用
テーブルの周りに単一の境界線
テーブルの幅と高さを指定します
コンテンツの水平方向の配置を設定します(テキストアライン)
コンテンツの垂直方向の配置を設定します(垂直アライン)
番目とTD要素のためのパディングを指定します
水平デバイダ
Hoverableテーブル
ストライプテーブル
表の罫線の色を指定
テーブルのキャプションの位置を設定します。
レスポンシブ表
派手なテーブルを作成します。

表のプロパティを説明しました


CSSボックスモデル

250ピクセルの幅の合計を持つ要素を指定します

ボックスモデルを説明しました


CSSの概要

要素の周りに線を引く(概要)
アウトラインのスタイルを設定します。
アウトラインの色を設定します。
輪郭線の幅を設定

アウトラインのプロパティを説明しました


CSS寸法

要素の高さと幅を設定します。
要素の設定のmax-width
異なる要素の高さと幅を設定します
パーセントを使用して、イメージの高さと幅を設定します。
MIN-幅と要素の最大幅を設定し
セット分の高さとエレメントの最大の高さ

ディメンションのプロパティを説明しました


CSSの表示

どの要素を非表示にするには(visibility:hidden)
どの要素を表示しないように(display:none)
インライン要素としてブロックレベル要素を表示する方法
ブロックレベル要素としてインライン要素を表示する方法
隠されたコンテンツを表示するために一緒にJavaScriptでCSSを使用する方法に

表示プロパティを説明しました


CSSのポジショニング

ブラウザのウィンドウに要素を位置決め
通常の位置に要素を位置決め
絶対値を持つ要素を配置します
重複要素
素子の形状を設定します。
要素の内容が収まるには大きすぎるときに、スクロールバーを作成する方法
自動オーバーフローを処理するようにブラウザを設定する方法
ピクセル値を使用して、画像の上端を設定します。
画素値を用いて画像の下端を設定します
画素値を用いて、画像の左端を設定します
画素値を用いて、画像の右端を設定します
カーソルの変更 位置画像テキストを(左上隅)
位置画像テキスト(右上)
位置画像テキスト(左下隅)
位置画像テキスト(右下隅)
位置画像テキスト(中心)

配置プロパティを説明しました


CSSのフローティング

float型プロパティの簡単な使用
段落に右に浮かぶボーダーとマージンを持つ画像
右に浮かぶキャプション付き画像
左に段落フロートの最初の文字をしてみましょう
フロートプロパティでイメージギャラリーを作成します。
(明確なプロパティを使用して)フロートをオフにします
水平方向のメニューの作成
テーブルなしでホームページを作成します

フロート特性を説明しました


CSS整列要素

余裕を持って揃えるセンター
位置に左/右整列
左/右の位置で揃える- Crossbrowserソリューションを
フロートと左/右整列
左/右フロートで揃える- Crossbrowserソリューションを

プロパティについて説明揃えます


CSSコンビネータ

子孫セレクタ
子供セレクタ
隣接兄弟セレクタ
一般兄弟セレクタ

コンビネータセレクタを説明しました


CSS生成コンテンツ

contentプロパティを持つ各リンクの後に括弧内のURLを挿入
番号付けセクションおよびサブセクション"Section 1", "1.1", "1.2"など、
引用符プロパティで引用符を指定します


CSSの擬似クラス

ハイパーリンクに異なる色を追加
ハイパーリンクに他のスタイルを追加します。
焦点:の使用
:first-child -第1のp要素にマッチ
:first-child -すべてのp要素内の最初のi要素と一致
:first-child -すべての最初の子p要素内のすべてのi個の要素を一致させます
使用:lang

擬似クラスを説明しました


CSS擬似要素

テキストの最初の文字が特別なものにします
テキストの最初の行は、特別なものにします
最初の文字と、最初の行の特別を作ります
使用:要素の前にいくつかのコンテンツを挿入する前に、
使用:要素の後にいくつかのコンテンツを挿入するようにした後、

擬似要素を説明しました


CSSナビゲーションバー

完全なスタイルの垂直ナビゲーション・バー
完全なスタイルの水平ナビゲーション・バー

ナビゲーションバーは、説明しました


CSSのドロップダウンメニュー

ドロップダウンテキスト
ドロップダウンメニュー
右揃えドロップダウンメニュー
ドロップダウン画像
ドロップダウンナビゲーションバー

ドロップダウンを説明しました


CSSツールチップ

右のツールチップ
左のツールチップ
トップツールチップ
ボトムツールチップ
矢印の付いたツールチップ
アニメーションツールチップ

ツールチップを説明しました


CSSイメージギャラリー

画像ギャラリー
対応する画像ギャラリー

画像ギャラリーを説明しました


CSS画像の不透明度

透明な画像を作成する-マウスオーバー効果を
背景画像上にテキストを透明ボックスを作成します

画像の不透明度を説明しました


CSSイメージスプライト

画像スプライト
画像スプライト-ナビゲーションリスト
ホバー効果の画像スプライト

画像のスプライトを説明しました


CSS属性セレクタ

すべての選択<a>ターゲット属性を持つ要素を
すべての選択<a>ターゲット= "_空白」属性を持つ要素を
「花」であるそのうちの一つの単語のスペース区切りのリストが含まれているtitle属性を持つすべての要素を選択します
始まるクラス属性値を持つすべての要素を選択し"top" (単語全体でなければなりません)
始まるクラス属性値を持つすべての要素を選択し"top" (全単語であってはなりません)
終わるクラス属性値を持つすべての要素を選択し"test"
含まれているクラスの属性値を持つすべての要素を選択し"te"

属性セレクタを説明しました


CSSフォーム

全幅入力フィールド
パッド入りの入力フィールド
フチ入力フィールド
ボトムボーダー入力フィールド
色の入力フィールド
集束入力フィールド
集束入力フィールド2
アイコン/画像と入力
動画検索入力
スタイリングテキストエリア
選択メニューをスタイリング
入力ボタンのスタイル

フォームを説明しました


CSSカウンタ

カウンタを作成します。
ネストされたカウンター1
ネストされたカウンター2

カウンターを説明しました


CSS3角丸

要素に丸みを帯びた角を追加
個別に各コーナーラウンド
楕円形のコーナーを作成します。

CSS3丸みを帯びた角を説明しました


CSS3ボーダー画像

ラウンドキーワードを使用して、要素の周囲に画像の境界線を作成します。
ストレッチキーワードを使用して、要素の周囲に画像の境界線を作成します。
画像境界-別のスライス値

CSS3ボーダー画像を説明しました


CSS3の背景

要素の複数の背景画像を追加
背景画像のサイズを指定します。
「含んで」と「カバー」を使用して、背景画像を拡大縮小
複数の背景画像のサイズを定義します
フルサイズの背景画像(完全にコンテンツ領域を埋めます)
背景画像が配置されている場所を指定するには、背景の原点を使用してください
背景の絵エリアを指定するには、バックグラウンド・クリップを使用します

CSS3の背景を説明しました


CSS3グラデーション

リニアグラデーション-上から下へ
リニアグラデーション-左から右へ
リニアグラデーション-対角線
リニアグラデーション-指定した角度で
リニアグラデーション-複数のカラーストップ付き
リニアグラデーション-虹+テキストの色
リニアグラデーション-透明性
リニアグラデーション-繰り返し直線勾配
放射状グラデーション-等間隔のカラーストップ
放射状グラデーション-異なる間隔を置いたカラーストップ
放射状グラデーション-セット形状
放射状グラデーション-異なるサイズのキーワード
放射状グラデーション-繰り返し放射状グラデーション

CSS3グラデーションを説明しました


CSS3シャドウ効果

シンプルな影の効果
影に色を追加
シャドウにぼかし効果を追加します。
黒い影と白いテキスト
赤いネオングロー影
赤と青のネオングロー影
黒、青、およびDARKBLUE影と白いテキスト
要素にシンプルなボックスシャドウを追加します。
箱型影を色を追加
色を追加し、ボックスシャドウをする効果をぼかし
紙のようなカード(テキスト)を作成します。
紙のようなカード(ポラロイド画像)を作成します。

CSS3の影の効果について説明しました


CSS3のテキスト

隠された、オーバーフローしたコンテンツは、ユーザーに通知する方法を指定
要素の上ときホバー溢れたコンテンツを表示する方法
長い単語が破壊されることができるように許可すると、次の行に折り返さ
改行ルールを指定します

CSS3のテキストが説明しました


CSS3フォント

であなたの"自分"のフォントを使用してください@font-faceルール
であなたの"自分"のフォントを使用し@font-faceルールを(太字)

CSS3フォントを説明しました


CSS3 2Dトランスフォーム

translate() -現在の位置から要素を移動
rotate() -要素を時計回りに回転させます
rotate() -要素を反時計回りに回転させます
scale() -要素を高めます
scale() -要素を減少させます
skewX() - X軸に沿った要素のスキュー
skewY() - Y軸に沿った要素のスキュー
skew() - XおよびY軸に沿った要素のスキュー
matrix() - 、スケールは、移動し、素子を回転するスキュー

CSS3 2Dは説明した変換します


CSS3 3Dトランスフォーム

rotateX() -指定された程度で、そのX軸を中心に要素を回転させます
rotateY() -指定された程度で、そのY軸を中心に要素を回転させます
rotateZ() -指定された程度で、そのZ軸の周りの要素を回転させます

CSS3 3Dを説明トランスフォーム


CSS3トランジション

移行-要素の変化幅
要素の変化幅と高さ-トランジション
移行のために異なる速度曲線を指定します
トランジション効果用の遅延を指定します
トランジションエフェクトに変換を追加
1速記プロパティ内のすべての遷移のプロパティを指定します

CSS3トランジションを説明しました


CSS3アニメーション

要素にアニメーションをバインド
アニメーション-要素の変化の背景色
アニメーション-要素の変化の背景色と位置
アニメーションを遅らせます
それが停止する前に、アニメーションを3回実行します。
永遠にアニメーションを実行します。
逆方向にアニメーションを実行します。
代替サイクルでアニメーションを実行します。
アニメーションの速度曲線
アニメーション簡略記述特性

CSS3アニメーションを説明しました


CSS3の画像

丸みを帯びた画像
丸で囲まれた画像
サムネイル画像
リンクとしてサムネイル画像
対応する画像
画像のテキスト(左上隅)
画像のテキスト(右上)
画像のテキスト(左下隅)
画像のテキスト(右下隅)
画像のテキスト(中心)
ポラロイド画像
グレースケール画像フィルタ
高度な- CSS&JavaScriptでイメージモーダル

CSS3の画像は説明しました


CSS3ボタン

基本的なCSSボタン
ボタンの色
ボタンのサイズ
丸みを帯びたボタン
着色されたボタンの境界線
Hoverableボタン
シャドウボタン
[無効]ボタン
ボタンの幅
ボタングループ
フチボタングループ
アニメーションボタン(ホバー効果)
アニメーションボタン(波及効果)
アニメーションボタン(プレス効果)

CSS3ボタンを説明しました


CSS3ページネーション

シンプルなページネーション
アクティブおよびhoverableページネーション
丸みを帯びたアクティブとhoverableページネーション
Hoverableトランジション効果
フチページネーション
丸みを帯びたボーダーページネーション
リンク間のスペースでページネーション
ページネーションサイズ
リンク間のスペースでページネーション
中心のページネーション
パン粉

CSS3の改ページを説明しました


CSS3複数列

複数の列を作成します。
列の間のギャップを指定します
列間のルールのスタイルを指定します
列間のルールの幅を指定します
列間のルールの色を指定します
列間のルールの幅、スタイル、色を指定
要素は全体またがる列数を指定します
列の提案し、最適な幅を指定します。

CSS3複数の列を説明しました


CSS3のユーザーインターフェイス

ユーザーが要素の幅を変更してみましょう
ユーザーが要素の高さを変更してみましょう
ユーザーが要素の幅と高さの両方のサイズを変更してみましょう
概要と要素の境界線の間のスペースを追加します。

説明CSS3のユーザーインターフェイス


CSS3ボックスサイジング

ボックスサイズ変更のない要素の幅
ボックスサイズを持つ要素の幅
フォーム要素+ボックスサイズ変更

CSS3のボックスのサイズは、説明しました


CSS3フレキシボックス

3フレックスアイテムとフレキシボックス
RTL方向- 3フレックスアイテムとフレキシボックス
フレックス方向-行リバース
フレックス方向-コラム
フレックス方向-コラム-逆
正当化コンテンツを-フレックスの端を
正当化-コンテンツ-センター
正当化-コンテンツ-スペース間
正当化-コンテンツ-スペースアラウンド
ALIGN-アイテム-ストレッチ
ALIGN-アイテムを-フレックススタート
ALIGN-アイテムを-フレックスの端を
ALIGN-アイテム-センター
ALIGN-アイテム-ベースライン
フレックスラップ- NOWRAP
フレックスラップ-ラップ
フレックスラップ-ラップ逆
ALIGN-コンテンツ-センター
フレックスの商品を注文します
マージン右:自動;
マージン:自動; =完璧なセンタリング
フレックス項目に合わせます自己
フレックスアイテムの残りの部分に比べて、フレックス項目の長さを指定します。
フレキシボックスで応答性のウェブサイトを作成します。

CSS3のフレキシボックスを説明しました


CSS3メディアクエリ

ビューポートが480PX全体または広い場合ライトグリーンにする背景色を変更
ビューポートが480PX広いまたは幅が広い場合は、ページの左側にフロートしますメニューを表示します

CSS3メディアクエリを説明しました


CSS3メディアクエリ-その他の例

HTMLページ
520から699pxに幅-各リンクに電子メールアイコンを適用します
700から1000pxの幅-テキストとリンクをはじめ
1001px以上の幅-リンクに電子メールアドレスを適用します。
1151px以上の幅-私たちは前に使用されるようにアイコンを追加します。
Webページのサイドバー上のメールリンクのリストを使用します

CSS3メディアは例を説明問い合わせます