RAXUS AI SCHOOL

AIゲーム、AIツール、AI自動化。 実はプログラミング初心者でも作れます！ AIを「使う側」から「作る側」へ。 RAXUS AI SCHOOLでは、 生成AI・業務自動化・AIエンジニアなど 全8コースを提供しています。 経産省リスキリング補助金対象。 最大70％還元💰 AIを学びたい方👇 raxus-ai-school.jp

@ninjacodeee rotateYだけ見がちですが、translateZでパーツごとの立体感を出すと一気に完成度上がりますね。カード全体を回すだけじゃなく、文字やチップの浮きまで作ると見え方がかなり変わる。CSSでここまで表現できるのは面白いです。

クレジットカードの3Dフリップは CSSだけで作れます。 実は仕組みシンプルでこれだけです。 ① perspective（奥行き） ② rotateY（裏返し） ③ translateZ（パーツを前に出す） 特に重要なのが③ → チップや文字を前に出すと”本物感”出ます

Microsoft 365（Outlook・OneDrive・SharePoint）がClaudeと連携可能に。メール・資料・ファイルをそのまま読み込ませて、要約や分析まで一気にできるようになります。コピペ不要で業務効率が大幅に向上。AIを「仕事のパートナー」へと進化させるアップデートです。

@ninjacodeee checkbox + :checked を理解すれば、 トグルだけじゃなくタブ・モーダル・アコーディオンもCSSだけで作れます。「クリック状態をCSSで制御する」がポイントですね👍

【初心者向け】CSSだけでトグルスイッチ作れます。 ・クリックでON/OFF ・JSなしでOK ・仕組みも図解で理解 最初ここ理解しておくと UI作れる幅一気に広がります 保存してあとで触ってみてください

@ninjacodeee 「なんとなく動く」じゃなくて、なぜ表示されるのか”を理解すると応用力が一気に上がりますね！hover × position の組み合わせって、モーダル・ツールチップ・メガメニューにも応用できるので、ここを押さえるだけで一気に初心者脱却できると思います🔥

CSSでドロップダウン作れますか？ 実はこれだけです。 ✔ 親をhover ✔ 子メニューを表示 たったこれだけでナビメニュー完成します。 しかも使うのは ・position: relative ・position: absolute ・:hover この3つだけ 構造まで理解しておくと強いです。 保存していつでも見返してください。

生成AIで、2026年MLB新ルール 「ABS（ロボット審判）チャレンジ制度」を インフォグラフィックにしてみた。 ・誰がチャレンジできる？ ・回数は？ ・ストライクゾーンは？ テキストの出力より分かりやすい 図解も一瞬で作れます

@ninjacodeee 最初は『なんでinputを使うの？』って驚くけど、一度理解すると一気に世界が広がりますよね。実務でも『え、これCSSだけでやってるんですか！？』って驚かれることが多い、コスパ最強のテクニックだと思います。

そのアコーディオン、JSで作ってませんか？ 実はCSSだけで作れます。 ✔ input = 状態 ✔ label = クリック ✔ = 開閉 この3つだけ。 仕組みから理解すると応用できます。 保存して何度でも見返してください。

@ninjacodeee JSを使わないメリット実は大きい！読み込み速度もそうですが、CSSだけで完結させるとカクつきも抑えられますし。visibility と opacity を組み合わせるのが、一番スマートなやり方だと思います。

ツールチップって知ってますか？ ボタンにマウス乗せると説明がふわっと出てくるやつ。 実はJSを使わず、CSSだけで作れます。 ✔ hoverで表示 ✔ opacityでアニメーション ✔ relative + absoluteで配置 この3つだけ。 シンプルなのに“プロっぽさ”が一気に出るUIです。 保存して使ってください。

生成AIに「いい感じで」は通じない。 数値ルールを渡すほうが出力が安定します。 スライドなら例えば ・余白30% ・フォント30pt以上 ・色の比率 70:25:5 これだけで美しい見た目に AIにセンスを期待しないのが、 中級者への近道です

ChatGPT、何度聞いても ずれた答えが返ってくるとき。 プロンプトの冒頭に 「今までの文脈は無視して」 と試しに入れてみてください。 前の会話を引きずってることが原因なら、 これだけで解決することも。 ちょっとしたコツで、 AIはもっと使いやすくなります

