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

Memos

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

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

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

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

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

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

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

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

Webデザインは職業訓練校(ハロートレーニング)かスクールか。迷った場合はどっち。

職業訓練校かスクールか?

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

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

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

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

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

sticky

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

Sassは必要? Sassからの卒業。Back to CSS。

Sassって必要なの?CSSを忘れてない?

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