iPhone 14の解像度は？ デバイスの解像度と、画像サイズと、CSSの解像度。 基本的にWebで使用する写真などの解像度は72px/inchであり、Photoshopの解像度の設定も72px/inchが一般的だ。 これはWindowsが普及する前の時代、Macの前身であるMacintoshの解像度に由来していると思われるが、今でも写真の解像度を調べると普通は7...

object-fitプロパティでできること。 coverでのトリミングが便利。 imgやvideoのサイズをCSSで指定したい時、object-fitプロパティが使える。 要素のボックス内で画像や動画の配置指定ができるので、サイト内に並べる際に、見た目や動きの統一化がしやすい。 object-fitの種類。 object-fitプロパテ...

CSS & JSによるマーカー。 サイトにちょっとしたアクセントが欲しいとき、使い回しが効くマーカーがあると便利だ。 汎用性があるのでスニペットとして使える。 グラデーション付きの、動きのあるマーカー。 ざっくりと、３ステップでOK。 CSSで、マーカーの見た目と動きを作成。（class名「highlight」） JavaScriptで、スクロー...

CSSで背景画像を複数指定したい。 backgroundプロパティで可能なはずだが... CSS3以降からは背景画像の複数指定が可能となっている。ところが、時々うまく表示されないことがある。 例えば、下記のような書き方では、Chromeでは普通に２つ表示されるが、Safariでは１つの画像しか表示されない。 デザイン的にシンメトリーとならないのでなんとかした...

filterプロパティでできること。 CSSのfilterプロパティの関数は全部で10種類ほどある。（2022年現在。noneを含めると11種類。）かつてはPhotoshopなどで行っていたWebサイト用の画像加工が、結構CSSだけでカバーできるようになった。 filterでは色の三属性である色相・彩度・明度の調整から、ぼかし、コントラスト、グレースケール、ドロップシャドウなど...

iPhoneの画面解像度と「拡大表示」モード。 アナリティクスで画面の解像度をチェックしていると、ちらほらと320x693や320x568という数字があることに気がつく。横幅320pxというと初代iPhoneの解像度だ。不思議に思い確認したところ、どうやらiPhone8以降の「拡大表示」モードのようだ。 ブレイクポイントはどうするか？ 「拡大表示」の機能はiPho...

職業訓練校の場合。 ここ数年度々聞かれることがあり、ネットや上でもリアルの場でも不確かな情報が散見しているので（もちろん良い情報もあるが。）、元職業訓練校講師として、ちょっとまとめてみました。 偉そうにする意図はありませんが、もし参考になれば。 職業訓練校のメリット。 ハローワーク経由となるので、求職者支援として厚生労働省からの公的な支援がある。毎月10...

widthの読み方。 最近は直している方も見かけるが、CSSで幅指定をする時に使うプロパティである「width」を「ウィドス」や「ウィドゥス」と読む人が多い。またおそらくDTPデザインや建築の影響で、「ワイド」と読まれることもある。 情報系のブログやYouTubeはまだしも、学校やスクールでもそう教えていることがあるので、あまり良くないんじゃないかなぁ、と思っている。 （受験...

便利な「position: sticky」 サイドバーをスクロールの途中で固定させたい場合、以前はJavaScriptなどを組み合わせなければ実装できなかった。それが「position: sticky」の登場により、CSSだけで可能になった。 「position: sticky」使用時の注意点。 CSSの仕様を踏まえておく。 ただし単にサイドバーに「...

Sassで書く意味はなんだろう？ なぜ、わざわざSassを使うのだろう？ Sassのメリット。 まず第一に、Sassを使用する理由・メリットは何だっただろう？ 個人的には、 変数を使える。 四則演算が使える。 Sassのかっこよさげなイメージ。 この3つは大きかった。テキストや背景色などのカラーコードを変数に格納、widthの幅を四則演算、というの...