私の年間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

【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

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

＼本音で話します／ここだけの話🤫
🚀 私のWEB制作1単価30万円～までの道のり

🚀 HP制作・コーポレートサイト制作をメインで受注したいデザイナーさんへ向けて💌

🔰完全未経験の勉強開始から、途中目標としていた案件価格帯での受注が安定するまでの道のりをまとめました🗺

**********************

🐣 【学び期+挫折期】2020年年末～2022年
～まずは基礎固めと模写×模写～

1⃣基礎習得📚
HTML/CSS/jQueryなどの静的コーディング（Progate、Udemy動画）
💰 報酬：0円

2⃣模写 サイト初体験💻
当時王道の「イサラ模写」に挑戦
💰 報酬：0円

3⃣模写＋オリジナルサイト作成🎨
計10サイトを作成（実案件風講座「コードステップ」活用）
人生初のポートフォリオ完成✨
💰 報酬：0円

4⃣ SEO対策の基礎を独学🔍
書籍・参考サイトで学習（HP制作に必須の知識！）
💰 報酬：0円

😭この間に半年間挫期でPCを開いていません。

**********

🏃‍♂️ 【初動期】2023年～
～0→1達成！ 初めての収益化～

5⃣🎉 初案件獲得✨✨
知人会社のサイトリニューアル（17ページ超）
自分から営業して初受注＆師匠からリアルSEO対策を学ぶ
💰 報酬：50,000円

6⃣ノーコード（ペライチ）習得🛠️
独学でマスターし、サンプル10作品作成
👉 「ペライチ公認サポーター」に認定🎓
💰 報酬：0円（自主制作）

7⃣🔰 ココナラで初案件
大手化粧品会社の新商品LP（ペライチ シングルページ）
💰 報酬：20,000円

***********************

📈 【単価ステップアップ期】～2023～24年
～実績を積み重ねつつ、WordPress習得へ～

8⃣ ペライチ外注（5件目～）
初めて単価交渉・アップに挑戦
💰 報酬：30,000円～

9⃣ペライチ外注（10件目～）🚀
2度目の単価アップ＋下層ページ導入
💰 シングル：50,000円～
💰 5ページサイト：80,000円～

🔟 WordPress独学習得📝
Udemy・参考書で学習
使用テーマ：Cocoon、SWELL、Astraなど

⑪🌟 WordPress初案件
本格的なサイト制作へ
💰 報酬：100,000円（1サイト）

👑 【案件獲得・安定期】2024年～現在
～目標としていた価格帯で受注できるフェーズへ～
⑫💎 目標価格帯での安定受注

2024年末頃から、目標としていた価格帯（30万円～）での安定受注を実現できるようになりました！

***************************************
💠まとめ

💡 単価アップの秘訣（振り返り）
ツールの使い分け
「まずは名刺代わりのサイト」👉 ペライチ
「本格的なコーポレートサイト」👉 WordPress
クライアント様のニーズに合わせて提案を変えました。

💫プラスアルファのスキルセット
初期から「WEBデザイン」「SEO」「ライティング」「サーバー・ドメイン代行」を幅広く学んでいたことが、WordPress導入後の単価急上昇に繋がりました。

※本年表はHP/サイト制作に絞った内容です（名刺・チラシ・SNS運用などは割愛）

図解はジェミニ作（5秒） December 12, 2025

＼本音で話します／ここだけの話🤫
🚀 私のWEB制作1単価30万円～までの道のり

🚀 HP制作・コーポレートサイト制作をメインで受注したいデザイナーさんへ向けて💌

🔰完全未経験の勉強開始から、途中目標としていた案件価格帯での受注が安定するまでの道のりをまとめました🗺

**********************

🐣 【学び期+挫折期】2020年～2022年
～まずは基礎固めと模写×模写～

1⃣基礎習得📚
HTML/CSS/jQueryなどの静的コーディング（Progate、Udemy動画）
💰 報酬：0円

2⃣模写 サイト初体験💻
当時王道の「イサラ模写」に挑戦
💰 報酬：0円

