CSSの一部が効かないときは、キャッシュやダークモードが原因かも。 2024.10.22 CSSが効いていない。一部だけおかしい場合。 CSSアニメーションやキャッシュの問題? CSSの優先順位も間違いない。 CSSは間違いないはず。W3CのValidatorでのチェックでも問題がない。 参照:W3C CSS 検証サービス ブラウザやサーバーのキャッシュも削除済み。 CSSのブラウザキャッシュは、スーパーリロードで無視もできる。 バージ... CSSmemosWebデザイン
first-letterが効かないとき。覚えると便利なCSS擬似要素。 2024.06.11 CSS擬似要素のfirst-letter。 first-letterは、最初の一文字という意味。 ::first-letter 「first-letter」を日本語にすると、そのまま「最初の一文字」となる。 Webデザインをしているとき、その「最初の一文字」だけのデザインを変えたいときがある。 最初の一文字だけデザインを変えたい。 例えば見出しの最初の一... CSSmemosWebデザイン
rgb()で透明度も。CSSの新しい色指定と使い方の例。 2024.03.22 rgb()で透明度も指定可能に。 rgb()関数での色指定。 rgb()の新しい書き方。 rgb(r g b) rgb(r g b / a) Red(赤) Green(緑) Blue(青) Red(赤) Green(緑) Blue(青) / Alpha(アルファ) カンマからスペースでの区切りへ。 rgbの値はこれまで通り0〜255。区切りが... CSSmemosWebデザイン
CSSでダークモード。prefers-color-schemeの使い方と効かないとき。 2023.12.22 prefers-color-schemeとは? メディアクエリでライトとダークを切り替え。 CSSのメディアクエリで「prefers-color-scheme」を使うと、ライトモードとダークモードを切り替えられる。 ダークモード・ライトモードの切り替えは、スマホの普及によりユーザーの視聴時間が増えたこともあり、OSレベルでは必須的な機能となってきている。 ... CSSmemosWebデザイン
CSSで縦書き。writing-modeの使い方。効かないときは? 2023.11.27 CSSで縦書き。writing-modeの使い方。 CSSの縦書き方法。 writing-modeの実装。 CSSによる縦書きは簡単で、最低限、以下の指定で実装できる。 サイト全体を縦書きにするのはもちろん、見出しやアクセントとして一部分への指定する際も、下記の記述が基本となる。 CSS .selector { writing-mode: ver... CSSmemosWebデザイン
scroll-snap-typeの使い方。CSSでカルーセル。効かないときは? 2023.06.08 scroll-snap-typeの使い方例。CSSでシンプルなカルーセル。 CSSカルーセル。 ちょっと前まではJavaScriptが必須だった、カルーセルやスナップするスクロール。 いまではもう、CSSだけでも結構いける。 スマホのスワイプにも対応している。 scroll-snap-typeの特徴。 CSSのみ。JavaScriptが不要。 sc... CSSmemosWebデザイン
CSSのブレイクポイントの書き方。メディアクエリはいくつがおすすめ? 2023.05.22 CSSブレイクポイント、メディアクエリの最小値は? Webサイトのブレイクポイントの決め方はどうするべきか。 ブレイクポイントの意味との決め方。320pxも現存している。 Webデザイナーやコーダーを悩ます、ブレイクポイントの決め方。 Googleアナリティクスを調べていると、320pxからのアクセスは意外と多く、ユーザビリティ的に無視できない。 320px以... CSSmemosWebデザイン
CSS gapの使い方?Flexboxでレスポンシブ?効かないときは? 2023.03.02 gapとは? CSS gapプロパティ。 gapという選択肢。 divなどで作ったボックスを並べるとき、要素間に均一な余白を開けると綺麗に見える。 これまでは「margin」、もしくは「padding」を使うのが一般的だったが、「gap」を使うという選択肢が増えた。 対応ブラウザ。 すでにモダンブラウザはgapに対応している。 参考: gap" |... CSSmemosWebデザインデザイン
CSSの変数と関数。覚えておくと便利なCSSプログラミング。 2023.01.26 CSSでも変数や関数が使えるように。 CSS変数やCSS関数によるプログラミング。 CSSでプログラミング。 CSSの生みの親であるHåkon Wium Lie(ホーコン・ウィウム・リー)氏はTwitterで、もともとCSSはプログラミング言語にしないようにしていた、と発言している。 そのような経緯もあったためか、長らくCSSは、変数や関数、演算などのプログラミング... CSSmemosWebデザイン
CSS aspect-ratioの使い方。効かないときはどうする? 2023.01.24 CSSで縦横比の指定。aspect-ratioの使い方。 aspect-ratioプロパティ。 aspect-ratio aspect-ratioの登場により、画像やGoogle Map、YouTubeなどの縦横比(アスペクト比)の指定がCSSでできるようになった。 ブログやニュースなどの投稿記事のアイキャッチ画像の統一や、商品画像の一覧、Google MapやYo... CSSmemosWebデザイン
text-overflowの使い方。CSSで文字数を制御。効かないときは? 2023.01.06 CSSで文字数の制御。text-overflowの使い方。 text-overflowの仕様。 text-overflow text-overflowで3点リーダーを付ける場合は単体では機能しなく、次の4つを一緒に指定する必要がある。 width: 30em; (幅の単位や広さは任意。) overflow: hidden; white-space: nowr... CSSmemosWebデザイン
CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを。 2022.11.30 CSSブレンドモード。 PhotoshopやFigmaなどのデザインツールでお馴染みの描画モードが、CSSでも使えるようになっている。 「描画モード」は英語では「Blend Mode(ブレンドモード)」であり、レイヤーとレイヤーを混ぜ合わせた表現となる。 そのように、画像やテキストなどを「ブレンド」できるのが、「mix-blend-mode」プロパティ。 m... CSSmemosWebデザイン
counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。 2022.11.22 CSSだけで連番を振ってくれる、counter-increment。 counter-increment CSSのプログラムでナンバリング。 CSS3からはプログラミングのプロパティが増え、ブラウザの対応も追いつき、いまではCSSだけで番号を振ることができる。 自動連番、ナンバリングもCSSオンリーで可能となっている。 自動でナンバリング。 番号を振って... CSSHTMLmemosWebデザイン
CSS フォントサイズはどうする? remの基本かつ効果的な使い方。 2022.11.15 remで覚えると安全かつ便利。 Webサイト制作の際に必ずと言って良いほど使用するfont-size。毎回の制作の度にfont-sizeの指定をするが、どのくらいのサイズが適切なのか迷ってしまうことがある。 単位とサイズ。 もし単位に迷うのであれば、「px」ではなく「rem」で指定しておいた方が安全で使いやすい。 サイズについては、各ブラウザ間でほぼほぼ16pxが確... CSSmemosWebデザイン
Chromeデベロッパーツールでスマホ表示チェックする際の注意点。 2022.11.14 デベロッパーツールのショートカット。 デベロッパーツールは右クリックからも開けるが、よく使う機能なのでショートカットで覚えておくと作業がはかどる。 ショートカット。 Mac: 「Command」 + 「Option」 + 「i」(FirefoxやSafariでも同じ。) Windows: 「Ctrl」 + Shift「」 + 「i」 (「F12」でも可。) ... CSSiPhoneJavaScriptmemosWebデザイン
line-clampの使い方。CSSで複数行指定。効かないときは? 2022.11.08 CSSで複数行指定。line-clampの使い方。 line-clampの登場により、JavaScriptやPHPなどを使用しなければなからなった「複数行指定、文字列の抜粋」が、CSSだけでできるようになった。 ブログやニュースなど、投稿記事のタイトルの抜粋が非常に楽であり、かつCSSなのでブレイクポイントによりスマホは2行、PCは3行などと簡単に振り分けができる。 li... CSSmemosWebデザイン
CSSの@whenと@else。新しいブレイクポイントの設定方法? 2022.11.03 @whenと@elseは普及するだろうか? CSSのブレイクポイントの新しい書き方なのか、「@when」と「@else」を使用したif文のような条件分岐が草案となっている。 W3Cのサイトにドラフトで、@whenを使った条件分岐として下記のような例が記載されている。 引用元サイト:CSS Conditional Rules Module Level 5 @whe... CSSmemosWebデザイン
text-shadow 縁取りがおしゃれに効かない時はdrop-shadowで。 2022.11.01 text-stroke使用時は、text-shadowの挙動がすこし違う。 文字を縁取りするためtext-strokeを使っているときに、さりげなくおしゃれな感じにtext-shadowでシャドウをかけたいことがある。 そこでちょっと試しに、静かで澄んだの山頂上空の写真と、賑やかなネオンのムーラン・ルージュの写真に文字を乗せて検証してみた。 [affiliate] ... CSSmemosWebデザイン
縁取り文字はCSSのtext-strokeで可能。(非推奨の時代は終わり。) 2022.10.29 縁取り文字はtext-strokeを使った方が楽で確実。 CSSのtext-stroke。 DTPデザインでは当たり前で、イラレでもフォトショでもごく普通に使われている縁取り文字。 文字を縁取りするだけなので簡単そうだが、CSSではなかなか実装されなかった。 そのためWebデザインでは長年シャドウ用の「text-shadow」を駆使して代用していたが、そんな時代がよ... CSSmemosWebデザインデザイン
CSS変数の使い方例。:rootを使ってカスタムプロパティを覚える。 2022.10.23 CSSで変数(カスタムプロパティ)を使うと、とにかく便利。 CSS変数を使う。 プログラムの基本。 JavaScriptやPHPなど、プログラミング言語ではごくごく基本の変数。 CSSでも使える便利な機能。 CSS変数のニーズ。 CSS変数(カスタムプロパティ)。 もともとCSSの生みの親であるホーコン・ウィウム・リー氏によると、CSSは意図的にプ... CSSmemosWebデザイン