私の年間CSSベスト大賞、
選ぶとしたらこんな感じかしら。

2025　text-autospace
2024　starting-style + allow-discrete
2023　:has()
2022　scroll-behavior
2021　gap, aspect-ratio (同率)
2020　object-fit
2019　scroll-snap-type
2018　grid
2017　CSS変数 December 12, 2025

OBS&discord有識者助けて〜😭

discordボイチャで喋ってる人をOBSでﾋﾟｮｺﾋﾟｮｺ表示する方法について。
discordアカウントのアイコンではなく、discordのチャンネル内にアップロードした画像を使って表示する際、画像リンクをカスタムCSSに入れると思います。
ただ、あの画像リンクって一定時間で自動更新されるので、突然OBSで正しく表示されないことがありますよね……

Googleドライブか何かを使ったらリンク変わらない、みたいな話を聞いたことがあるんですが、やり方どうでしたっけ……、、

⭕️jsonファイルを別の人に渡しても、受け取った側でﾋﾟｮｺﾋﾟｮｺが正しく表示されて欲しい
⭕️CSS内の画像リンクをいちいち更新/書き換えしなくてもいい
……というのが理想です。 December 12, 2025

過去にCSSアニメーションで作った、楽しげなトランジションアイデア集です。
よければ見ていただけたら嬉しいです。
https://t.co/aS6LXsU9di https://t.co/FButOms5nH December 12, 2025

【2025年最新のWeb制作において必要なスキル、不必要なスキル】

意外とエンジニアの人でもWeb制作領域の内情はあまり知られていなさそうなので一旦僕が見えている範囲でまとめてみます。基本的なものに絞ります。

他にもある！って方はリプライで教えてください🙏

【技術領域】
--基礎--
✅ HTML/CSS
✅ JavaScript
✅ WordPress
✅ PHP
✅ 上記技術群を用いてお問い合わせフォームの実装・設置ができること

--応用--
✅ セマンティックなHTMLの書き方
✅ display: grid; を使ったレイアウト方法
✅ 画像の最適化知識（WebPなどへの変換、適切なサイズ圧縮）
✅ GSAPなどのアニメーション系ライブラリ
✅ AlpineJS（個人的におすすめ、記法はVueっぽい）
✅ BEMのようなクラス命名規則
✅ emmet（HTML/CSSの短縮記法）

--超応用--
✅ Astro（React / Vueなどの恩恵を受けつつWeb制作に適したフレームワーク）
✅ （Astroが使いたいなら）React / Vue
✅ Tailwind CSS
✅ Astroなどを使うならnpm / node.jsの仕組み（ビルド環境としての基礎知識）

【関連・周辺知識】
--技術関係--
✅ Can I Useでブラウザ対応状況を確認できること
✅ MDNでHTML/CSS/JSの正しい使い方を都度確認できること

--開発環境・ツール--
✅ ターミナル、コマンドラインの基礎知識
✅ Git/GitHubによるコード管理ができること
✅ Cursorなどのエディタを使えること
✅ ChatGPT / Gemini / Claudeの主要AIに慣れていること
✅ WordPressの開発環境構築（おすすめツール：Local）
✅ Figma（デザインツール）の基本操作

--インフラ・サーバー--
✅ レンタルサーバーの契約から運用ができること
✅ ドメインを契約できてレンタルサーバーとの連携が設定できること
✅ FTPを扱えること
✅ メールアドレスの作成・設定サポートができること（意外と求められる）

--マーケティング・解析--
✅ 基本的なSEO内部対策ができること
✅ GA4のセットアップができること
✅ Search Consoleのセットアップができること
✅ Clarity（ヒートマップツール）のセットアップができること

【不要なもの】
❌ jQuery
❌ React / Vueの深い知識
❌ Next.js / Nuxt.js
❌ Pythonなどの他の言語
❌ Sass（個人的には必要性を感じない。これをやるくらいならAstroなどを使ったコンポーネント志向の開発を学んでしまった方がいい）

#Web制作 December 12, 2025

【Webコーダーさんは要チェック！】

実は新しくなってるCSSの指定方法3つ！
※その記述方法はもう古いかも・・？

✅️左右中央寄せしたいとき！
margin: 0 auto; ではなくて
margin-inline: auto;
が良い