3⃣模写＋オリジナルサイト作成🎨
計10サイトを作成（実案件風講座「コードステップ」活用）
人生初のポートフォリオ完成✨
💰 報酬：0円

4⃣ SEO対策の基礎を独学🔍
書籍・参考サイトで学習（HP制作に必須の知識！）
💰 報酬：0円

😭この間に半年間挫期でPCを開いていません。

**********

🏃‍♂️ 【初動期】2023年～
～0→1達成！ 初めての収益化～

5⃣🎉 初案件獲得✨✨
知人会社のサイトリニューアル（17ページ超）
自分から営業して初受注＆師匠からリアルSEO対策を学ぶ
💰 報酬：50,000円

6⃣ノーコード（ペライチ）習得🛠️
独学でマスターし、サンプル10作品作成
👉 「ペライチ公認サポーター」に認定🎓
💰 報酬：0円（自主制作）

7⃣🔰 ココナラで初案件
大手化粧品会社の新商品LP（ペライチ シングルページ）
💰 報酬：20,000円

***********************

📈 【単価ステップアップ期】～2023～24年
～実績を積み重ねつつ、WordPress習得へ～

8⃣ ペライチ外注（5件目～）
初めて単価交渉・アップに挑戦
💰 報酬：30,000円～

9⃣ペライチ外注（10件目～）🚀
2度目の単価アップ＋下層ページ導入
💰 シングル：50,000円～
💰 5ページサイト：80,000円～

🔟 WordPress独学習得📝
Udemy・参考書で学習
使用テーマ：Cocoon、SWELL、Astraなど

⑪🌟 WordPress初案件
本格的なサイト制作へ
💰 報酬：100,000円（1サイト）

👑 【案件獲得・安定期】2024年～現在
～目標としていた価格帯で受注できるフェーズへ～
⑫💎 目標価格帯での安定受注

2024年末頃から、目標としていた価格帯（30万円～）での安定受注を実現できるようになりました！

***************************************
💠まとめ

💡 単価アップの秘訣（振り返り）
ツールの使い分け
「まずは名刺代わりのサイト」👉 ペライチ
「本格的なコーポレートサイト」👉 WordPress
クライアント様のニーズに合わせて提案を変えました。

💫プラスアルファのスキルセット
初期から「WEBデザイン」「SEO」「ライティング」「サーバー・ドメイン代行」を幅広く学んでいたことが、WordPress導入後の単価急上昇に繋がりました。

※本年表はHP/サイト制作に絞った内容です（名刺・チラシ・SNS運用などは割愛）

図解はジェミニ作（5秒） December 12, 2025

＼本音で話します／ここだけの話🤫
🚀 私のWEB制作1単価30万円～までの道のり

🚀 HP制作・コーポレートサイト制作をメインで受注したいデザイナーさんへ向けて💌

🔰完全未経験の勉強開始から、途中目標としていた案件価格帯での受注が安定するまでの道のりをまとめました🗺

**********************

🐣 【学び期】2020年～
～まずは基礎固めと模写×模写～

1⃣基礎習得📚
HTML/CSS/jQueryなどの静的コーディング（Progate、Udemy動画）
💰 報酬：0円

2⃣模写 サイト初体験💻
当時王道の「イサラ模写」に挑戦
💰 報酬：0円

3⃣模写＋オリジナルサイト作成🎨
計10サイトを作成（実案件風講座「コードステップ」活用）
人生初のポートフォリオ完成✨
💰 報酬：0円

4⃣ SEO対策の基礎を独学🔍
書籍・参考サイトで学習（HP制作に必須の知識！）
💰 報酬：0円

🏃‍♂️ 【初動期】2022年～
～0→1達成！ 初めての収益化～

5⃣🎉 初案件獲得✨✨
知人会社のサイトリニューアル（17ページ超）
自分から営業して初受注＆師匠からリアルSEO対策を学ぶ
💰 報酬：50,000円

6⃣ノーコード（ペライチ）習得🛠️
独学でマスターし、サンプル10作品作成
👉 「ペライチ公認サポーター」に認定🎓
💰 報酬：0円（自主制作）

7⃣🔰 ココナラで初案件
大手化粧品会社の新商品LP（ペライチ シングルページ）
💰 報酬：20,000円

