CSS 構文
要素セレクタ
id セレクタ
クラスセレクタ（全要素）
クラスセレクタ（<p>のみ）
グループ化セレクタ
CSS 背景
ページの背景色設定
異る要素の背景色設定
ページの背景に画像設定
横方向にだけの背景画像繰返し
背景画像の配置方法
固定した背景画像(画像はスクロールしません)
全 background プロパティを1回の宣言で行う
詳細な背景設定の例
CSS ボーダー
4つのボーダーの幅を設定
上ボーダーの幅を設定
下ボーダーの幅を設定
左ボーダーの幅を設定
右ボーダーの幅を設定
4つのボーダーのスタイルを設定
上ボーダーのスタイルを設定
下ボーダーのスタイルを設定
左ボーダーのスタイルを設定
右ボーダーのスタイルを設定
4つのボーダーの色を設定
上ボーダーの色を設定
下ボーダーの色を設定
左ボーダーの色を設定
右ボーダーの色を設定
全てのborderプロパティを1回の宣言で設定
各辺に異るボーダーを設定
全ての top border プロパティを1回の宣言で設定
全ての bottom border プロパティを1回の宣言で設定
全ての left border プロパティを1回の宣言で設定
全ての right border プロパティを1回の宣言で設定
CSS マージン
要素の各サイドに異なるマージンを指定
親要素から左マージンを継承する
margin ショートハンド・プロパティ
要素をコンテナの中央に配置するためにマージンを auto に設定
CSS パディング
要素の左パディング設定
要素の右パディング設定
要素の上パディング設定
要素の下パディング設定
全ての padding プロパティを1回の宣言で設定
CSS テキスト
いろいろな要素のテキスト色設定
テキストの位置揃え
リンクの下線削除
テキストの装飾
テキスト文字を制御
テキストのインデント
文字間のスペース指定
行間のスペース指定
要素のテキスト方向設定
単語間のスペース量を増分
要素内のテキストの折返しを禁止
テキスト内における画像の縦位置揃え
CSS フォント
テキストへフォント設定
フォントサイズ設定
px でフォントサイズ設定
em でフォントサイズ設定
パーセントと em でフォントサイズ設定
フォントのスタイル設定
font-variant（small-caps）の設定
フォントの太さを設定
font プロパティを1回の宣言で行う
CSS リンク
既読/未読リンクに異なる色を設定
リンクにtext-decorationを使用
リンクに背景色を指定
ハイパーリンクに別なスタイルを設定
高度 - リンクボックスの作成
CSS リスト
リストの全て異るリスト項目マーカを表示
リスト項目マーカに画像を設定
リスト項目マーカの配置
全listプロパティを1回の宣言で行う
色によるリストのスタイル
全幅のボーダー付きリスト
CSS テーブル
table、th、td 要素へ黒色のボーダーを指定
border-collapse の指定
Single border around the table
テーブルの幅と高さを指定
コンテントの横位置揃え((text-align)を設定
コンテンツの縦位置揃え(vertical-align)を設定
th、td要素へパディングを指定
横罫線
ホバー機能付きテーブル
ストライプ付きテーブル
テーブル・ボーダーの色を指定
テーブル表題の位置指定
レスポンシブ・テーブル
装飾的なテーブルを作成
CSS ボックスモデル
CSS アウトライン
要素の周りに線を描く(アウトライン)
アウトラインのスタイルを設定
アウトラインの色を設定
アウトラインの幅を設定
CSS ディメンジョン
要素の高さと幅を設定
要素の max-width を設定
いろいろな要素の高さと幅を設定
パーセントを用いて画像の高さと幅を設定
要素の最小幅と最大幅を設定
要素の最小の高さと最大の高さを設定
CSS ディスプレイ
要素を非表示にする方法 (visibility:hidden)
要素を非表示にする方法(display:none)
インライン要素として要素を表示する方法
ブロック要素として要素を表示する方法
非表示コンテンツを表示するため CSS と JavaScript を一緒に使う方法
CSS ポジション
ブラウザウィンドウへの相対的な要素の配置
通常位置への相対的な要素の配置
絶対値による要素の配置
要素のオーバラップ
要素の形状を設定
要素のコンテンツが大き過ぎてはみ出る場合のスクロールバー作成方法
オーバーフロの自動的処理をブラウザに設定する方法
ピクセル値を使用して画像の上端を設定
ピクセル値を使用して画像の下端を設定
ピクセル値を使用して画像の左端を設定
ピクセル値を使用して画像の右端を設定
カーソルの変更
CSS フローティング
float プロパティの簡単な使用
段落の右にフロートするボーダーとマージンを持つ画像
右にフロートするキャプション付き画像
段落の最初の文字を左にフロートする
floatプロパティによるイメージギャラリーの作成
フロートの解除（clear プロパティによる）
水平メニューの作成
テーブルを使用しないホームページの作成
CSS 要素の整列
マージンによる中央揃え
ポジションによる左/右揃え
ポジションによる左/右揃え - クロスブラウザ ソリューション
フロートによる左/右揃え
フロートによる左/右揃え - クロスブラウザ ソリューション
CSS コンビネータ
子孫セレクタ
子セレクタ
隣接兄弟セレクタ
一般兄弟セレクタ
CSS 生成コンテンツ(Generated Content)
contentプロパティによる各リンクの後に括弧付きのURLを挿入
"Section 1"、"1.1"、"1.2" などでセクションとサブセクションに付番
quotesプロパティにより引用符を指定
CSS 生成コンテンツ
CSS 擬似クラス
ハイパーリンクに異る色を追加
ハイパーリンクに別なスタイルを追加
:focusの使用
:first-child - 最初の p 要素にマッチ
:first-child - 全p要素の最初のiにマッチ
:first-child - 全ての最初の子p要素の全i要素にマッチ
:langの使用
CSS 擬似要素
テキストの先頭文字に特殊効果を設定
テキストの先頭行に特殊効果を設定
テキストの先頭文字と先頭行に特殊効果を設定
要素の前にコンテンツを挿入するため:beforeを使用
要素の後にコンテンツを挿入するため:afterを使用
CSS ナビゲーションバー
完全にスタイル設定済みの縦のナビゲーションバー
完全にスタイル設定済みの横のナビゲーションバー
CSS ドロップダウン
ドロップダウン・テキスト
ドロップダウン・メニュー
右揃えのドロップダウン・メニュー
ドロップダウン・イメージ
ドロップダウン・ナビゲーションバー
CSS ツールチップ
右表示のツールチップ
左表示のツールチップ
上表示のツールチップ
下表示のツールチップ
矢印付きツールチップ
アニメ付きツールチップ
CSS イメージギャラリ
レスポンシブ・イメージギャラリCSS 画像の不透明度
透明な画像の作成 - マウスオーバ効果
背景画像上にテキスト付きの透明なボックスを作成
CSS イメージスプライト
イメージスプライト
イメージスプライト - ナビゲーションリスト
ホバー効果付きのイメージスプライト
CSS 属性セレクタ
target属性を持つ全<a>要素を選択
target="_blank"属性を持つ全<a>要素を選択
スペース区切りの単語のうち、その1つが"flower"である
リストを含むtitle属性を持つ全要素を選択
"top"（単語全体）で始まるクラス属性値を持つすべての要素を選択
"top"（単語全体でない）で始まるクラス属性値を持つすべての要素を選択
"test"で終るクラス属性値を持つすべての要素を選択
"te"を含むクラスの属性値を持つすべての要素を選択
CSS フォーム
全体幅の入力フィールド
パディング付き入力フィールド
ボーダー付き入力フィールド
下ボーダー付き入力フィールド
色付き入力フィールド
フォーカス付き入力フィールド
フォーカス付き入力フィールド 2
アイコン/画像付き入力
アニメ付き検索入力
テキストエリアのスタイル
セレクト・メニューのスタイル
入力ボタンのスタイル
CSS カウンタ
CSS3 角丸
要素のコーナーに丸みを加える
各コーナー別々に丸みを加える
楕円形のコーナーを作成
CSS3 ボーダー・イメージ
round キーワードを用い、要素の周りに画像ボーダーを作成
stretch キーワードを用い、要素の周りに画像ボーダーを作成
画像ボーダー - いろいろな slice 値
CSS3 背景
要素に複数の背景画像を追加する
背景画像のサイズを指定
"contain" と "cover" を使用して背景画像を拡大縮小する
複数の背景画像サイズを定義
フルサイズの背景画像 (コンテンツエリアを完全にいっぱいにする)
背景画像の配置場所を指定するため background-origin を使用する
背景の描画エリアを指定するために background-clip を使用する
CSS3 グラデーション
線形グラデーション - 上から下
線形グラデーション - 左から右
線形グラデーション - 斜め
線形グラデーション - 指定の角度を持つ
線形グラデーション - 複数のカラーストップを持つ
線形グラデーション - 虹色+テキスト
線形グラデーション - 透明度付き
線形グラデーション - 線形グラデーションの繰返し
円形グラデーション - 等間隔のカラーストップ
円形グラデーション - 異なる間隔のカラーストップ
円形グラデーション - 形状の設定
円形グラデーション - いろいろなサイズキーワード
円形グラデーション - 円形グラデーションの繰返し
CSS3 影による効果
簡単な影による効果
影に色を追加する
影にぼかし効果を追加する
黒い影付きの白いテキスト
赤いネオンの輝きの影
赤と青のネオンの輝きの影
黒、青、濃青色の影付きの白いテキスト
要素に簡単な box-shadow を追加
box-shadow に色を追加
box-shadow に色とぼかし効果を追加
CSS3 テキスト
非表示、オーバフローコンテンツをユーザへ通知すべき方法の指定
要素の上に乗せた時のオーバフロー・コンテンツの表示方法
長い単語を分割して次の行にラップできるようにする
改行ルールを指定する
CSS3 フォント
@font-face 規則で"自分"のフォントを使用
@font-face 規則で"自分"のフォントを使用(太字)
CSS3 2D 変形
translate() - 現在の位置から要素を移動
rotate() - 時計回りに要素を回転
rotate() - 反時計回りに要素を回転
scale() - 要素を拡大
scale() - 要素を縮小
skewX() - X軸に沿い要素を傾斜
skewY() - Y軸に沿い要素を傾斜
skew() - X,Y軸に沿い要素を傾斜
matrix() - 要素の回転、スケール、移動、傾斜
CSS3 3D 変形
rotateX() - 指定の度数でXｰ軸を中心に要素を回転
rotateY() - 指定の度数でY-軸を中心に要素を回転
CSS3 トランジション
トランジション - 要素の幅の変更
トランジション - 要素の幅と高さの変更
トランジションに様々な速度曲線を指定する
トランジション効果に遅延を指定する
トランジション効果に変形を追加する
1回で全 transition プロパティを指定するショートハンドプロパティ
CSS3 アニメーション
要素にアニメーションをバインド
アニメーション - 要素の背景色を変更
アニメーション - 要素の背景色と位置を変更
アニメーションの遅延
停止前にアニメーションを3回実行
永久にアニメーションを実行
逆方向にアニメーションを実行
交互のサイクルでアニメーションを実行
アニメーションの速度曲線
アニメーションのショートハンドプロパティ
CSS3 画像
角丸画像
円形画像
サムネイル画像
サムネイル画像のリンク
レスポンシブ・イメージ
画像テキスト (左上隅)
画像テキスト (右上隅)
画像テキスト (左下隅)
画像テキスト (右下隅)
画像テキスト (中央)
ポラロイド画像
グレースケール画像フィルタ
高度 - CSS と JavaScript による画像モーダル
CSS3 ボタン
基本的な CSS ボタン
ボタンの色
ボタンのサイズ
角丸ボタン
色付きのボタン・ボーダー
ホバー機能付きボタン
影付きボタン
無効なボタン
ボタンの幅
ボタン・グループ
ボーダー付きボタン・グループ
アニメ付きボタン (ホバー効果)
アニメ付きボタン (リップル効果)
アニメ付きボタン (Pressed 効果)
CSS3 ページネーション
簡単なページネーション
アクティブでホバー効果を持つページネーション
角丸のアクティブでホバー効果を持つページネーション
ホバー効果を持つトランジション効果
ボーダー付きページネーション
角丸のボーダー付きページネーション
リンクの間に空白のあるページネーション
ページネーション・サイズ
中央揃えのページネーション
パンくずリスト
CSS3 段組み
段組みの作成
段の間隔を指定
段の間の罫線のスタイルを指定
段の間の罫線の幅を指定
段の間の罫線の色を指定
段の間の罫線の幅、スタイル、色を指定
要素がまたがる段数を指定
段に示される最適幅を指定
CSS3 ユーザインタフェース
ユーザに要素の幅を変更させる
ユーザに要素の高さを変更させる
ユーザに要素の幅と高さを変更させる
要素のアウトラインとボーダー間にスペースを追加する
CSS3 ボックスサイズ
box-sizing なしの要素の幅
box-sizing による要素の幅
フォーム要素 + box-sizing
CSS3 フレキシブルボックス
3つのフレックス項目を持つフレキシブルボックス
3つのフレックス項目を持つフレキシブルボックス - rtl 方向
flex-direction - row-reverse
flex-direction - column
flex-direction - column-reverse
justify-content - flex-end
justify-content - center
justify-content - space-between
justify-content - space-around
align-items - stretch
align-items - flex-start
align-items - flex-end
align-items - center
align-items - baseline
flex-wrap - nowrap
flex-wrap - wrap
flex-wrap - wrap-reverse
align-content - center
フレックス項目の順序
Margin-right:auto;
Margin:auto; = 完全な中央揃え
フレックス項目の align-self
残りのフレックス項目を基準に、フレックス項目の長さを指定
レキシブルボックスを使用して web サイトを作成
CSS3 メディア・クエリ
ビューポートの幅が 480px 以上の場合、背景色をライトグリーン変える
ビューポートの幅が 480px 以上の場合、ページの左にフロートするメニューを表示
CSS3 メディア・クエリ - 他の例
HTML ページ
幅が 520 ～ 699px - 各リンクに email アイコンを適用
幅が 700 ～ 1000px - テキスト付きリンクで始める
幅が 1001px 以上 - リンクに email アドレスを適用
幅が 1151px 以上 - 前に使用したアイコンを追加する
web ページのサイドバーに email リンクの一覧を使用する