考えてること、うまくまとめられない… そんな時こそAIの出番です🎤 ① ボイスメモで思ってること全部しゃべる ② NotebookLMにアップロード ③「まとめて」と言うだけ 自分でまとめるよりも、 話した方が早いので結構便利。 壁打ちの1歩目に、 試しに活用してみてください。

@ninjacodeee これ理解するとJSなしで一気に幅広がりますね。radioで状態管理して:checkedで出し分けるだけ。タブはもちろん、簡易ステップUIやフィルターにも応用できるので最初に押さえておくとかなり楽です。

CSSだけでタブ切り替えできます。 この仕組みだけ理解すればOK！ label → radio → :checked → 表示 保存して見返してください。

@ninjacodeee display:noneだと「状態が消える」からtransition効かない。opacity＋transformにしておくと、開閉どっちも滑らかに制御できる。checkboxハックもシンプルで学習コスパ高いのが良いですね。

CSSだけでモーダル作れるの知ってますか？ 実はこれだけです。 仕組み：「checkbox × :checked」 モーダルの本質 = position: fixed さらに ✕ display:none → アニメーション不可 〇 opacity + transform → プロっぽい動き 初心者はここで詰まります。 この図を保存しておいてください。

まずは使ってみてからになりますが、今回のアップデートで一番大きいのは、アプリを「作ったけど動かない」問題がほぼ消えるところ。人が一番時間使ってた確認と修正をAIが回すので、精度によっては、開発スピードの次元が変わります。

Claude Codeまたアップデート！ Claude Codeは「コード書くAI」でしたが、 実際にアプリを触ってバグを直すAIに。 作る→動かす→直すまで一気通貫。 エンジニアの仕事、かなり変わりますね。

今起こっているAIと人間の関係性の変化を イラストにしてみました。 今のAIは「アシスタント」。 でもこれからは、チームになる。 複数のAIが連携して動き、 人間は意思決定だけすればいい時代へ。 変化は速いけど、できるところから。 AIを活用できる範囲を着実に広げていきましょう。

@ninjacodeee これは、最初に知ると一気に世界変わるやつです！ :checkedハックはシンプルなのに応用効くのが強い。 ただ本番だとアクセシビリティ（focus管理・aria属性）だけは意識しておくと安心です。

CSSだけでハンバーガーメニュー作れます。 ・JavaScript不要 ・クリックで開閉 ・仕組みはたった3ステップ ① checkboxを置く ② labelを押す ③ :checkedで表示 これだけで完成します。 初心者はまず display:none でOK 慣れてきたら transformでアニメーション 保存してあとで作ってみてください

ClaudeCodeを使って思うことは、コードを自分で打っていた頃は、バグやエラーが出ると解決法が分からず詰まって挫折、というのが未経験からエンジニアになるまでの過程において、あるあるでした。今は、AIがコードを書いてエラーやバグもチェックしてくれる。コードを打っていた時代が昔に思えますね。

メール返信って、じわじわ時間とられますよね…… OutlookのCopilotなら 要約→返信文までやってくれます。 たたきだけでも作れば、 塵も積もって結構な時短に。 他にも地味に助かるAI活用術をまとめました👇 あなたが地味に助かってるAI活用って何ですか？

@ninjacodeee JSなしでここまで表現できるの、改めてCSS面白い。ホバーは小さな差に見えて、並べて見ると印象がかなり変わるので勉強になります。「動かせる」だけじゃなくて、どの場面でどの表現を使うかまで考えるのが大事ですね！

CSSだけでボタンホバー15パターン 作ってみました。 JSなしでここまで動きます。 同じボタンでもこんなに変わります。

@ninjacodeee この5つだけでかなり差出ます👏特にホバーは「触りたくなるかどうか」を左右するので、ただ動かすよりも“意図のある動き”にするのが大事だと思ってます。やりすぎず、サイトのトーンに合わせて使い分けるのがプロっぽさの分かれ目ですね。

CSSだけで作れるボタンホバー5選👇 ・スライド塗りつぶし ・ネオン発光 ・ボーダー（枠線）アニメーション ・押し込み ・グラデーション これ入れるだけで一気に“プロ感”出ます。