📈 【単価ステップアップ期】～2023年頃
～実績を積み重ねつつ、WordPress習得へ～

8⃣ ペライチ外注（5件目～）
初めて単価交渉・アップに挑戦
💰 報酬：30,000円～

9⃣ペライチ外注（10件目～）🚀
2度目の単価アップ＋下層ページ導入
💰 シングル：50,000円～
💰 5ページサイト：80,000円～

🔟 WordPress独学習得📝
Udemy・参考書で学習
使用テーマ：Cocoon、SWELL、Astraなど

⑪🌟 WordPress初案件
本格的なサイト制作へ
💰 報酬：100,000円（1サイト）

👑 【案件獲得・安定期】2024年～現在
～目標としていた価格帯で受注できるフェーズへ～
⑫💎 目標価格帯での安定受注

2024年末頃から、目標としていた価格帯（30万円～）での安定受注を実現できるようになりました！

***************************************
💠まとめ

💡 単価アップの秘訣（振り返り）
ツールの使い分け
「まずは名刺代わりのサイト」👉 ペライチ
「本格的なコーポレートサイト」👉 WordPress
クライアント様のニーズに合わせて提案を変えました。

💫プラスアルファのスキルセット
初期から「WEBデザイン」「SEO」「ライティング」「サーバー・ドメイン代行」を幅広く学んでいたことが、WordPress導入後の単価急上昇に繋がりました。

※本年表はHP/サイト制作に絞った内容です（名刺・チラシ・SNS運用などは割愛）

図解はジェミニ作（5秒） December 12, 2025

＼本音で話します／ここだけの話🤫
🚀 私のWEB制作1単価30万円～までの道のり

🚀 HP制作・コーポレートサイト制作をメインで受注したいデザイナーさんへ向けて💌

🔰完全未経験の勉強開始から、途中目標としていた案件価格帯での受注が安定するまでの道のりをまとめました🗺

**********************

🐣 【学び期】2020年～
～まずは基礎固めと模写×模写～

1⃣基礎習得📚
HTML/CSS/jQueryなどの静的コーディング（Progate、Udemy動画）
💰 報酬：0円

2⃣模写 サイト初体験💻
当時王道の「イサラ模写」に挑戦
💰 報酬：0円

3⃣模写＋オリジナルサイト作成🎨
計10サイトを作成（実案件風講座「コードステップ」活用）
人生初のポートフォリオ完成✨
💰 報酬：0円

4⃣ SEO対策の基礎を独学🔍
書籍・参考サイトで学習（HP制作に必須の知識！）
💰 報酬：0円

🏃‍♂️ 【初動期】2021年～
～0→1達成！ 初めての収益化～

5⃣🎉 初案件獲得✨✨
知人会社のサイトリニューアル（17ページ超）
自分から営業して初受注＆師匠からリアルSEO対策を学ぶ
💰 報酬：50,000円

6⃣ノーコード（ペライチ）習得🛠️
独学でマスターし、サンプル10作品作成
👉 「ペライチ公認サポーター」に認定🎓
💰 報酬：0円（自主制作）

7⃣🔰 ココナラで初案件
大手化粧品会社の新商品LP（ペライチ シングルページ）
💰 報酬：20,000円

📈 【単価ステップアップ期】～2023年頃
～実績を積み重ねつつ、WordPress習得へ～

8⃣ ペライチ外注（5件目～）
初めて単価交渉・アップに挑戦
💰 報酬：30,000円～

9⃣ペライチ外注（10件目～）🚀
2度目の単価アップ＋下層ページ導入
💰 シングル：50,000円～
💰 5ページサイト：80,000円～

🔟 WordPress独学習得📝
Udemy・参考書で学習
使用テーマ：Cocoon、SWELL、Astraなど

⑪🌟 WordPress初案件
本格的なサイト制作へ
💰 報酬：100,000円（1サイト）

👑 【案件獲得・安定期】2024年～現在
～目標としていた価格帯で受注できるフェーズへ～
⑫💎 目標価格帯での安定受注

2024年末頃から、目標としていた価格帯（30万円～）での安定受注を実現できるようになりました！

