KinutaHandicraft - ヒント集 - ヒントだよ！HTML & CSS -

■ CSS その3

{background-colorバックグラウンド-カラー:色;}、背景色を指定する。
{background-imageバックグラウンド-イメージ:画像;}、背景画像を指定する。
{background-repeatバックグラウンド-リピート:繰り返し;}、背景画像の繰り返しを指定する。
{background-positionバックグラウンド-ポジション:位置;}、背景画像を表示する水平・垂直位置を指定する。
{background-attachmentバックグラウンド-アタッチメント:表示位置;}、スクロール時の背景画像の表示方法を指定する。
{background-sizeバックグラウンド-サイズ:表示サイズ;}、背景画像の表示サイズを指定する。
{background-originバックグラウンド-オリジン:基準位置;}、背景画像の基準位置を指定する。
{background-clipバックグラウンド-クリップ:表示領域;}、背景造を表示する領域を指定する。。
{backgroundバックグラウンド:-color -image -repeat -position -attachment -clip -size -origin;}、
背景のプロパティをまとめ指定する。

{mix-blend-modeミックス-ブレンド-モード:混合モード;}、省略。
{background-blend-modeバックグラウンド-ブレンド-モード:混合モード;}、省略。

{isolationアイソレーション:重なり;}、重ね合わせコンテキストの生成を指定する。
各重なり値
- auto:既存の重ね合わせコンテキストを分離しません。
- isolate:新たなコンテキストを作成し、既存のコンテキストから分離すす。

{opacityオパシティ:透明度;}、色の透明度を指定する。
透明度値: 0.0～1.0、0.0=完全な透明、1.0=完全な不透明。

{~~color-adjust~~カラー-アジャスト:表示方法;}、画面を表示する端末に応じた色設定を許可する。
{forced-color-adjustフォースト-カラー-アジャスト:表示方法;}、特定の要素を強制カラーモードから除外する。

