touch-action: manipulation; が聞かない問題

2021-03-10 09:02web

touch-action: manipulation;


確認環境
iPhone X
Safari

manipulationにしてもダブルタップで拡大、縮小されてしまう。
効いてないのと同じである。

nomeにしても、ダブルタップで拡大される。ただし拡大時のダブルタップは無効になっている。

拡大を無効にできない件…

auto
自動（default）
manipulation
ダブルタップ 水平 無効
none
全て無効

touch-action: auto;touch-action: manipulation;touch-action: none;





apple

配色ツール

2021-03-08 15:21web
https://jxnblk.github.io/hello-color/
https://www.palettable.io/

Atom 覚書 参考サイト等

2020-05-15 16:18web
【Atom】作業効率UP！Webデザイナーに特にオススメのパッケージ19選
https://www.kerenor.jp/atom-packages-for-web-designer/

* セレクタは、擬似要素には適用されない。

2020-04-19 08:33webCSS
すべての要素のスタイルを定義する為、*セレクタを使用しますよね。
ですが、これだけでは、擬似要素（before after）には適用されません。

擬似要素（before after）にも適用させるには以下の記述を行います。

CSS
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box
}

Lessで配色を変更する。

2020-04-19 04:32webCSS
Lessで配色を変更する。

lighten(@color, 10%); //明度を@colorより10%明るくdarken(@color, 10%); //明度を@colorより10%暗くsaturate(@color, 10%); //彩度を@colorより10%高くdesaturate(@color, 10%); //彩度を@colorより10%低くfadein(@color, 10%); //透明度を@colorより10％減らすfadeout(@color, 10%); //透明度を@colorより10％増やすfade(@color, 50%); //透明度を@colorの50%にするspin(@color, 10); //色相を@colorより10度大きくspin(@color, -10); //色相を@colorより10度小さくmix(@color1, @color2); //@color1と@color2の配色を混ぜる

Flexbox CSSレイアウトの主力選手

2020-04-14 02:11webCSS
floatやabsoluteにさようなら。
横並び、縦並び、グリット表示、なんでも来いの救世主です。
ブラウザの対応も今なら問題無し。
どんどんflexboxを活用して行きましょう。

flex-direction 子要素の並ぶ向き


row（default）
子要素を左から右に配置
row-reverse
子要素を右から左に配置
column
子要素を上から下に配置
column-reverse
子要素を下から上に配置

flex-direction: row;flex-direction: row-reverse;flex-direction: column;flex-direction: column-reverse;






flex1
flex2
flex3

justify-content 水平方向の揃え


flex-start (default)
行の開始位置から配置。左揃え。
flex-end
行末から配置。右揃え。
center
中央揃え
space-between
最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
space-around
両端の子要素も含め、均等に間隔をあけて配置

justify-content: flex-start;justify-content: flex-end;justify-content: center;justify-content: space-between;justify-content: space-around;







flex1
flex2
flex3

flex-wrap 子要素の折り返し


nowrap (default)
子要素を折り返しせず、一行に並べる。
wrap
子要素を折り返し、複数行に上から下へ並べる。
wrap-reverse
子要素を折り返し、複数行に下から上へ並べる。

flex-wrap: nowrap;flex-wrap: wrap;flex-wrap: center;





flex1
flex2
flex3
flex4
flex5
flex6
flex7

align-items 垂直方向の揃え


stretch（default）
親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置。
flex-start
親要素の開始位置から配置。上揃え。
flex-end
親要素の終点から配置。下揃え。
center
中央揃え。
baseline
ベースラインで揃える。

align-items: stretch;align-items: flex-start;align-items: flex-end;align-items: center;align-items: baseline;
次へ

WEB制作に役立つ情報を発信（関係無い記事もちらほらありますが...）