***************************************
💠まとめ

💡 単価アップの秘訣（振り返り）
ツールの使い分け
「まずは名刺代わりのサイト」👉 ペライチ
「本格的なコーポレートサイト」👉 WordPress
クライアント様のニーズに合わせて提案を変えました。

💫プラスアルファのスキルセット
初期から「WEBデザイン」「SEO」「ライティング」「サーバー・ドメイン代行」を幅広く学んでいたことが、WordPress導入後の単価急上昇に繋がりました。

※本年表はHP/サイト制作に絞った内容です（名刺・チラシ・SNS運用などは割愛）

図解はジェミニ作（5秒） December 12, 2025

＼本音で話します／ここだけの話🤫
🚀 私のWEB制作1単価30万円～までの道のり

🚀 HP制作・コーポレートサイト制作をメインで受注したいデザイナーさんへ向けて💌

🔰完全未経験の勉強開始から、途中目標としていた案件価格帯での受注が安定するまでの道のりをまとめました🗺

🐣 【学び期】2020年～
1⃣～まずは基礎固めと模写×模写～
基礎習得📚
HTML/CSS/jQueryなどの静的コーディング（Progate、Udemy動画）
💰 報酬：0円

2⃣模写 サイト初体験💻
当時王道の「イサラ模写」に挑戦
💰 報酬：0円

3⃣模写＋オリジナルサイト作成🎨
計10サイトを作成（実案件風講座「コードステップ」活用）
人生初のポートフォリオ完成✨
💰 報酬：0円

4⃣ SEO対策の基礎を独学🔍
書籍・参考サイトで学習（HP制作に必須の知識！）
💰 報酬：0円

🏃‍♂️ 【初動期】2021年～
5⃣～0→1達成！ 初めての収益化～
🎉 初案件獲得✨✨
知人会社のサイトリニューアル（17ページ超）
自分から営業して初受注＆師匠からリアルSEO対策を学ぶ
💰 報酬：50,000円

6⃣ノーコード（ペライチ）習得🛠️
独学でマスターし、サンプル10作品作成
👉 「ペライチ公認サポーター」に認定🎓
💰 報酬：0円（自主制作）

7⃣🔰 ココナラで初案件
大手化粧品会社の新商品LP（ペライチ シングルページ）
💰 報酬：20,000円

📈 【単価ステップアップ期】～2023年頃
～実績を積み重ね、WordPressへ～
8⃣ ペライチ外注（5件目～）
初めて単価交渉・アップに挑戦
💰 報酬：30,000円～

9⃣ペライチ外注（10件目～）🚀
2度目の単価アップ＋下層ページ導入
💰 シングル：50,000円～
💰 5ページサイト：80,000円～

🔟 WordPress独学習得📝
Udemy・参考書で学習
使用テーマ：Cocoon、SWELL、Astraなど

⑪🌟 WordPress初案件
本格的なサイト制作へ
💰 報酬：100,000円（1サイト）

👑 【案件獲得・安定期】2024年～現在
～目標としていた価格帯で受注できるフェーズへ～

💎 目標価格帯での安定受注

2024年末頃から、目標としていた価格帯（30万円～）での安定受注を実現できるようになりました

***************************************
＜まとめ＞

💡 単価アップの秘訣（振り返り）
ツールの使い分け
「まずは名刺代わりのサイト」👉 ペライチ
「本格的なコーポレートサイト」👉 WordPress
クライアント様のニーズに合わせて提案を変えました。

💫プラスアルファのスキルセット
初期から「WEBデザイン」「SEO」「ライティング」「サーバー・ドメイン代行」を幅広く学んでいたことが、WordPress導入後の単価急上昇に繋がりました。

※本年表はHP/サイト制作に絞った内容です（名刺・チラシ・SNS運用などは割愛）

図解はジェミニ作（5秒） 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

firefoxのサイドバーの色変になったのとりあえずよくわからなかったので検索したらuserChrome.cssをいじるといいとのことだったのでsidebarとsidebar-headerをbackground-colorで指定したら無事に色変わった。よかったよかった。 December 12, 2025