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

CSSアニメーションで作った、楽しげなロゴのアニメーションアイデア集をYouTubeに投稿しました。
よければ見ていただけたら嬉しいです。
https://t.co/VR0hGVGCMJ https://t.co/4wQTmaKAgE December 12, 2025

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

XCSS weibo 21/12/11

独家童话 のドラマ撮影現場へミルクティー
を差し入れをしてくれたハオちゃん
バックハグのおまけ付ですよ( ´ཫ` )ｸﾞﾊｧ

full▶︎https://t.co/Oa1Hn93Dn6

今日も大好きだよジュニ♥️
今夜は東京ドーム、楽しんでね！

#준 #JUN #마이아이즈 @pledis_17 https://t.co/UQ8jTJb7i8 https://t.co/3nQ2bIuTd0 December 12, 2025

OBS&discord有識者助けて〜😭

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

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

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

更にレベルアップ！
2分くらいあっという間に時間奪うデザインしてるから見てみて。
Gemini3.0で @GeminiApp で作った。
みんながいつも使ってるGeminiアプリだよ！

ちなみにこれ、HTML（中にCSSとJavascriptがある）ファイルだからダウンロードすればFTPにアップすればこれが見れちゃうわけです。

これは20回～30回くらいプロンプトを入れて作ってるので共有が難しいけど、完成したらnoteでファイルごと販売しようと思います。

べこくりでは現在、「3Dウェブデザインを作ろう回」を複数回にわたって行っています。
昨晩は1回目をしました。
基本ができたので次は微調整とアニメーションの追加などをしてきますよー。

副業とか言ってる方々や、ウェブデザインで縦スクロールしかやってない人って、いつまでLPで平面デザインやるんですかね？

時代は確実に3Dデザインも求められるようになるので、ずっと平面ばっかりやってるのはとってもまずいと私は考える。
今はまだ…と考えていても、いざそれらが当たり前になった時、もう手遅れになっていることに気づかないと思うんです。
なので、今から少しずつでもやってきましょうよ。

これ、ウェブデザイン未経験者でも作れますからね。
「べこくり」で実証しています。

ちなみにこの3Dデザインは私にとってはまだ通過点でしかないので、もっと探究していきます。 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

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

【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

【リキッドレイアウト × アクセシビリティ みなさんどうしてますか？】

htmlタグの font-size を可変にして rem で全体管理する手法、よく使われますよね。
ブラウザの横幅に応じてフォントサイズやオブジェクトの幅を可変で管理できて、デザインカンプを再現する上で非常に強力です。

ただ、ユーザーがブラウザで設定した「既定フォントサイズ」が効かなくなるというアクセシビリティ面のデメリットが気になっていて、それを解消すべく以下のようなスタイル管理を考えてみました。

・htmlのfont-sizeは変更しない（デフォルト16px）
・可変指定は bodyタグのfont-sizeで設定する
・サイズ指定は rem ではなく em でおこなう

これで、ブラウザ側の文字サイズ変更を保ったままリキッドレイアウトを実現できました。
また、タイポグラフィの記述でemを使うことはW3Cでも推奨されてるっぽいのでよさげです。
https://t.co/C3hLRmUVJv

ただ正直、この方法に大きなデメリットは無いか、実践投入して問題ないかが気になっています。チーム開発だと難しいけど個人で作れる小規模サイト構築なら有効かな、とか。
批判・反論、みなさんのご意見お待ちしています。というかご意見欲しい。

コーディングの詳細はこちらです。
■画面
https://t.co/Hd179FrPyd
■実装
https://t.co/M6qa8XMQ3o

#Web制作 #CSS #フロントエンド December 12, 2025

CSSはチャーハンみたいなもので、作ること自体は簡単だけど、美味しく作るのが難しい December 12, 2025

✅【永久保存版】未経験からWebで稼げるようになるための職種マップ（2025年最新）

今すぐブックマーク推奨📌

────────────────
🎨 1. Webデザイナー
→ 「見た目」と「使いやすさ」を作る人

主な仕事
・クライアントヒアリング＋企画
・ワイヤーフレーム作成
・Figmaでのデザインカンプ制作
・簡単なHTML/CSSコーディング

必要なスキル
・Figma（最重要）
・Photoshop/Illustrator（基礎でOK）
・配色・タイポグラフィのセンス
・UI/UXの基本知識

────────────────
💻 2. コーダー

→ デザインを「ピクセルパーフェクト」で再現する職人

主な仕事
・Figma→HTML/CSS/JavaScriptへの変換
・アニメーション実装（GSAPなど）
・レスポンシブ対応／ブラウザ対応
・WordPressテーマ化

必要なスキル
・HTML/CSS（完璧に）
・JavaScript（jQueryでも可）
・Sass / Tailwind CSS
・WordPressのカスタムテーマ作成

※「コーダー」は現在「ノーコードに仕事取られる」と言われがちですが、実際は「細かい調整ができる人」がめちゃくちゃ足りていません。

────────────────
🧑‍💻 3. Webエンジニア

→ 「動くサービス」を作る人。

主な仕事
・バックエンド開発（PHP/Laravel, Ruby, Python, Node.jsなど）
・データベース設計
・API開発
・サーバー設定／デプロイ
・保守運用

必要なスキル
・1言語を深く
・Git / GitHub
・Linux基礎
・MySQL or PostgreSQL
・AWS or Vercelでのデプロイ経験

────────────────
【結論】どのルートがあなたに合うか？

・センスに自信あり → Webデザイナー
・コツコツ作業が好き → コーダー
・論理的思考が得意 → Webエンジニア

全部未経験から目指せます。
大事なのは「最初に1つに絞って突き進む」こと。

────────────────

明日は、「具体的な仕事の探し方」を投稿します！
気になる人はフォロー＋通知オンでお待ちください🙇‍♂️

#Webデザイナー #コーダー #Webエンジニア #忍者CODE December 12, 2025

昨日作った。じゃんけんページ。
GithubPagesって使ったことなかったので、使ってみたくなったのが作った理由の3割。良い機能だ。
html+cssは未調整部分が多いので、表示の不安定さは許して。うさぴょんの動きがお気に。
https://t.co/b2d2n5rvFg https://t.co/t75RmAW1Un December 12, 2025

いくら稼ぎたいですか？
ここ、最初に決めんとしんどくなるで。

最近な、Webデザインのスクール卒業したての人と話すことが増えてきてんけど、けっこうな確率でこう思うねん。

「あら？基礎できてへんのとちゃう？」って。

「HTMLとCSS、どれぐらい触った？」って聞いたら、
『あ、教えてもらってません』って返ってくる。

そら、h1？ width？ ブレイクポイント？って聞いても、
・・・「きいたことあります。」

で、参考サイト見てもらって「このフォント何かしらべられる？」って聞いたら、
検証ツールの存在すら知らんから、もう調べようもない。

これ、HTML・CSSだけの話ちゃうねん。

『Figma触ったことない』
『デザインの言語化ができません』

スクールって、やっぱりツールの使い方を教えることを目的にしているとこが多いんかな？

もちろんな、スクールも「うちはコーディング教えません」って最初から言うてるところもあるし、受講生も分かってて入ってる。それはOK。

ただな、そういうスクールって、すでにコーダーの人がデザイン学びたいとか、ディレクター職が＋αで武器増やしたいって人向けやと思うねん。

それをや、まったくの初心者がPhotoshop触って課題だけ作って卒業しましたー！ってなっても、これで現場、ほんまにいける？案件、回せる？ってなるよね。

コーダーと話されへん。
クライアントにも説明できへん。
修正の指示？・・・たぶんムリや。

制作会社入りたいって言っても、なかなか厳しいと思うで🤔

ほんま、ドラクエで言うたら
『武器：こん棒、防具：布の服』で、
「じゃ、魔王倒してきてな〜」って外に放り出されるようなもんやで。

スライムすらキツいのに、
外うろついた瞬間ゴーレムにフルボッコ。

開始2分で「全滅しました」や。

そら無理やって。

最近、イチさん（@hash666699）の『方舟』見てて、
めっちゃ刺さった言葉があってな。

「スクール迷子向けに教えてるけど、最近は“基礎すらできてない人”が増えてる」

これ、ほんまに“あるある”になってきてる。

でもな、これってスキル云々より、
「順番まちごうてる」だけなんよ。

やるべき順番は、これ👇

・まず、自分がどうなりたいか決める
・そのために必要なスキルを洗い出す
・それに合った手段（独学 or スクール）を選ぶ

この順番すっ飛ばして「とりあえずスクール」行ってもうたら、そら迷子にもなるわ。

スクールは魔法ちゃうから。
月5万円でええんか、月50万、月100万なのか、これ決めてたら行くべきスクールや頼るべき人も変わってくるやん。

ボクは最初、月5万円のおこ使いが欲しくって、独学でWordPressやっててん。
そのあとデザインできたら10万円なるんちゃう→「時短したいな」って思ってRaiseTech行った。
そっから「マーケ足りてへんわ」ってなってオンラインスクール、最終的にはイチさんのLiberteへ。

今考えたら、ちゃんと逆算して選んできたと思うてる。

せやから、今日も声を大にして言います。
「迷子になる前に、まず地図つくろうや」
こん棒と布の服ちゃうで。ちゃんと準備して、進んだらええねん。 December 12, 2025

︎
ꉂ📣 お知らせ 🐹！

めりぃぱめりぃさんの素敵で可愛い
ハムスターのうちわコメントCSSの
モデルをさせていただきました🐹🎀✨

ハムスターモチーフの物って
なかなかないので本当に嬉しいです🌻

大切に使用させていただきます！ https://t.co/bPpUlkoe2E December 12, 2025

AIが進化して本当便利になったよね〜
CSSとかよくわからないけどAIに聞けばすぐコード書いてくれる😆
このギフテラくじが作れたのもAIの進化のおかげだ！
活用には少しの知識は必要だけど、独学で何でもできる世の中になってきたね！
ありがとうAI🫶✨ https://t.co/rHDoUyrtbb December 12, 2025

『CSS』（6）
『.の意味』
CSS中の「.」はクラス名をセレクタするときに使う。使用方法は「#」と同じ。「.」の有無でクラス名なのかHTMLの要素名なのかを決める。
.test{
color:red;
}
とすれば
<p class=”test”>ここはクラス名を付けているので適用</p>。 December 12, 2025

https://t.co/X1k6RlYvfW #saikyo_dev
>TypeScript(JavaScript) ベースのビジュアルノベルゲームエンジンです。
>UIをHTML・CSS・JavaScriptで柔軟に作成でき、シナリオをマークアップ言語とJavaScriptで制御できます。 December 12, 2025

本日もご来店ありがとうございました。
本日はオープン半年記念ということで開始からたくさんの方にご来店いただきまして大盛況。
今後とも週に一回、いつもの時間で開店しておりますのでご来店お待ちしております。

次回営業は一週飛んで12/28 00:30～
よろしくお願いいたします。
#GCSS #VRChat https://t.co/aF1P1rtMdp December 12, 2025

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

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

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