{filterフィルター:効果;}、フィルターをかける。
各効果
- none:要素にフィルターを適用しない。
- ぼかし/シャドウ/透明化 → 実行例
  - blut(半径):画像をぼかす。
    pxなどで半径を指定して、すりガラスのようなぼかし効果を加える。
    ※半径に％は使えない。
  - drop-shadow(X Y 距離色):影をつける。
    X = 水平(右)方向の幅(pxなどで指定する)/Y = 垂直(下)方向の幅(pxなどで指定する)/
    距離 = ぼかす距離((pxなどで指定する),0でぼかしなし。
    色 = キーワードなどで色を指定する。
  - opacity(割合):透明化する。0%=完全な透明～^100%=完全な不透明。
- 白黒/セピア/色相/反転 → 実行例
  - grayscale(割合):白黒に変換する。変換の割合= 0%～100%
  - sepia(割合):セピア調にする。0%=元のまま～100%=完全なセピア色。
  - hue-rotate(角度):色相を変更する。色相の角度(deg)で指定する。
  - invent(割合):指定した割合で反転する。
    .0～1、0%～100%で指定する。0%(.0)は反転なし。数値がない場合、100%(1)に相当する反転になる。
- 彩度/明度/コントラスト → 実行例
  - saturate(割合):彩度を指定する。100%未満で彩度が減り、100%を越える値で彩度がはっきりする。
  - brightness(割合):明度を指定する。0％で真っ黒。100％で元の明度。100%以上でより明るくなる。
  - contrast(割合):コントラストを変える。100%で元のコントラスト。100%以上でよりコントラストが強くなる。

{backdrop-filterバックドロップ-フィルター:幅;}、省略。

{プロパティ:linear-gradientライナー-グラディエント:(方向 , 色始点 , 色終点);}、線形のグラデーションを表示する。
→例を表示
- 方向
  - 任意の数値+単位、degなどの任意の単位。
    0degで下から上へ向かうグラデーション。正の値で時計回りに方向が決まる。
  - to top、上に向かうグラデーション
  - to top right、右上の向かうグラデーション
  - to right、右に向かうグラデーション
  - to bottom、下に向かうグラデーション
  - to bottom left、左下に向かうグラデーション
  - to left、左に向かうグラデーション
  - to top left、左上へ向かうグラデーション
- 色キーワード、カラーコード、RGBなどで指定
- 始点、終点 の幅を%などで指定する。
  省略した場合、始点が0%、終点が100%。
  ※始点と終点の間の点も指定可能。

{プロパティ:radial-gradientラジアル-グラディエント:(形状サイズ中心 , 色始点 , 色終点);}、円形のグラデーションを表示する。
→例を表示

{プロパティ:repeating-liner-gradientリピーティング-ライナー-グラディエント:(方向 , 色始点 , 色終点);}、線形のグラデーションを繰り返し表示する。
→例を表示
- 方向、色、始点、終点、linear-gradientに同じ。

{プロパティ:repeating-radial-gradientリピーティング-ラジアル-グラディエント:(形状サイズ中心 , 色始点 , 色終点);}、円形のグラデーションを繰り返し表示する。
→例を表示

{shape-outsideシェイプ-アウトサイド:形状;}、テキストの回り込み形状を指定する。
{shape-marginシェイプ-マージン:幅;}、テキストの回り込みの形状にマージンを指定する。
{shape-image-thresholdシェイプ-イメージ-ショルド:しきい値;}、
テキストの回り込みの形状を画像から抽出する斎野しいき値を指定する。。
{caret-colorキャレット-カラー:色;}、入力蘭の入力位置マーカー(入力キャレッﾄ)の色を指定する。

ボーダーのスタイルを指定する。 →設定例を表示。
- {border-top-styleボーダー-トップ-スタイル:スタイル;}
  {border-right-styleボーダー-ライト-スタイル:スタイル;}
- {border-botom-styleボーダー-ボトム-スタイル:スタイル;}
- {border-left-styleボーダー-レフト-スタイル:スタイル;}
- {border-styleボーダー-スタイル:-top -right -botom -left;}
  - 値が1つ = 全ての辺に適応。
  - 値が2つ = 1つ目が上下、2つ目が左右に適応。
  - 値が3つ = 1つ目が上、2つ目が左右、3つめが下に適応。

ボーダーの幅を指定する → ボーダーの幅の例を見る
- {border-top-widthボーダー-トップ-ウィズ:幅;}
- {border-right-widthボーダー-ライト-ウィズ:幅;}
- {border-botom-widthボーダー-ボトム-ウィズ:幅;}
- {border-left-widthボーダー-レフト-ウィズ:幅;}
- {border-widthボーダー-ウィズ:幅;}
  - 値が1つ = 全ての辺に適応。
  - 値が2つ = 1つ目が上下、2つ目が左右に適応。
  - 値が3つ = 1つ目が上、2つ目が左右、3つめが下に適応。

ボーダーの色を指定する
- {border-top-colorボーダー-トップ-カラー:幅;}
- {border-right-colorボーダー-ライト-カラー:色;}
- {border-botom-colorボーダー-ボトム-カラー:色;}
- {border-left-colorボーダー-レフト-カラー:色;}
- {border-colorボーダー-カラー:-top -right -botom -left;}
  - 値が1つ = 全ての辺に適応。
  - 値が2つ = 1つ目が上下、2つ目が左右に適応。
  - 値が3つ = 1つ目が上、2つ目が左右、3つめが下に適応。

ボーダーをまとめて指定する
- {border-topボーダー-トップ:-style -width -color;}
- {border-rightボーダー-ライト:-style -width -color;}
- {border-botomボーダー-ボトム:-style -width -color;}
- {border-leftボーダー-レフト:-style -width -color;}
- {borderボーダー:-style -width -color;}

{border-block-start-style-ブロック-スタート-スタイル:スタイル;}、省略。
{border-block-end-styleボーダー-ブロック-エンド-スタイル:スタイル;}、省略。
{border-inline-start-styleボーダー-インライン-スタート-スタイル:スタイル;}、省略。
{border-inline-end-styleボーダー-インライン-エンド-スタイル:スタイル;}、省略。
{border-block-styleボーダー-ブロック-スタイル:スタイル;}、省略。
{border-inline-styleボーダー-インライン-スタイル:スタイル;}、省略。
{border-block-start-widthボーダー-ブロック-スタート-ウィズ:スタイル;}、省略。
{border-block-end-widthボーダー-ブロック-エンド-ウィズ:幅;}、省略。
{border-inline-start-widthボーダー-インライン-スタート-ウィズ:幅;}、省略。
{border-inline-end-widthボーダー-ブロック-エンド-ウィズ:幅;}、省略。
{border-block-widthボーダー-ブロック-ウィズ:幅;}、省略。
{border-inline-widthボーダー-インライン-ウィズ:幅;}、省略。
{border-block-colorボーダー-ブロック-スタート-カラー:幅;}、省略。
{border-block-colorボーダー-ブロック-エンド-カラー:色;}、省略。
{border-inline-colorボーダー-インライン-スタート-カラー:色;}、省略。
{border-inline-colorボーダー-インライン-エンド-カラー:色;}、省略。
{border-block-colorボーダー-ブロック-カラー:色;}、省略。
{border-inline-colorボーダー-インライン-カラー:色;}、省略。
{border-block-startボーダー-ブロック-スタート:-style -width -color;}、省略。
{border-block-endボーダー-ブロック-エンド:-style -width -color;}、省略。
{border-inline-startボーダー-インライン-スタート:-style -width -color;}、省略。
{border-inline-endボーダー-インライン-エンド:-style -width -color;}、省略。
{border-blockボーダー-ブロック:-style -width -color;}、省略。
{border-inlineボーダー-インライン:-style -width -color;}、省略。

ボーダーの角丸を指定する
- {border-top-left-radiusボーダー-トップ-レフト-ラディウス:角丸の半径;}
- {border-top-right-radiusボーダー-トップ-ライト-ラディウス:角丸の半径;}
- {border-bottom-right-radiusボーダー-トップ-ライト-ラディウス:角丸の半径;}
- {border-bottom-left-radiusボーダー-トップ-レフト-ラディウス:角丸の半径;}
- {border-radiusボーダー-ラディウス:top-left top-right bottom-right bottom-left;}
  - 値が1つ = 全ての角に適応。
  - 値が2つ = 1つ目が左右上角、2つ目が左右下角に適応。
  - 値が3つ = 1つ目が左上角、2つ目が右上角と左下角、3つめが右下角に適応。

{border-image-sourceボーダー-イメージ-ソース:画像;}、ボーダーに利用する画像を指定する。
{border-image-widthボーダー-イメージ-ウィズ:幅;}、ボーダーに利用する画像の幅を指定する。
- 値が4つ : 上、右、下、左
- 値が3つ : 1つ目=上、2つ目=左右、3つ目=下
- 値が2つ： 1つ目=上下、2つ目=左右
- 値が1つ: 全ての辺に適用
{border-image-sliceボーダー-イメージ-スライス:分割位置;}、ボーダー画像の分割位置を指定する。
- 値が4つ : 上、右、下、左
- 値が3つ : 1つ目=上、2つ目=左右、3つ目=下
- 値が2つ： 1つ目=上下、2つ目=左右
- 値が1つ: 全ての辺に適用
{border-image-repateボーダー-イメージ-リピート:繰り返し;}、ボーダー画像の繰り返しを指定する。
{border-image-outsetボーダー-イメージ-アウトセット:サイズ;}、ボーダー画像の領域を広げるサイズを指定する。
{border-imageボーダー-イメージ:-source -slice -width -outset -repeat;}、ボーダー画像をまとめて指定する。

{accent-colorアクセント-カラー:色;}、ユーザーインターフェース要素のアクセントカラーを設定する。

{widthウィズ:幅;}、ボックスの幅を指定する。
{heightハイト:高さ;}、ボックスの高さを指定する。

{max-widthマック-ウィズ:幅;}、省略。
{max-heightマック-ハイト:高さ;}、省略。
{min-widthミニマム-ウィズ:幅;}、省略。
{min-heightミニマム-ハイト:高さ;}、省略。
{max-block-sizeマックス-ブロック-サイズ:幅・高さ;}、省略。
{max-inkine-sizeマックス-インライン-サイズ:幅・高さ;}、省略。
{min-block-sizeミニマム-ブロック-:幅・高さ;}、省略。
{min-inkine-sizeミニマム-インライン-:幅・高さ;}、省略。

ボックスのマージンの幅を指定する → マージンの例を見る
- {margin-topマージン-トップ:幅;}
- {margin-rightマージン-ライト:幅;}
- {margin-bottomマージン-ボトム:幅;}
- {margin-leftマージン-レフト:幅;}
- {marginマージン:-top -right -botom -left;}
  - 値が1つ:全ての辺に適応
  - 値が2つ:1つ目が上下、2つ目が左右
  - 値が3つ:1つ目が、2つ目が左右、3つ目が下

ボックスのパディングの幅を指定する → パディングの例を見る
- {padding-topパッディング-トップ:幅;}
- {padding-rightパッディング-ライト:幅;}
- {padding-bottomパッディング-ボトム:幅;}
- {padding-leftパッディング-レフト:幅;}
- {paddingパッディング:-top -right -botom -left;}
  - 値が1つ:全ての辺に適応
  - 値が2つ:1つ目が上下、2つ目が左右
  - 値が3つ:1つ目が、2つ目が左右、3つ目が下

{margin-block-startマージン-ブロック-スタート:幅;}、省略。
{margin-block-endマージン-ブロック-エンド:幅;}、省略。
{margin-inline-startマージン-インライン-スタート:幅;}、省略。
{margin-inline-endマージン-インライン-エンド:幅;}、省略。
{margin-blockマージン-ブロック:-start -end;}、省略。
{margin-inlineマージン-インライン:-start -end;}、省略。
{padding-block-startパッディング-ブロックー-スタート:-start -end;}、省略。
{padding-block-endパッディング-ブロックー-エンド:幅;}、省略。
{padding-inline-startパッディング-インライン-スタート:幅;}、省略。
{padding-inline-startパッディング-インライン-スタート:幅;}、省略。
{padding-inline-endパッディング-インライン-end:幅;}、省略。
{padding-blockパッディング-ブロック:-start -end;}、省略。
{padding-inlineパッディング-インライン:-start -end;}、省略。

{overflow-xオーバーフロー-エックス:表示方法;}、ボックスに収まらない内容の表示方法を指定する。
{overflow-yオーバーフロー-ワイ:表示方法;}、ボックスに収まらない内容の表示方法を指定する。
{overflowオーバーフロー:-x -y;}、ボックスに収まらない内容の表示方法をまとめて指定する。。

{outline-styleアウトライン-スタイル:スタイル;}、
ボックスのアウトラインのスタイルを指定する。 → アウトラインのスタイルの例を見る
{outline-widthアウトライン-ウィズ:幅;}、ボックスのアウトラインの幅を指定する。
{outline-colorアウトライン-カラー:色;}、ボックスのアウトラインの色を指定する。
{outlineアウトライン:-style -width -color;}、ボックのアウトラインをまとめて指定する。
{outline-offsetアウトライン-オフセット:間隔;}、アウトラインとボーだの間隔を指定する。。

{resizeリサイズ:サイズ変更の可否;}、ボックスのサイズの変更の可否を指定する。