カテゴリー
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に移行してねだって。

カテゴリー
css 開発関連

深まりゆく秋、移ろいゆくブレークポイント(とポイント間のレンジ)2018

前にこういう記事をかいたのだが、あきらか変わってきているのでメモ

俺が考えるレスポンシブ対応最新のブレークポイント 2017 | hirokona

俺が考えるレスポンシブ対応最新のブレークポイント 2017

SP PCデザイン切り替えのブレークポイントはまだ750pxあたりでいんじゃね?ってところから、だいぶ変わってきている気がする。

単純に、グロナビはいりきんねーから、とかレスポンシブの工数吸収とか、りあるな理由のやつがおおい気がする。
きゃんぺんさいとは特に顕著。

つまり、「でっかくなっちゃった」

SP画角と判断されるレンジは広く、
PC画角と判断されるレンジは逆に狭くなってきている
なのでブレークポイントのポイントもそれに合わせて数値が大きくなっている場合が多い。

PCでみてて、あ、SPに切り替わるポイントはよなってきてるな〜とおもったので、サイトをメモしとく用に記事準備しておく。