便利なCSS

Byonose

背景関係

背景画像の指定

CSSで必ず実装すること。htmlでもbodyタグにbackground属性を直接指定すれば実装できたがHTML5で廃止されているので。使うべきでない。
※古いサイトではhtmlで実装されてる可能性があるので覚えておく。

よく使いそうな物だけ記載、他は以下リンク先で調べる

https://magazine.techacademy.jp/magazine/8610

画像を指定

background-image: url(“画像ファイルへのパス”);

繰り返し画像指定

background-repeat:

  • repeat：背景画像を縦方向、横方向双方に繰り返し表示する（初期値）
  • repeat-x：背景画像を横方向に繰り返し表示する
  • repeat-y：背景画像を縦方向に繰り返し表示する
  • no-repeat：背景画像を繰り返さず1つだけ表示する

背景の基準位置

background-origin:

  • border-box：背景画像は枠線領域の左上を起点とします
  • padding-box：背景画像はパディングの左上を起点とします（初期値）
  • content-box：背景画像はコンテンツ領域の左上を起点とします

背景のスクロール固定

background-attachment

  • scroll：背景はスクロールします
  • fixed：背景はスクロールしても固定されます

背景斜め線

background: linear-gradient(-25deg, pink 50%, skyblue 0);

二色で区切って斜め、線の角度はdeg
https://sinpe-pgm.com/howto-bg-linergradient

グラデーション

よく見る表現、棒状はよく使う

  • linear-gradient()                     ：棒状のグラデーション
  • repeating-linear-gradient()  ：棒状のグラデーション 繰り返し
  • radial-gradient()                     ：円状のグラデーション
  • repeating-radial-gradient()  ：円状のグラデーション 繰り返し
  • conic-gradient()                      ：放射線状のグラデーション
  • repeating-conic-gradient()   ：放射線状のグラデーション 繰り返し

https://magazine.techacademy.jp/magazine/8610

類似投稿