メモの検索結果です。|デザイナー、コーチ、ディレクターズメモ|井川igawa design.

Memos

CSSのmax-widthでのピクセル指定はレスポンシブ対応ではなく、レイアウト崩れの原因となるので要注意。

max-widthとレスポンシブデザイン。

CSSのmax-widthはレスポンシブ対応ではない。 レスポンシブ対応の際に、max-widthでピクセル指定をしている場面をいまでも見る。よくあるのがパソコン表示用の「max-width: 1000px;」や「max-width: 1100px;」などの指定だ。 やろうとしている意図はわかるが、実はこれは10年以上前の指定方法で、スマホが普及する以前の主にノートパソコン用の...

iPhone 14の解像度と、画像サイズ、CSSのピクセル設定をどうするか?

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

CSSのobject-fitで画像に統一感を。トリミングやサイズを調整。

object-fitでトリミングやサイズ調整を。

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

CSSとJS。使い勝手の良いグラデーション・マーカー・アニメーション。

マーカーでWebサイトにアクセントを。

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

backgroundの複数指定が効かない時の確認事項。(CSSアニメーションとの組み合わせ。)

CSSの背景画像を確認しよう。

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

CSS filter。色相・彩度・明度? filterプロパティでできること。

filter(フィルター)

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

iPhoneの解像度一覧(iPhone8〜13まで)と、CSSブレイクポイントの目安は?

iPhoneの高解像度ディスプレイ。

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

widthの読み方は、ウィドスやウィドゥスよりもウィズが良い理由。

Widthはウィドスじゃないよ。

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

position: sticky;が効かない時にまずチェックすべき3つの項目。

sticky

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

Webデザイナー、Webコーダーのお金事情。Are you hungry?

Webデザイナーやこーだーはhungry

Webデザイナーは、なぜか日本では対価に見合っていないらしい。 Webデザイナーの収入の問題。これは、10年以上前から言われていたことだ。 まず、「Webデザイナー」という定義が曖昧だ。制作作業的には、コーディングができるかどうかで大きく違う。 なのでひとまずここでのWebデザイナーは、Webサイト制作のデザイナー、コーダーは、Webサイト制作でのコーダーと定義する。 ...