CSSが効いていない。一部だけおかしい場合。 CSSアニメーションやキャッシュの問題? CSSの優先順位も間違いない。 CSSは間違いないはず。W3CのValidatorでのチェックでも問題がない。 参照:W3C CSS 検証サービス ブラウザやサーバーのキャッシュも削除済み。 CSSのブラウザキャッシュは、スーパーリロードで無視もできる。 バージ...
Memos
first-letterが効かないとき。覚えると便利なCSS擬似要素。
CSS擬似要素のfirst-letter。 first-letterは、最初の一文字という意味。 ::first-letter 「first-letter」を日本語にすると、そのまま「最初の一文字」となる。 Webデザインをしているとき、その「最初の一文字」だけのデザインを変えたいときがある。 最初の一文字だけデザインを変えたい。 例えば見出しの最初の一...
rgb()で透明度も。CSSの新しい色指定と使い方の例。
rgb()で透明度も指定可能に。 rgb()関数での色指定。 rgb()の新しい書き方。 rgb(r g b) rgb(r g b / a) Red(赤) Green(緑) Blue(青) Red(赤) Green(緑) Blue(青) / Alpha(アルファ) カンマからスペースでの区切りへ。 rgbの値はこれまで通り0〜255。区切りが...
CSSでダークモード。prefers-color-schemeの使い方と効かないとき。
prefers-color-schemeとは? メディアクエリでライトとダークを切り替え。 CSSのメディアクエリで「prefers-color-scheme」を使うと、ライトモードとダークモードを切り替えられる。 ダークモード・ライトモードの切り替えは、スマホの普及によりユーザーの視聴時間が増えたこともあり、OSレベルでは必須的な機能となってきている。 ...
reCAPTCHAの導入例と、バッジ(マーク)をCSSで非表示に。
reCAPTCHAとは? Googleによる認証システム。 「reCAPTCHA」は、Googleが提供している認証システム。 1か月あたり100万件まで無料で利用でき、人間とbotを区別し、スパムなどからサイトを保護してくれる。 設定方法は少し手間がかかるかもだが、慣れれば数分〜10分ほどで導入できる。 reCAPTCHAのバージョン。 ...
CSSで縦書き。writing-modeの使い方。効かないときは?
CSSで縦書き。writing-modeの使い方。 CSSの縦書き方法。 writing-modeの実装。 CSSによる縦書きは簡単で、最低限、以下の指定で実装できる。 サイト全体を縦書きにするのはもちろん、見出しやアクセントとして一部分への指定する際も、下記の記述が基本となる。 CSS .selector { writing-mode: ver...
scroll-snap-typeの使い方。CSSでカルーセル。効かないときは?
scroll-snap-typeの使い方例。CSSでシンプルなカルーセル。 CSSカルーセル。 ちょっと前まではJavaScriptが必須だった、カルーセルやスナップするスクロール。 いまではもう、CSSだけでも結構いける。 スマホのスワイプにも対応している。 scroll-snap-typeの特徴。 CSSのみ。JavaScriptが不要。 sc...
CSSのブレイクポイントの書き方。メディアクエリはいくつがおすすめ?
CSSブレイクポイント、メディアクエリの最小値は? Webサイトのブレイクポイントの決め方はどうするべきか。 ブレイクポイントの意味との決め方。320pxも現存している。 Webデザイナーやコーダーを悩ます、ブレイクポイントの決め方。 Googleアナリティクスを調べていると、320pxからのアクセスは意外と多く、ユーザビリティ的に無視できない。 320px以...
iPhoneのブラウザでのみ表示不具合の現象に。SafariもChromeもEdgeでも。
iPhoneだけ表示がおかしい。 WindowsもMacもAndroidも問題なく、iPhoneだけ。 iPhoneのブラウザでだけ表示がおかしい。 iPhoneのブラウザ(Safari、Chrome、Edge)でのみ、表示に不具合がある。 このような現象は見たことも聞いたこともなく、ネット上を調べてみてもどこにも情報が見つからない。 だけども今現在、実際に起...
CSS gapの使い方?Flexboxでレスポンシブ?効かないときは?
gapとは? CSS gapプロパティ。 gapという選択肢。 divなどで作ったボックスを並べるとき、要素間に均一な余白を開けると綺麗に見える。 これまでは「margin」、もしくは「padding」を使うのが一般的だったが、「gap」を使うという選択肢が増えた。 対応ブラウザ。 すでにモダンブラウザはgapに対応している。 参考: gap" |...
CSSの変数と関数。覚えておくと便利なCSSプログラミング。
CSSでも変数や関数が使えるように。 CSS変数やCSS関数によるプログラミング。 CSSでプログラミング。 CSSの生みの親であるHåkon Wium Lie(ホーコン・ウィウム・リー)氏はTwitterで、もともとCSSはプログラミング言語にしないようにしていた、と発言している。 そのような経緯もあったためか、長らくCSSは、変数や関数、演算などのプログラミング...
CSS aspect-ratioの使い方。効かないときはどうする?
CSSで縦横比の指定。aspect-ratioの使い方。 aspect-ratioプロパティ。 aspect-ratio aspect-ratioの登場により、画像やGoogle Map、YouTubeなどの縦横比(アスペクト比)の指定がCSSでできるようになった。 ブログやニュースなどの投稿記事のアイキャッチ画像の統一や、商品画像の一覧、Google MapやYo...
text-overflowの使い方。CSSで文字数を制御。効かないときは?
CSSで文字数の制御。text-overflowの使い方。 text-overflowの仕様。 text-overflow text-overflowで3点リーダーを付ける場合は単体では機能しなく、次の4つを一緒に指定する必要がある。 width: 30em; (幅の単位や広さは任意。) overflow: hidden; white-space: nowr...
slickの使い方。jQueryスライダーのシンプルなサンプル例。コピペも可。
slickの、シンプルなサンプル。 headタグ内に記述。 slickの使い方は一般的なスライダーと同様。 まずはjQuery本体とslickのJSと、slickのCSSを、CDNで読み込む。 HTML <script src="https://code.jquery.com/jquery-3.6.2.min.js" in...
detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。
detailsとsummary。HTMLだけでアコーディオンメニュー。 detailsタグとsummaryタグ。 JavaScriptを使わなくても、HTMLだけで折り畳められたコンテンツ領域の開閉(アコーディオンメニュー)ができようになった。 情報量が多い箇所など、覚えておくと何かと便利そうなHTML5の新しい要素。基本的な使い方はとにかくシンプル。 コピペで使い...
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...
counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。
CSSだけで連番を振ってくれる、counter-increment。 counter-increment CSSのプログラムでナンバリング。 CSS3からはプログラミングのプロパティが増え、ブラウザの対応も追いつき、いまではCSSだけで番号を振ることができる。 自動連番、ナンバリングもCSSオンリーで可能となっている。 自動でナンバリング。 番号を振って...
viewport-fit=coverで対応。iPhoneのSafe Area問題。
viewport-fit=coverで、iPhoneのSafe Area外をカバー。 iPhone X以降、iPhone 14までのiPhoneは、画面内にノッチがあったりコーナーが角丸になっている。 画像引用:Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11 Killian ...
CSS フォントサイズはどうする? remの基本かつ効果的な使い方。
remで覚えると安全かつ便利。 Webサイト制作の際に必ずと言って良いほど使用するfont-size。毎回の制作の度にfont-sizeの指定をするが、どのくらいのサイズが適切なのか迷ってしまうことがある。 単位とサイズ。 もし単位に迷うのであれば、「px」ではなく「rem」で指定しておいた方が安全で使いやすい。 サイズについては、各ブラウザ間でほぼほぼ16pxが確...