CSS 実例大全

CSSテキスト

• テキストの色を設定する

• テキストのアライメント

• テキストのインデント

• テキストの装飾

• 文字間のスペースを設定する

• 単語間のスペースを設定する

• テキスト行間のスペースを設定する

• スペースと改行符を保持する

• 要素内のテキストの改行

• 画像内のテキストの垂直アライメント

CSSフォント

• テキストのフォントを設定する

• フォントサイズを設定する

• フォントスタイルを設定する

• フォントの変体を設定する

• フォントの太字を設定する

• すべてのフォント属性を1つの宣言で設定する-フォントの省略属性

CSSリンク

• リンクの異なる状態のスタイルを設定する

• ハイパーリンクからデフォルトの下線を削除する

• ハイパーリンクから破線の輪郭を削除する

• リンクボックスを作成する

• 画像の反転

CSSリスト

• リスト内でアイテムのリスト記号と番号を指定する

• リストアイテムのマークの場所を設定する

• 画像をリストアイテムのマークとして設定する

• シンプルなドロップダウンメニューを作成する

• すべてのリスト属性を1つの宣言で設定する-リストスタイルのショートカット属性

CSSのテーブル

• テーブルのボーダーを設定する

• テーブルのサイズを指定する

• テーブルのボーダーを折りたたんでより良いテーブルを作成する

• テーブルセル内のテキストの水平アライメントを設定する

• 内容の垂直アライメントを設定する

• 空セルの表示方法を指定する

• テーブルセルのフィルリングを指定する

• テーブルレイアウトアルゴリズムを指定する-自動または固定

• テーブルのタイトルの場所を設定する

CSSの背景

• 要素の背景色を設定する

• 画像を要素の背景として設定する

• 水平または垂直に背景画像を繰り返す

• 背景画像の場所を指定する

• 固定の背景画像は、含まれる要素とともにスクロールしません

• すべての背景属性を一度に設定する-背景のショートカット属性

• 背景画像のサイズを設定する

• 背景のカットを設定する

• 背景の原点を設定する

• 要素に複数の背景を追加する

CSSの単位

• 絶対的な単位（例えばpx、pt、cmなど）を使用する

• 相対的な単位（例えばem、ex、％など）を使用する

CSSのサイズ

• 要素の幅と高さを設定する

• 要素の最大幅と高さを設定する

• 要素の最小幅と高さを設定する

• オーバーフローを制御する

CSSのアライメント

• テキストと内嵌要素がブロック要素内でアライメントする

• マージン属性を使ってブロック要素を中央にアライメントする

• float属性を使って水平に要素をアライメントする

• position属性を使って水平・垂直方向に要素をアライメントする

• 親項目とclear属性がクラッシュするのを防ぐ

• シンプルな水平メニューを作成する

CSSの定位

• ブラウザのウィンドウに対して要素を配置する

• 親要素に対して定位する

• 通常の位置に対して要素を定位する

• zを使って定位する-index属性で重複する要素

CSSの表示

• visibility属性を使って要素を非表示にする

• display属性を使ってDOMから要素を削除する

• 要素をインライン要素として表示する

• 要素をブロック要素として表示する

• テーブル要素を折りたたむ

CSSのボーダーと輪郭

• 要素の周りにボーダーを描画する

• 要素の各辺にボーダーを描画する

• ボーダーに異なるスタイルを設定する

• すべてのボーダー属性を一度に設定する-ボーダーのショートカット属性

• 要素の周りに丸みを帯びた角を作成する

• 画像を使ってボーダーを作成する

• 要素の周りに輪郭を描画する

• 要素の周りにボーダーを描画して周囲の要素に影響を与えない

CSSのマージンとフィルリング

• 要素の各辺のマージンを設定する

• すべてのマージン属性を1つの宣言で設定する-マージンのショートカット属性

• 要素の各辺のフィルリングを設定する

• すべてのフィルリング属性を一度に設定する-フィルリングのショートカット属性

CSSの不透明度

• 要素の透明度を設定する

• 画像の反転効果と透明度

• 透明なフレーム内のテキスト

CSSで生成された内容

• 引用符を指定する

• 自動番号の部分とカテゴリ

• CSSを使って生成された内容を挿入する

CSSのポップクラス

• ハイパーリンクの異なる状態にスタイルを設定する

• ：focusクラスを使ってフォーカス中のフォーム要素にスタイルを設定する

• 使用：first-childクラスは要素の最初の子要素にスタイルを設定する

• 使用：first-child仮想クラスを使用して要素の最後の子要素にスタイルを設定

• 使用：nth-child仮想クラスは要素のnthを設定-childスタイルを設定

• 特定の言語にスタイルを設定するために：lang()仮想クラスを使用

• 仮想クラスとセレクタを一緒に使用

CSS仮想要素

• 使用::first-letter仮想要素を使用して見出し文字を沈める効果を作成

• 使用::first-line仮想要素を使用してテキストの最初の行を異なる方法で設定

• 要素の前にまたは後に内容を挿入するために::beforeまたは::after仮想要素を使用

• クラスに仮想要素を使用

CSS3グラデーション

• 上から下に線形グラデーションを作成

• 左から右に線形グラデーションを作成

• 対角線に沿って線形グラデーションを作成

• 角度を使用して線形グラデーションの方向を設定

• 複数の色標を使用して線形グラデーションを作成

• グラデーションを作成する際に色の位置停止を設定

• 線形グラデーションを繰り返し

• 放射状グラデーションを作成

• 放射状グラデーションの形状を設定

• 放射状グラデーションのサイズを設定

• 放射状グラデーションを繰り返し

• グラデーションに不透明度を使用

CSS3影

• ボックス影効果を作成

• 要素の枠に複数のボックス影を追加

• テキストの影効果を作成

CSS3 2D変換

• translate()メソッドを使用して要素を移動

• rotate()メソッドを使用して要素を回転

• scale()メソッドを使用して要素の大きさを増加または減少

• matrix()メソッドを使用して適用2D変換

• 要素に多重変換を適用

CSS3 3D変換

• translateを使用3d()メソッドを使用して三次元空間で要素を移動

• rotateを使用3d()メソッドを使用して三次元空間で要素を回転

• scaleを使用3d()メソッドを使用して三次元空間で要素を拡大

• matrixを使用3d()メソッドを適用3D変換

• 複数を3D変換を要素に適用

CSS3トランジション

• 背景色にトランジション効果を適用

• 複数の属性にトランジション効果を適用

• すべてのトランジション属性を一度に設定-トランジションエイコーディング属性

CSS3アニメーション

• ウェブページのアニメーション要素

• アニメーションを作成する際にキーフレームを定義

• すべてのアニメーション属性を一度に設定-アニメーションエイコーディング属性

CSS3多列レイアウト

• 多列レイアウトを作成

• 列数や幅を設定

• 列の間のスペースを設定

• 列の間にルールや縦線を追加