ムカデノワラジ

ムカデノワラジ

ガジェット・Webサービス・プログラミング・エンタメについて書く雑記ブログ

MENU

CSSのメモ

1.cssのグラデーションを使って画像の上に半透明の色を乗せる方法

 

画像の上に半透明の色を乗せるやり方がbeforeを使っていたりとややわかりづらかったので自分なりにやってみた。

 

 

  • グラデーションは開始位置と終了位置が指定できる
  • 同じ色・透明度の場合はグラデーション変化しない

ので

class名{
background: linear-gradient(90deg,rgba(255, 255, 255,0.7) 0%,rgba(255,255,255,0.7) 100%),url("https://,,,,,,,,,/image.png");
background-position: center bottom;
background-size:100% auto;
background-repeat: no-repeat;

}

liner-gradient   グラデーション

90deg   グラデーションの向き

rgba   色(rgb)と透明度(a) 半角スペースの後ろに数字+%でグラデーションの位置を修正できる。

url   画像の場所

 

 2.  画像を左、文字を右に横並びに配置する方法1

画像側のdivにfloat:leftを使う

文字の入っているdivにoverflow: auto を適用すると長い文章が画像の下に回り込まなくなる。

 

3.media query

レスポンシブ対応に使う。

画面の種類(画面、テレビ、スマホなど)に合わせてレイアウトを変えるときに使う。

案外めんどくさい。

この数字にすれば大丈夫、という風に決まった数値がないからあれこれ試さないといけない。

 

すこし手間だがjava scriptを利用して画面の大きさに対する比を一定に保つようにすると便利。

bootstrapだけでは出来なかったり、うまくいかなかったりするようなところに手が届く。