これなら上下のマージンを
リセットせずに済みます✨
（inline=横、block=縦と覚えればOK！）

✅ rgbaはもう古い・・
色と透明度を同時に指定する時に多用するrgba、
今はrgbが最新版

「,」 区切りがない分ちょっとスッキリ

✅️transform系は個別指定できる
translate: -50% -50%;
scale: 1.1;
って個別指定できちゃいます

これなら記述の順序を気にしなくていいし、
hover時の上書きとかも楽々

※なぜかskewだけは個別指定NGなので注意

とはいえ知らぬ間に
これらも古くなってる可能性大だから
ちゃんとキャッチアップしてくのが大事ですね。

プロフのnoteにまとめてるから
そっちも読んでみてほしい😌 December 12, 2025

Cursor Browserの、CSS一覧が見やすい！　Chromeの開発者ツールだと、有効なものと無効なものが打ち消し線とかでごちゃごちゃってなるのが、Cursorは本当に今かかっているCSSだけを一覧できる。最高。 https://t.co/g0IJJaXnmc December 12, 2025

5日間でWEBコーディングの基本を一気に身につける短期集中のイベントです。

HTML / CSS / JavaScriptを使い、実際のデザインをもとにWEBページを作りながら、「見た目を再現する」だけでなく、WEB制作の考え方や進め方を学ぶことができます。
#沖縄 #プログラミング
https://t.co/hCJFyI6C43 December 12, 2025

結構同意見です🥹

素のJSもかなり分かりやすく
記述できるようになってますし、
CSSの進化も目覚ましいですからね

今後のことを考えても、
積極的に学ぶ意味はあんまりないのかなあと・・

ただ初学者にとってjQueryの手軽さは
「JS面白いやん！」
ってなるいいきっかけではあるよな・・
とも思ったり🥺 December 12, 2025

Figmaデザインで英語の大文字禁止って本当？
検証してみた

「Figmaでは直接大文字を入力せず、CSSの text-transform: uppercase; に対応するため、小文字入力して設定で大文字に見せるべき！」とよく聞きます。

僕もポストしたことがありますし、同様の記事をよく見ます。

理由は「スクリーンリーダーが正しく読み上げないから」です。でも、これって本当？

いま、Web制作におけるデザインデータの「それダメ！」を集めています。適当なことは書けないなと思い自分のバージョンアップも含めて検証しました。

検証結果...完璧ではない！

検証1：「LINE WORKS」
→「ラインワークス」…読めるじゃん！

検証2：「ABOUT US」
→「アバウト ユーエス」…おしい！

Chromeのリーディングモードで確認しただけですが、すべての英単語が正しく読まれるわけではないと判明。

完全アウトではないけど、安全とは言い切れないというのが実感でした。

参考情報
ウェブアクセシビリティ支援の専門企業 BOIA の2024年5月の記事では、「一部の古いスクリーンリーダーやTTS（テキスト読み上げソフト）では、大文字を1文字ずつ読み上げる場合がある」とのこと。

個人的な結論
・Figmaでは大文字を直接入力しない
・CSSで見た目を大文字に変更が安全

つまり、前ほど気を配る必要はないが、安全のためにFimgaデザインデータも直接入力せず、基本設定画面の「大文字と小文字の設定」から大文字し、CSS側も「text-transform: uppercase;」を使いましょう。

...が、2025年12月段階であくまで個人的な正解なのかなと感じました。

※あくまでデザインデータとCSSの管理の話です。アクセシビリティ的に「大文字が良い／悪い」という話ではないです。 December 12, 2025

こりゃまいった...過去最高レベルで震えてます。『ChatGPT5.2Thinking』使ったら3分でこのクオリティのLPが作れました。これガチで革命だわ...

フリーランスのHP制作代行とかLP制作代行とかガチで仕事消滅するかも。体育会系で非エンジニアの僕でも3分でLP作れるとは。ちなみにプロンプトはこれだけ⤵

ーーーーーーーーーーーーーーーーーーーーー
かっこいい Web ページを制作してください。 創造性を最大限発揮し、デザイン・構成ともに独創的な表現を追求してください。 スムーズなスクロールアニメーション、派手かつ調和の取れた配色、Tailwind CSS を使ったスタイル表現を盛り込み、レスポンシブも必須とします。 ページタイトルは “爆速ＡＩ”。 判断が分かれる点は、あなたの美的判断に基づき最適だと思う方向へ寄せてください。
ーーーーーーーーーーーーーーーーーーーーー December 12, 2025

