■ ヒントになるのか？HTML ■

    topへ     序     HTML     CSS     表計算利用     ファイル     色指定     ソフト/機材     参考書など     単位     記号の例

    CSS基本     その1     その2     その3     その4     その5     その6

■ 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アイソレーション:重なり;}、省略。
• {opacityオパシティ:透明度;}、省略。

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

• {filterフィルター:効果;}、省略。
• {backdrop-filterバックドロップ-フィルター:幅;}、省略。
• {プロパティ:linear-gradientライナー-グラディエント:(方向 , 色 始点 , 色 終点);}、省略。
• {プロパティ:radial-gradientラジアル-グラディエント:(形状 サイズ中心 , 色 始点 , 色 終点);}、省略。
• {プロパティ:repeating-liner-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リサイズ:サイズ変更の可否;}、ボックスのサイズの変更の可否を指定する。

    CSS基本     その1     その2     その3     その4     その5     その6

    topへ     序     HTML     CSS     表計算利用     ファイル     色指定     ソフト/機材     参考書など     単位     記号の例