2020-11-24 1分 read (About 119 words)

iPad向けCSS対応

端末サイズによって font-size を変えたい時、rem を使うと思いますが、意外と rem は万能ではなく、iPad だとかなり小さく見えます。

なので以下のように端末サイズによって分岐して指定した方が良いです。

/* for iPad */
@media screen and (min-width: 768px) {
  html {
    font-size: 1.2rem;
  }
}

/* for iPhone */
@media screen and (max-width: 767px) {
  html {
    font-size: 0.7rem;
  }
}

2020-09-30 数秒 read (About 35 words)

CSSで改行を反映させる方法

CSS で改行を反映させる方法

style="white-space: pre-wrap;"

簡単ですがすぐ忘れちゃうのでメモ。。

2019-11-21 2分 read (About 363 words)

【CSS】特定の要素だけをスクロール禁止にする方法

2019/11/22 追記

一部のスクロールを禁止にするのではなく一部のスクロールのみ許可して他は全て禁止にするという逆転の発想の方が
使い勝手が良かったので紹介します

このライブラリを使うと色々な問題が解決されていい感じでした
https://github.com/willmcpo/body-scroll-lock

Vueならこっちですね
https://github.com/phegman/v-scroll-lock

1	npm install v-scroll-lock

でインストールして、

1 2	import VScrollLock from 'v-scroll-lock' Vue.use(VScrollLock)

すると全画面でスクロールが無効になります
で、スクロールさせたい要素だけ

1	<div v-scroll-lock="true">

のようにするとこの要素だけはスクロールできるようになります

以下、原文

普通スクロール禁止といえば以下を使うのだと思いますが、

1	document.addEventListener('touchmove', function(e) {e.preventDefault();}, {passive: false});

これだと画面全体に効いてしまいます

画面の一部の要素だけをスクロール禁止にするCSSを見つけたのでメモしておきます

1	touch-action: none;

https://caniuse.com/#feat=css-touch-action

caniuseを見るとデスクトップSafari以外は問題なく使えるので導入しても大丈夫ですね！（）

2019-07-12 2分 read (About 279 words)

【Vue.js】ON/OFF スイッチを CSS で自作してみた。

はじめに

ON/OFF スイッチを CSS で自作しました。
コピペで動きます。