kokusyo

Slick（slick.js）は手軽に導入できる一方で、CSSや表示タイミングの影響を受けやすく、「隙間ができる」「タブの中で崩れる」などのつまずきが起きがちです。 この記事では、よくある症状ごとに“ ...

CSS Grid で「カードをきれいに並べたい」「列数を自動で変えたい」そんなときに使うのが grid-template-columns と repeat() です。 まず結論：grid-templa ...

background-attachment: fixed; を使うと、背景をビューポートに固定して“パララックス風”に見せられます。これは仕様としても「fixed＝ビューポート基準で固定」という意味で ...

カテゴリ切替・年別アーカイブ・前へ/次へ付き（コピペで動く） 「お知らせ一覧だけ欲しいのに、WordPressを入れるほどじゃない」「でもHTMLを毎回コピペして並べ替えるのはしんどい」 そんなときに ...

制作中のサイトや、購入者だけに見せたい特典ページなど、 がっつり会員制ログインを作るほどではないけど、URL直打ちで誰でも見えてしまうのは困る… という場面、けっこうありますよね。 そういうときに便利 ...

最近は、CSSやWordPressで困ったときに「とりあえずAIに聞く」がだいぶ普通になってきました。実際、シンプルなコードの書き方や文法ミスならAIの回答だけでサクッと解決できることも多いです。 た ...

SVGを色ごとに書き出すとファイルが増殖して管理が大変。できればCSSだけで色を差し替えたい——でも color や fill を指定しても色が変わらないことがある。本記事はその「なぜ？」を解決します ...

grid-template-columns の コピペ用レシピ集。repeat()・auto-fit/auto-fill・minmax() の定番式と失敗しがちなポイントを 早見表→短解説 の順にまと ...

はじめに こんにちは。このたび、Web制作でよく使うUIパーツをまとめた**「スニペット集」**を公開しました！現在はまだ作成途中なので、収録数は少なめですが、順次追加していく予定です。 今あるスニペ ...

はじめに CSSを設計するうえで、「marginの付け方」には様々な考え方があります。 特に、デザインとレイアウトを分離する設計を意識すると、marginの持たせ方が重要になってきます。 この記事では ...