実はあなたが書いてるCSS、100倍簡単に書く方法があるの知ってた？

古いCSSだとややこしいが、最新のCSSで綺麗に簡単に書く方法をまとめた「Modern CSS Solutions」

例えば
・レスポンシブに対応した背景画像
・画面下部固定のフッター
・CSSのみのスムーズスクロール
などの方法がまとまってる

僕も便利と思ったtipsが結構あった December 12, 2025

CSSアニメーションで作った「楽しいテキストアニメーションアイデア集」をYouTubeに投稿しました。
よければ見ていただけたら嬉しいです。
https://t.co/c78ajTfjZi https://t.co/OmvayYy7yY December 12, 2025

【CSSレベルをちょっと上げたいコーダーさんへ】

FVのタイトルとか、
要素をど真ん中に置きたい時
これでやってません？？

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

もちろん今でも動く。

でも最近はもっとシンプルで
綺麗な書き方があるんですよね。

それが Grid × place-content！！

.p-fv {
min-height: 500px;
display: grid;
place-content: center;
}

これだけで
上下左右ど真ん中にドンッと置ける。

しかも…

✅️transform 書かなくていい
✅️ 計算いらない
✅️レイアウト崩れにくい
✅️読んだ時に意図が分かりやすい
✅️子要素が増えても柔軟に対応できる

正直、中央寄せしたいだけの場面なら
absoluteよりGridのほうが圧倒的に快適。

「なんか中央寄せで毎回ぐちゃぐちゃになる…」
って人は、これ試してみてほしい😌

画像にplace-contentのいろんな値もまとめてるから
ブクマして何回も見返してみて〜！ December 12, 2025

CSS小技✨
続：font-size vs scale🎶
font-size は文字だけ拡大、
scale は要素ごと見た目だけ拡大。

そのままだと挙動が揃わないので、
外側の要素で囲んで比較すると分かりやすい💻
枠はそのまま、中だけ変えるのがポイント。
これで挙動は一致する👍
#CSS #CSS小技 #Codejump https://t.co/248K1SsJ7a December 12, 2025

1997年に閉鎖されたWEBサイトって体のHPを確認し、HTMLソースを見る。
画像はPNGだわ、CSSは使ってるわ、しまいにはjquery読み出してるわ。
君さぁ…もうちょっと時代設定に合わせたリアリティーを持たせようよ…
いくら何でもjqueryはないでしょ。script aculo usだってないんだぞ、その時代だと。 December 12, 2025

日曜日の自社サイトのリニューアル
～WordPressからmicroCMSへの乗り換え実装メモ。

見た目を整えるだけじゃなくて「使いやすさ」と「管理しやすさ」を両立させようとすると、やるべきことが山のように出てくる。

1. ブログ記事詳細ページの実装
app/blog/[id]/page.tsxで記事詳細ページを作成
microCMSから記事データを取得
contentsフィールドから本文を取得・表示（文字列/配列/オブジェクトに対応）

2. スタイリング
app/blog/blog.module.scssに記事詳細ページのスタイルを追加
見出し（h1, h2, h3, h4）のスタイルを追加
strongタグのスタイルを追加（黄色テキスト + 赤グラデーション背景）
レスポンシブ対応

3. アイキャッチ画像
eyecatchフィールドからアイキャッチ画像を取得・表示
h1タイトルの後に表示

4. 背景アニメーションの無効化
ブログページで背景アニメーション（パーティクル、サイバーグリッド）を無効化
AppShell.tsxで条件分岐を追加

5. 検索機能
検索窓を実装（BlogContent.tsx）
キーワード検索（タイトル、本文、カテゴリ名）
検索モード時はおすすめ記事・ランキングを非表示
検索窓の位置を左揃えに調整

6. 関連記事機能
同じカテゴリーの記事を最大4件表示
カテゴリーがない場合は最新記事を表示
カード形式で表示（画像、カテゴリー、タイトル、日付）
記事本文の下に配置

7. パンくずリスト
記事の上部にパンくずリストを追加
構造: ホーム > お役立ちブログ > カテゴリ名 > 記事タイトル
カテゴリ名はクリック可能なリンク

8. カテゴリ名の表示
タイトルの上にカテゴリ名を表示（「カテゴリ」ラベル付き）
日付の近くにカテゴリ名を表示（区切り文字「/」付き）
フィールドIDをcategoriesに変更
categoriesがオブジェクトの場合の処理を追加

9. エラー修正
Next.js画像設定エラーを修正（next.config.tsにmicroCMSの画像ホスト名を追加）
CSS Modulesのエラーを修正（imgセレクターを.articleBody内に移動）
画像品質設定の警告を修正（qualitiesを追加）

10. デバッグ機能
カテゴリ情報の取得状況を確認するデバッグログを追加
APIレスポンスの構造を確認するログを追加

挑戦する方をサポートするためには、まずは自分が挑戦者でないといけない、自社サイトで実装してからお客様に提供を心がけていきます。 December 12, 2025

WordPress 6.9アップデート後、ブロックスタイルが崩れたオリジナルテーマ制作者の皆様へ🔧

【原因】
6.9の新機能「オンデマンドブロックCSS読み込み」がカスタムテーマと競合

【解決法】
functions.phpに以下を追加！

add_filter( 'should_load_separate_core_block_assets', '__return_false' );

これで全ブロックCSSが従来通り読み込まれて正常に💡
Snow Monkey Blocks、Aforms等のプラグインで崩れた方もまずはお試しを🎉

参考：
V 6.9 Block Alignment is broken | WordPress.orgV 6.9 Block Alignment is broken | https://t.co/fiTO245EmU December 12, 2025