#今日の積み上げ
2025/12/12
☑︎初級編DAY5
・ゼロからサイトを作ってみる
→header作成、クラス名にCSSスタイルを当てる理由、思い通りの見た目にならない時の確認ポイント6つ、CSSのクラスが反応しない時の対処法

#デイトラ
#Web制作 December 12, 2025

YMM4の動画編集•BlockBenchでのモデリングとかは結構できる
HTML•CSSは基礎は割と簡単だしやりやすい
Pythonも理解はできるしコツコツ積み重ねていけばできないことはなさそう
絵は何をどう頑張っても自分の限界を感じる December 12, 2025

有益な問題提起をありがとうございます！

私も同様のことを考えたことがあり、
CSS仕様の誤解釈に悩まされた経験があります

特に Firefox の厳密な仕様に泣かされました😭

同じような勘違いをされている方も多そうなので
その内容を共有させていただきますね✨

（返信へ続く）
#Web制作 #CSS https://t.co/2cySLaOsWp https://t.co/7WpN2j5kFD December 12, 2025

結論から言うと、calc(単位 / 単位) は、
CSS仕様上、無効 or 曖昧な値 になります🆖

Chrome や Safari は比較的寛容なので、
数学的に真なら表示されるケースも多いのですが

Firefox のように仕様に忠実なブラウザでは、
画像のように、弾かれてしまう場合が多いです

（返信へ続く）
#Web制作 #CSS December 12, 2025

フックと戻り値の命名ちゃんとすることでコンポーネント側で読むときはフックを信じるようにして、具体何やってるか見たい時はフックを見に行くのを心がけてる（CSSが別ファイルになってるくらいの感覚） December 12, 2025

しかし、私の苦手なCSSの細かい指示は難しい。
でも、なんとかなりそう。 December 12, 2025

最近のcssの新しいスタイルって、
「こういう時、こういうのがあったらなぁ…」
って思った事がある様な機能が多いんだけど、そこそこな期間コーダーやってると、それを使わなくても済む方法を知っちゃってるから、中々覚えられないんだよなぁ…。 December 12, 2025

🚨急募！！

【募集内容】
WordPressテーマ TCD「OOPS!」 を使用して制作中のホームページについて、
見栄え・デザイン性・レスポンシブ（スマホ表示） を整えていただける方を募集します。

ページ構成やテキストはすでに入っており、
新規制作ではなく「編集・調整のみ」 のお仕事です。

【依頼したい内容】
・全体の見栄え・デザインバランスの調整
・スマホ／タブレット表示の最適化（レスポンシブ調整）
・余白・文字サイズ・行間などの調整
・必要に応じた CSSカスタマイズ によるデザイン改善
※テーマの仕様に沿った範囲での調整を想定しています

【使用環境】
WordPress
有料テーマ：TCD「OOPS!」

【納期】
急ピッチ案件です（1〜2日以内で対応可能な方）

【報酬】

10,000円〜15,000円

【歓迎する方】
・WordPressの編集・デザイン調整の実務経験がある方
・TCDテーマを使った制作・カスタマイズ経験のある方
・CSSで細かいデザイン調整ができる方
・短納期でも丁寧に対応いただける方

こちらから、細かい指示がなくても対応いただける方優先🙇‍♂️

🙌🏻応募時に教えてください
・WordPress編集・デザイン調整のご経験
・TCDテーマの使用経験（あれば）
・過去の制作実績（URLがあれば）
・1〜2日で対応可能かどうか

実際のページを見てからご判断いただいてもOKです！
お気軽にご連絡ください！ December 12, 2025

Webデザインの自主制作でサイト作りを始めたけど、自分の好きなテーマでのサイト作りとはいえ、HTML·CSSが上手く反応しなかった為100%思い通りのサイト作りが出来なかった

現時点でこの調子だと、Webデザインを仕事にするのはちと難しい気がしてきた…… December 12, 2025

css-modules-kit の watch mode 実装していたはずなのに、何故かmacOS のドキュメントを読み漁る羽目になっていて困った。急がば回れと言いつつそのまま国を飛び出して海外で遊び歩いている状態。 December 12, 2025