カテゴリー
css 開発関連

Androidでのスクロール制御

いつもの100vhおもてたよりおっきい問題を忘れない

シーン遷移がバグってたので自戒のためメモ

シーン遷移が途中で止まっていて、なんでやろーと思って調べたらうっかりjs内でもcss内でも100vhで画面吸着シーン制御してた。
シーンのinnerの内容が画面に内に収まってるのに100vh影響でwindow.heightをdivのclientHeightが超えて、シーン内のコンテンツ溢れててスクロールがあるみたいっすよ?と判定がおかしくなってた。 JavaScriptで画面サイズを取得・変更する方法 | UX MILK
https://uxmilk.jp/28500 スマホで100vhが見切れる問題の解決方法3つ – ゴリラドット
https://gorilla.dododori.com/972/

逆にhtmlにsetした変数–vhの値をトリたければgetPropertyValueする。(今回上フリック時に一瞬iOSでwindow.innerHeightが変わっていたので、–vhをつこた) CSSStyleDeclaration.getPropertyValue() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/CSSStyleDeclaration/getPropertyValue
//--vh更新タイミングの調整(過去案件より)
//resizeで判定だとファーストビューから移動したときも毎度発動するのでガクガクする→回転もチェック
//orientationchangeで判定だと回転前の数値が取れる&Androidがおかしい→resizeの中で回転を判定する
window.addEventListener('resize', function() {
    if (Math.abs(window.orientation) !== orientation) {
    fixViewHeightForVideo();
    orientation = Math.abs(window.orientation);
}

あと上フリックがやりづらいとのことだったのでCSSでpull-down-to-refreshを無視させた

How to prevent pull-down-to-refresh in Mobile Chrome? – The Web Dev
https://thewebdev.info/2021/10/09/how-to-prevent-pull-down-to-refresh-in-mobile-chrome/

body だけじゃなくて htmlにもcssかけないと効かないのでお気をつけあれ。 Android の Chrome の Pull To Refresh (画面下方向へスワイプさせ、コンテンツを縦方向にオーバースクロールするとリロードするアレ) を無効化する方法 | かきしちカンパニー Web Magazine
https://www.webmagazine.kakisiti.co.jp/?p=666 overscroll-behavior-y – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior-y

CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック | コリス
https://coliss.com/articles/build-websites/operation/css/prevent-scroll-chaining-overscroll-behavior.html

おまけ

シーンのinnerの内容が画面に内に収まってないときのスクロールしきったかの判定がサンプルコードに。scrollHeightべんり。こういうのあるから画面吸着シーンって嫌い。(しかも負の方向に移動してるときはまた別の判定が必要という・・・)

Element.scrollHeight – Web API | MDN

https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight



全然関係ないけど今見たら管理画面では入ってるwp:paragraphがフロントでは消えてる・・・。きっっも。また時間できたら調べよ
カテゴリー
css 開発関連

わくわくは大事よ

僕がネイティブなCSS変数にわくわくする理由
https://terkel.github.io/why-im-excited-about-native-css-variables/   あ、ついでに追記 How do I apply opacity to a CSS color variable? – Stack Overflow
https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable
カテゴリー
css 開発関連

2021年1月 最近の仕事でのSVG圧縮とかコンポーネント化とか

大量の一括圧縮

SVGO

中身をトランジションとかアニメーションとかさせない、imgとか背景として置く場合。
ターミナルでディレクトリに移動して一括でたったくよ。
BigSurにしたらSVGO-GUIが動かなくなたので本家SVGOに変更
svgを軽量化してくれるsvgoの使い方 – Qiita
https://qiita.com/macotok/items/ea1db2687d0979fab9d6 svg/svgo: Node.js tool for optimizing SVG files
https://github.com/svg/svgo
カテゴリー
css 開発関連

CSS Grid苦手意識を克服する

プロパティとかお作法とか なんどやっても覚えないから急いでたらflex使いがち問題を今更どうしようかなって  

ジェネレーターでええやん

Interactive CSS Grid Generator | Layoutit Grid
https://grid.layoutit.com/ 直感的にグリッド(子要素)作って、class名つけて、sassにコピペするだけ。

gridジェネレーターサイトつかえば何も覚えなくてよかった

  べんりね・・・世の中・・・ありがとう開発者
カテゴリー
css

font-familyの旅2020

特定端末でメイリオや游ゴシックがジャギるんだよね〜って相談の流れで
デザイナーさんにもらったURLが良心と技術の玉手箱、ICSさんだった。

以前巷に溢れてた感じから結構変わってるからメモ。用法用量は案件のプライオリティに合わせて。
このあたりも毎年見直したほうがいいのかもしれない(やること増え続けるね〜

2020年に最適なfont-familyの書き方 – ICS MEDIA
https://ics.media/entry/200317/

カテゴリー
css

【IE11】flex-growは個別で指定するなとあれほど言っただろ?【忘れて自爆】

IE11でflexboxの縦幅がおかしい時はflexプロパティの書き方が原因かもしれない
https://xov.jp/e/365/
✕ flex-grow:3;
◎ flex:3 0 auto;

もう記憶の彼方に忘れさられてたで・・・

カテゴリー
css ソフト全般(開発用) 開発関連

めも(tab退避)

IEさんめ

Flexbox使用時にIE11、Edgeだと子要素の画像が伸縮してしまうバグの修正方法 – LoudAndProudパーソナル

Flexbox使用時にIE11、Edgeだと子要素の画像が伸縮してしまうバグの修正方法

【スライス不要】Photoshop「画像アセット生成」の基本とつまずきがちな5つのコト | 東京上野のWeb制作会社LIG
https://liginc.co.jp/225512#sec3-5

独自SSLいろいろきかれた時用メモ

無料SSLサーバー証明書 Let’s Encrypt – レンタルサーバーはさくらインターネット
https://www.sakura.ne.jp/function/freessl.html

独自SSL[IPアドレスベース/SNI SSL(ネームベース)] – レンタルサーバーはさくらインターネット
https://www.sakura.ne.jp/function/original-ssl/

【独自SSL】導入の流れ・設定手順 – さくらのサポート情報
https://help.sakura.ad.jp/hc/ja/articles/206054802?_ga=2.19963640.1159618661.1548152255-337862200.1547803612

無料SSL(Let’s Encrypt) – さくらのサポート情報
https://help.sakura.ad.jp/hc/ja/sections/115000024802-%E7%84%A1%E6%96%99SSL-Let-s-Encrypt-

【無料SSL】サーバコントロールパネルからの導入手順 – さくらのサポート情報
https://help.sakura.ad.jp/hc/ja/articles/115000136822–%E7%84%A1%E6%96%99SSL-%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%91%E3%83%8D%E3%83%AB%E3%81%8B%E3%82%89%E3%81%AE%E5%B0%8E%E5%85%A5%E6%89%8B%E9%A0%86

お問い合わせ – さくらのサポート情報
https://help.sakura.ad.jp/hc/ja/articles/115000161182

Googleカレンダー関連

API とサービス – Google API コンソール
https://console.developers.google.com/apis/library/calendar-json.googleapis.com?id=84f291c9-2585-4af1-a78b-09c53a78202f

Colors  |  Calendar API  |  Google Developers
https://developers.google.com/calendar/v3/reference/colors?hl=ja

その他

Dropboxを使ってfilezillaの設定を複数のMacで共有する方法 | パズ部
https://puzz.jp/mac/244

OGPのprefixは「og: http://ogp.me/ns#」だけで良いんじゃねぇの?的な | 七色七音
https://nanairo.jyn.jp/phantom/2018/08-27

OGPで本当に必要なメタタグは? – Qiita
https://qiita.com/sutara79/items/d7a45f6c4796c1ee1590

カテゴリー
css html

picture要素とかのsrcsetの条件分岐ほんまわからんわ〜

日本語苦手だから。。解説サイト読むのも苦手です。(英語に至っては量に圧倒されて卒倒しますYO!)

今までで一番わかりやすかったかも。

カテゴリー
css 開発関連

旧石器時代の仕様に対応するのでメモ

Shift_JISとかIE9対応とか、xhtmlとか、もう根絶してると思ってた。めも。

Sublime Text 3 で ConvertToUTF8 を使えるようにする // understandard
https://www.understandard.net/tool/tool016.html

カテゴリー
css ソフト全般(開発用) 開発関連

【Ruby Sass】Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.【更新されなくなるってよ】

今日なにげにsassをインストールし直したら下記が。。

Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.

* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
  primary implementation: https://sass-lang.com/install

* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
  sassc gem: https://github.com/sass/sassc-ruby#readme

* For more details, please refer to the Sass blog:
  http://sass.logdown.com/posts/7081811

Successfully installed sass-3.6.0

あら。

Ruby SassメンテされなくなるからDart Sassに移行してねだって。