画面サイズに対応できるレスポンシブ

メモ

・ウィンドウサイズで画像を切り替える
<picture>
<source media=”(min-width: 1024px)” srcset=”1024.jpg” />
<source media=”(min-width: 768px)” srcset=”768.jpg” />
<img srcset=”375.jpg” />
</picture>

・画面解像度で画像を切り替える
<img src=”375.jpg” srcset=”375.jpg 1x, 1024.jpg 2x” />

・ウィンドウサイズで画像を切り替える
<img src=”768.jpg” srcset=”1024.jpg 1024w,768.jpg 768w,375.jpg 375w” >
※Chromeで上手く動かない。。。

・ウィンドウサイズでの切り替えと、画面解像度での切り替えを組み合わせる
<picture>
<source media=”(min-width: 1024px)” srcset=”1024.jpg 1x,2048.jpg 2x” />
<source media=”(min-width: 768px)” srcset=”768.jpg 1x,1536.jpg 2x” />
<img srcset=”375.jpg” />
</picture>

flexboxメモ

#flex-container {width:550px; margin:100px auto; box-sizing:border-box; background:#eee; display: flex;justify-content:space-between; flex-direction: row; flex-wrap: wrap; }
.box { width:100px; height:50px; box-sizing:border-box; border:1px solid red; text-align:center; padding-top:12px;}
1
2
3
4
5
6
7
#flex-container2 {width:550px; margin:100px auto; box-sizing:border-box; background:#eee; display: flex-direction: row; flex-wrap: wrap; }
.box { width:100px; height:50px; box-sizing:border-box; border:1px solid red; text-align:center; padding-top:12px;}
1
2
3
4
5
6
7

CSS3で合成効果

参考:CSS3で合成効果 | スターフィールド株式会社

  • mix-blend-mode: normal;
    「通常」
  • mix-blend-mode: multiply;
    「乗算」
  • mix-blend-mode: screen;
    「スクリーン」
  • mix-blend-mode: overlay;
    「オーバーレイ」
  • mix-blend-mode: darken;
    「比較(暗)」
  • mix-blend-mode: lighten;
    「比較(明)」
  • mix-blend-mode: color-dodge;
    「覆い焼きカラー」
  • mix-blend-mode: color-burn;
    「焼き込みカラー」
  • mix-blend-mode: hard-light;
    「ハードライト」
  • mix-blend-mode: soft-light;
    「ソフトライト」
  • mix-blend-mode: difference;
    「差の絶対値」
  • mix-blend-mode: exclusion;
    「除外」
  • mix-blend-mode: hue;
    「色相」
  • mix-blend-mode: saturation;
    「彩度」
  • mix-blend-mode: color;
    「カラー」
  • mix-blend-mode: luminosity;
    「輝度」