WebデザインやDTP、AIなどについてのメモです。 / いがわ

いがわ.

Memos

CSSが効かないのはダークモードが原因かも。

CSSが効いていない。一部だけおかしい場合。 CSSアニメーションやキャッシュの問題？ CSSの優先順位も間違いない。 CSSは間違いないはず。W3CのValidatorでのチェックでも問題がない。 参照：W3C CSS 検証サービス ブラウザやサーバーのキャッシュも削除済み。 CSSのブラウザキャッシュは、スーパーリロードで無視もできる。 バージ...

CSS first-letterが効かないとき。Webデザイン。

CSS擬似要素のfirst-letter。 first-letterは、最初の一文字という意味。 ::first-letter 「first-letter」を日本語にすると、そのまま「最初の一文字」となる。 Webデザインをしているとき、その「最初の一文字」だけのデザインを変えたいときがある。 最初の一文字だけデザインを変えたい。 例えば見出しの最初の一...

メディアクエリでダークモード。prefers-color-schemeの使い方と効かないとき。

prefers-color-schemeとは？ メディアクエリでライトとダークを切り替え。 CSSのメディアクエリで「prefers-color-scheme」を使うと、ライトモードとダークモードを切り替えられる。 ダークモード・ライトモードの切り替えは、スマホの普及によりユーザーの視聴時間が増えたこともあり、OSレベルでは必須的な機能となってきている。 ...

reCAPTCHAの認証、導入方法。

reCAPTCHAとは？ Googleによる認証システム。 「reCAPTCHA」は、Googleが提供している認証システム。 1か月あたり100万件まで無料で利用でき、人間とbotを区別し、スパムなどからサイトを保護してくれる。 設定方法は少し手間がかかるかもだが、慣れれば数分〜10分ほどで導入できる。 reCAPTCHAのバージョン。 ...

Webのブレイクポイント。レスポンシブデザインのメディアクエリ。

CSSブレイクポイント、メディアクエリの最小値は？ Webサイトのブレイクポイントの決め方はどうするべきか。 ブレイクポイントの意味との決め方。320pxも現存している。 Webデザイナーやコーダーを悩ます、ブレイクポイントの決め方。 Googleアナリティクスを調べていると、320pxからのアクセスは意外と多く、ユーザビリティ的に無視できない。 320px以...

iPhoneのブラウザでのみ表示不具合の現象に。SafariもChromeもBingでも。

iPhoneだけ表示がおかしい。 WindowsもMacもAndroidも問題なく、iPhoneだけ。 iPhoneのブラウザでだけ表示がおかしい。 iPhoneのブラウザ（Safari、Chrome、Edge）でのみ、表示に不具合がある。 このような現象は見たことも聞いたこともなく、ネット上を調べてみてもどこにも情報が見つからない。 だけども今現在、実際に起...

gapの使い方。対応ブラウザとflexboxでレスポンシブ。

gapとは？ CSS gapプロパティ。 gapという選択肢。 divなどで作ったボックスを並べるとき、要素間に均一な余白を開けると綺麗に見える。 これまでは「margin」、もしくは「padding」を使うのが一般的だったが、「gap」を使うという選択肢が増えた。 対応ブラウザ。 すでにモダンブラウザはgapに対応している。 参考： gap" |...

変数と関数によるCSSプログラミング。

CSSでも変数や関数が使えるように。 CSS変数やCSS関数によるプログラミング。 CSSでプログラミング。 CSSの生みの親であるHåkon Wium Lie（ホーコン・ウィウム・リー）氏はTwitterで、もともとCSSはプログラミング言語にしないようにしていた、と発言している。 そのような経緯もあったためか、長らくCSSは、変数や関数、演算などのプログラミング...

detailsとsummaryの使い方。HTMLだけでアコーディオンを実装。

detailsとsummary。HTMLだけでアコーディオンメニュー。 detailsタグとsummaryタグ。 JavaScriptを使わなくても、HTMLだけで折り畳められたコンテンツ領域の開閉（アコーディオンメニュー）ができようになった。 情報量が多い箇所など、覚えておくと何かと便利そうなHTML5の新しい要素。基本的な使い方はとにかくシンプル。 コピペで使い...

Googleのアイコン。Material Symbols and Iconsの使い方。

Googleのアイコンフォント。 アイコンフォントといえば「Font Awesome」が有名だが、Google Fontsでもアイコンフォントを無料配布している。 Googleフォントのように使え、SVGやPNG形式で画像として個別にダウンロードすることもできる。 また、デザインツール「Figma」のプラグインとしても利用できる。 Google Fontsのサイトによる...

CSSブレンドモード。乗算をmix-blend-modeで。

CSSブレンドモード。 PhotoshopやFigmaなどのデザインツールでお馴染みの描画モードが、CSSでも使えるようになっている。 「描画モード」は英語では「Blend Mode（ブレンドモード）」であり、レイヤーとレイヤーを混ぜ合わせた表現となる。 そのように、画像やテキストなどを「ブレンド」できるのが、「mix-blend-mode」プロパティ。 m...

CSSで連番。counter-incrementの使い方。

CSSだけで連番を振ってくれる、counter-increment。 counter-increment CSSのプログラムでナンバリング。 CSS3からはプログラミングのプロパティが増え、ブラウザの対応も追いつき、いまではCSSだけで番号を振ることができる。 自動連番、ナンバリングもCSSオンリーで可能となっている。 自動でナンバリング。 番号を振って...

CSS フォントの単位はpx？ %？ em？ rem？

remで覚えると安全かつ便利。 Webサイト制作の際に必ずと言って良いほど使用するfont-size。毎回の制作の度にfont-sizeの指定をするが、どのくらいのサイズが適切なのか迷ってしまうことがある。 単位とサイズ。 もし単位に迷うのであれば、「px」ではなく「rem」で指定しておいた方が安全で使いやすい。 サイズについては、各ブラウザ間でほぼほぼ16pxが確...