エスエムティの愉快な仲間たち

ウラカスミンも書いていましたが、
IEのサポートが完全に終了するようです。

IEで動作保証をしているシステムを使用している方々からは
色々な声が上がっているようですが、
いち「コーダー」としてはIEに苦しめられた思い出も様々でして
ようやくかという想いでいっぱいです。

私がこの仕事に就いた時は「IE6」の全盛期（確か…）。

他のSafariやFirefox等では問題無いのに
IE6だけ「ちょっと」どころではなく全然違う表示になっていたり。

「1+1」をしたはずなのに答えが「100」になってるみたいな。

そんな飛びぬけた問題児だったIE6から時は経ち
最新版はIE11なわけですけど、
それでも表示の違いはやはり頻発。。

IEのサポートが終わることで、
多少は気にしなくても良くなるであろうことはとても喜ばしい事です。

当時のブラウザのシェア率についての記事がありました。

https://xtech.nikkei.com/it/article/USNEWS/20051108/224208/

その頃はありませんでしたが、
今ではChrome等優秀なブラウザもありますので
IEにこだわっていた方は思い切ってささっと乗り換えましょう！

ぴの子

GWも明け、いつまでも休みボケしていられない今日この頃。
どこへも出掛けずに完全自粛のGWでした。

継続契約中のKindle Unlimitedで
暇つぶしがてら本を読み漁ったりして過ごしたり。

◆ロゴのつくりかたアイデア帖”いい感じ”に仕上げる65の引き出し


↑Kindle Unlimited対象で0円でしたので
まだ半分程度ですがぼちぼち読み進めています。

◆フリーフォント最強Selections


↑こちらも0円なので今のうちにチェックしたい所。

今更紹介するは遅い気もしますが、
明日13日まで「GWキャンペーン」が行われていますので
気になる本がある方は駆け込みでぜひどうぞ！

◆Amazon
https://www.amazon.co.jp/b/ref=s9_acss_bw_cg_PC_1a1_w?node=10282011051&pf_rd_m=A3P5ROKL5A1OLE&pf_rd_s=merchandised-search-2&pf_rd_r=CJSQESB6S872FTYHA1EB&pf_rd_t=101&pf_rd_p=c80b3e00-02ac-40a2-ba4d-aab820445f55&pf_rd_i=2275256051

ぴの子

デザインを作る際、私はPhotoshopをメインに使用しています。
でもPhotoshopってパスを扱うには大変だし、
SVG化したいアイコンがある場合なんかは
コーディング時にコード確認に手間取りそうですよね。

Photoshopではパスも扱えますし、コードの確認もできます。
素材を正しく使用できてさえいれば大丈夫。



↑このシルエットを使います。
（Illustratorで開いています）

これをCtrl＋Cでコピーして、



↑Photoshop上にペーストします。
その際「シェイプレイヤー」を選択します。



↑するとパスを維持したまま貼り付けできました。



↑サイズや色を調整して完成。



↑レイヤーを右クリックすると「SVGをコピー」がありますので、
簡単にコードを確認することが出来ます。

SVGでもっていければ、CSSのfillを使って色の変更も容易ですね。

あまり複雑すぎるパスの扱いは苦手ですが、
割と頑張ってくれますよ、Photoshop。笑

あとはもう少し動作が軽くなれば文句ありません。。

ぴの子

ギャラリーとして画像を並べたり
新着情報の要素の一つとしてサムネイルを表示したりしますが、
よく起こる問題が

「画像の比率問題」

ですね。



四角い枠の中に綺麗に表示したいけど、
縦横比もバラバラだしどうしよう。

なんてことが度々起こります。

overflowで隠したりpositionで頑張って中央配置にしたリ、
backgroundに指定できる場合はbackground-sizeでcoverにしたり。

そんなことをしていましたが、

CSSの「object-fit」でも一発で解決できるのですね。
（最近知りました・・・）

◆object-fit
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

object-fitをcoverにして完了。



◆Can I use
https://caniuse.com/?search=object-fit

IE以外では大丈夫そうなのでほぼ安心して使えそうです。
とても簡単なので是非お試しを！

ぴの子

Google Fontsに次ぐ新たなWebフォントサービスが公開されました。

◆Fontshare
https://www.fontshare.com/

個人・商用を問わず利用できるようです。

普段Google Fontsを使用している方なら
直感で使えそうなインターフェイスですよね。


↑欲しいフォントを選択し、


↑好きなスタイルを選択すると、


↑ここのボタンから


↑コードを取得することができます。
フォントのダウンロードもできますよ！

Google Fontsとはまた違った個性的なフォントもありますので、
選択肢の一つとしていかがでしょうか。

ぴの子