CSSプロパティのリファレンス全部読んだ話で登壇しました！
聴きに来てくださった方ありがとうございました〜
#fec_kansai
https://t.co/HUQFy3lLdh December 12, 2025

どなたか！WebデザインやCSSに詳しい方はいらっしゃいませんか？？？
僕とClaude Codeではここが限界なので、改善点とか頂けると嬉しいです🙏

カンファレンスを0から一緒に作るチャンス！
何もスタッフをやらなくていいんです
コミュニティへの貢献やアウトプットは簡単にできますよ〜！
#OutputConf https://t.co/c59G8TDdWZ December 12, 2025

[开源推荐] QA-Use: AI 驱动的下一代自动化测试平台

qa-use 基于 @browser_use 核心库构建，是面向生产环境的自动化 QA 测试解决方案。不再依赖传统的、死板的代码脚本（如 Selenium 或 Playwright 需指定具体的 CSS 选择器），而是利用 LLM 和 智能体 技术，让计算机像真人一样“看懂”网页、“理解”测试意图，并执行测试任务。

核心价值与痛点解决
这个项目之所以重要，是因为它试图解决传统自动化测试领域的最大痛点：脆弱性 (Brittleness)。

· 传统方式：测试脚本往往绑定了具体的页面元素（如 div#submit-btn）。一旦开发人员修改了页面布局或重命名了 ID，测试就会报错，维护成本极高。
· qa-use 的方式：你只需用自然语言描述目标（例如：“登录并在搜索栏输入 iPhone”）。AI 会通过视觉和 DOM 分析，动态寻找搜索框在哪里，即使按钮位置变了，只要逻辑还在，测试就能通过。

主要功能亮点
1. 自然语言定义测试
· 用户可以用纯文本编写测试步骤。
· 示例：打开 google. com，搜索 “OpenAI”，验证结果页是否包含官网链接
· 优势：非技术人员（如产品经理）也能轻松编写测试用例。

2. 智能容错与自适应
· 利用 AI 智能体执行操作。如果遇到弹窗、广告或加载延迟，AI 会像人类一样尝试关闭弹窗或等待，而不是直接抛出错误。
· 具备“视觉理解”能力，能够基于页面截图判断交互逻辑。

3. 完整的测试管理系统
· 不仅仅是一个脚本运行器，它提供了一个完整的 Web 界面（基于 Next.js）。
· 功能包括：
· 测试套件管理：将多个测试组织在一起。
· 定时任务：支持按小时/天自动运行测试。
· 并行执行：同时运行多个测试以节省时间。
· 智能报告：测试失败时发送邮件通知，并提供详细的 Pass/Fail 报告。

4. 基于 BrowserUse 核心
它是 browser-use 生态的一个实现。browser-use 是底层库，负责“控制浏览器”，而 qa-use 是上层的“应用平台”，通过 Docker 即可一键部署。

技术架构简述
· 核心引擎：BrowserUse
· 前端/全栈框架：Next.js (React)
· 语言：TypeScript / Python
· 数据库：PostgreSQL
· 部署：Docker & Docker Compose

适用场景
· 回归测试：在产品快速迭代中，确保核心功能（如注册、下单流程）不崩坏。
· 端到端测试：模拟真实用户从进入网站到完成任务的全过程。
· 低代码/无代码测试：适合没有深厚编程背景的 QA 团队快速建立自动化体系。

开源项目
https://t.co/KbAxoVx4Pv

最后下面的信息卡，受 @JefferyTatsuya 启发把信息卡做了一些调整，文字和快速阅读体验更好一些，晚点再把新的提示词发出来。 December 12, 2025

ITエンジニアになる前は
ITエンジニアってプログラミング言語だけできればなれるんでしょ？
と思って下記の勉強だけしてたけど

・HTML/CSS
・JavaScript
・SQL
・PHP

調べれば調べるほど

・Git/Github
・vim
・Linux
・Docker
・エディタの使い方
・AIの使い方
・AWS

などなど言語以外の勉強もしなくちゃいけないことがわかって、しかも学習コストがかなり重くてしんどいと感じた思い出 December 12, 2025

■ コーダーは知っておくべきレスポンシブ思想の転換

コンテナクエリって触ってますか？
てか、知ってますか？？

僕も最近までスルーしてたんですが
これ、本気でヤバいです。

画面幅じゃなくて、
「コンポーネント自身の幅」で
レイアウトが変わるから、
デザインの再現性が一気に上がる。

例えば、ブログカード。

・PCでは横並びレイアウト
・スマホ幅では縦並びレイアウト

とかありがちだと思うんだけど、
「PC時、サイドバーにあるときは縦並びレイアウト」
だったりもしますよね・・！

これを画面幅（media query）で判定する場合、
サイドバー用のCSSをまた記述しなくちゃいけない・・

でもコンテナクエリなら、
「カードを包んでる親(コンテナ)の幅」
で判定できるから、

・カードのサイズが600px以上 → 横並び
・カードのサイズが600px以下 → 縦並び

みたいに「カードのサイズ単位」で
レスポンシブ対応ができちゃうのです・・！

ReactやNextみたいに
コンポーネントを組み合わせる開発では、
もはやこっちが主流になりつつあると思う。

まだ触ったことない人も
まじで一回試してみてほしいな😌

ちなみに、コンテナの中でしか使えない
'cqi'っていう単位ががちで有能過ぎるんだけど
それはまたの機会に・・！ December 12, 2025

倭国政府の現状

・中国人留学生への入国審査で、国家情報法リスクを一切考慮していない

・文部科学省の国費外国人留学生制度＋自治体奨学金で、中国人留学生に年間約80～100億円の税金を投入している（2024年度実績）

・スパイ防止法は未制定、経済安全保障推進法も留学生分野ではほぼ機能していない

・大学内の中国人留学生団体（CSSA）は大使館・領事館の指導下にあることが複数の公文書で確認されている

このまま放置すれば、先端技術の流出はもちろん、在日中国人留学生を通じた学内監視・言論統制・政治工作がさらに加速する。

すでに東大・京大など主要大学では中国人留学生比率が20％を超え、研究室単位で過半数を占めるケースも出ている。

「平和ボケ」という言葉ではもう済まされない。
これは国家安全保障上の明確な遅れであり、早急な法整備と審査強化が求められる。 December 12, 2025

CSSプロパティを全部読んだ中の珠玉の11個を紹介するので是非聞きに来てください！

14:05- IGNITEルームです！
#fec_kansai

https://t.co/bIrN3N2kaf December 12, 2025

🎀お知らせ

動く！猫天使なチャンネル登録者数カウンターを
BOOTHにて販売開始いたしました🫡🩷
水色、ピンクの２色展開です。

OBSのCSS欄に記入していただくタイプです！
最新版のOBS(32.0.2)で動作確認済みです。

🩷販売開始から２４時間限定でタイムセールを行っております🩷

セミオーダーでオリジナルカラーの作成も受け付けております！ December 12, 2025

5分で授業用ゲームが完成！？👀 先生の教材作成時間を激減させる方法。

本日、Google AI Studio / Gemini を活用して、学校現場で役立つ教材アプリをつくった。

この実践は、教育コミュニティ 「もくもく会」 で学んだことの復習。

🛠️ 教材作成の具体的な手順（所要時間：約15分）
* AI Studioに指示を出す:
* 作りたいゲーム（例：小5算数 公倍数を見つけるゲーム）のルールと目標を具体的に指示する。
* 「Googleサイトに埋め込みたいので、HTMLファイル形式で出力してください」 と伝える。
* コードの生成と確認:
* GeminiがHTML、CSS、JavaScriptを含むコードを生成。
* プレビューで意図通りに動くか確認し、必要に応じて修正点をAIに指示（例：デザインの調整、問題数の変更など）。
* Googleサイトへの埋め込み:
* 生成されたHTMLコードをコピーする。
* Googleサイトの編集画面で「埋め込み」機能を選び、HTMLコードを貼り付ける。

⚙️ 作成方法とメリット
* 方法: 複雑なビルド機能は使わず、HTMLで動作するシンプルなアプリを構築。
* 最大のメリット: 作成したアプリを Googleサイトに即時埋め込み可能 な点。
* Google Workspace環境下で、教材の整理・共有・配布を効率化できます。
📚 実際に作った教材例
* 小学5年生算数：公倍数を見つけてクリックして当てるゲーム
* 約分するゲーム

このスピード感は、今後の校内研修などで教員同士が共同で教材を作成する上で、大きな可能性を秘めているのでは？
#GoogleAIStudio #Gemini #Googleサイト #教材開発 #もくもく会 #AIでゆとりを取り戻す #EdTech December 12, 2025

本日もご来店ありがとうございました。
営業中に突然VRChatが落ちてしまい一時混乱してしまいましたが一応再開することができました。
次回の営業は12/7 00:30~となりますのでご来店お待ちしております。
#VRChat #VRCイベント #VRC #GCSS https://t.co/VDk45s9caI December 12, 2025

line-clampは「あー、これ文の省略いい感じにしてくれるやつどうやるんだっけなー」でいつも思い浮かばないやつ。思い浮かんでもまだ使えなかったかーの代表格。

頭の中にあるビジュアルからCSSプロパティを出してくれる世界きてくれ！！

#fec_kansai December 12, 2025

画像は5位のChatGPTのもの

Claude4.5Opus SVG生成用prompt👇

あなたはスライド用の**単一SVG**を生成する。目的は、生成したSVGをPowerPointに貼り付けて**図形として分解（個別編集）**できるようにすることである。

### 1) 出力形式（重要）

* 返答は**SVGコードのみ**（説明文は禁止）。
* Artifactsを使って生成したスライド（単一SVG）を提示する。
* **1スライド = 1 SVGファイル**。
* アスペクト比は16:9。`viewBox="0 0 1600 900"` を用いる。
* スライドページ番号は不要（生成しない）。
* 言語は指示がなければ入力された言語と同じ言語で作成する。

### 2) デザイン上の固定テンプレ（ヘッダー）

* 背景: 白 `#ffffff`
* ヘッダー帯: `x=0,y=0,width=1600,height=140`
* ヘッダー塗り: 左→右の線形グラデーション（defsはこれのみ許可）

* 0%: `#1675F2`
* 100%: `#22A2F2`
* `id="headerGrad"`、`x1="0%" y1="0%" x2="100%" y2="0%"`
* タイトル文字（左）:

* `{TITLE}` を表示
* `x=80, y=95`
* `font-family="Arial, sans-serif"`
* `font-size="52"`, `font-weight="bold"`
* `fill="#ffffff"`

### 3) カラールール（色数を絞る）

* メインテーマカラー: `#1675F2`
* サブカラー（強調専用）: `#22A2F2`
* 使用してよい中立色: `#ffffff`, `#111111`, `#666666`, `#e8eef0`（背景・枠・補助のみ）
* 上記以外の色は使わない。
* **サブカラーは常用しない**。重要点（結論・リスク・要注意・キー数字・ボトルネック等）を視覚的に強調する場合に限って使用する。

### 4) 図解表現のルール（今回の追加要件）

* 本文図解（{CONTENT}）は、単純な箇条書きボックスの羅列にせず、**内容に最適な表現**を選ぶ。

* 手順・時系列・分岐がある → **フローチャート**（矢印・分岐・条件ラベル）
* 比較（A vs B）、長短所、分類 → **比較表**（2〜4列、行は最大6程度）
* 数値の増減・相関・分布・割合 → **簡易グラフ**（棒グラフ・折れ線・散布・円環のうち適切なもの）
* 構造（概念の階層、因果、要素分解）→ **ブロック図/階層図/因果図**
* ただし、PowerPointでの分解編集性を優先し、グラフも**基本図形の集合**で描く（軸・目盛・凡例・データ要素を各パーツで分離）。

### 5) PowerPointで「バラバラの図」にしやすい作法（最重要）

* 各要素は **基本図形**（`<rect> <circle> <line> <polyline> <polygon> <text>`）を優先し、**複雑な`<path>`は極力避ける**。
* **角丸は禁止**（`rx/ry`を使わない）。
* **transform（回転・斜め拡大）禁止**。座標で配置する。
* **mask / clipPath / filter / opacityグラデーション / blur / drop-shadow** 等は禁止（ヘッダーのlinearGradient以外のdefs禁止）。
* CSSの`style=""`にまとめず、`fill="" stroke="" stroke-width="" font-*=""`は**属性として直書き**する。
* 文字はアウトライン化しない（`<text>`のまま）。改行が必要なら複数`<text>`または`<tspan>`で表現する。
* 図形同士は重ね過ぎず、個別選択しやすい余白を残す。
* 可能なら**意味単位ごとに`<g>`でグルーピング**してよい（transformは使わない）。

### 6) レイアウト要件（図解として見やすく）

* ヘッダー下（y=160以降）に本文領域を作る。
* 文章は短く。1要素あたり最大2行、可能なら1行。
* フォントはできるだけ大きく（本文: 32–40推奨、補足: 24–28）。
* 解剖学的な図解は不要。

### 7) 引用文献の入れ方（ある場合のみでよく、必ずしも入れなくてよい）

* スライド下部（例: y=840–890）に "References:" を置き、以下形式で列挙する。

* `著者名, 雑誌名, 年`
* 文字サイズは可読性を保ちつつ小さめ（18–22程度）。色は `#666666`。

### 8) 入力変数

* `{TITLE}`: スライドの主題
* `{CONTENT}`: 図解に入れる要点（短文の箇条書きで与えられる）
* `{REFERENCES}`: 引用（著者名, 雑誌名, 年）の配列

### 9) 生成物の最低構成

* ヘッダー（固定テンプレ）
* 本文図解（{CONTENT}を解釈し、最適な形式: フローチャート/表/グラフ/ブロック図 等で構造化して配置）
* References（{REFERENCES}） December 12, 2025

よくよく考えると、532個のCSSプロパティを読んで11個まで絞り込むのコスパ悪すぎて、普通の人なら直感で避けそうなところを直球で突っ込んでいってるのすごい。
#fec_kansai #fec_kansai_ignite December 12, 2025

CSS小技✨
block要素にbackground-imageで下線を引くと
最後の行だけにしか引かれません💡

でも display:inline にすると、行ごとに背景が分割され、hoverで下線アニメが可能🎶
※2行目以降の字下げはできなくなるので注意⚠

#CSS #CSS小技 #Codejump https://t.co/yGjhKiAMzk December 12, 2025

【手順②のプロンプト】

# 命令
アップロードされた画像を分析し、その内容を忠実に再現した「SVG生成・ダウンロードツール（HTML/JS）」を作成してください。
以下の【プロセス】と【要件】を厳守し、単一のHTMLファイルを出力してください。

---

## プロセス1：画像分析とJSONデータ構築
画像内のレイアウト、テキスト、図形、色を分析し、JSONデータ構造を作成します。
**特に「アイコン」の扱いに注意してください。**

1. **テキストとレイアウト**: 画像内の文字、改行位置、配置座標、背景色を正確に読み取る。
2. **アイコンの知的置換**:
画像内の図形やアイコンを、単なる四角形（rect）ではなく、以下のルールに従って外部Webアイコン（image）に置換する。
- **有名ブランド/サービスの場合**: `Simple Icons` (CDN) のURLを使用する。色はブランドカラーを維持。
例: Excel -> `https://t.co/uv9yw9zsKa`
- **一般的な概念（書類、検索、メール等）の場合**: `Lucide` または `Material Design` (Iconify経由) のSVG URLを使用する。色はグレーまたは画像に近い色を指定。
例: 書類 -> `https://t.co/Ft9sZ6lzUk`
3. **JSONスキーマ**:
```json
{
"canvas": { "width": 1280, "height": 720, "background": "#FFFFFF" },
"elements": [
{
"id": "unique_id",
"type": "rect" | "text" | "image",
"x": 0, "y": 0, "width": 100, "height": 100,
"fill": "#HEX", "stroke": "none",
"text": "内容\n改行あり", "font_size": 16,
"href": "https://xn--url-kc4b8jma9h3x..." (type: imageの場合必須),
"z_index": 10
}
]
}
プロセス2：Webアプリケーション実装（HTML/JS）
作成したJSONデータを内包し、以下の機能を持つWebアプリコードを書いてください。
必須機能
SVGレンダリング: JSONデータを読み込み、ブラウザ上でSVGとして描画する。
Base64埋め込み（重要）:
ページ読み込み時に、JSON内の href (外部アイコンURL) を fetch で取得する。
取得した画像を Base64形式 (Data URI) に変換し、DOM内の <image href="..."> を書き換える。
これにより、ダウンロードしたSVGがオフラインでも画像を表示できるようにする。
ダウンロード機能:
「SVG保存」ボタン: Base64化された状態のSVGをファイルとしてダウンロードする。
「JSON保存」ボタン: データをJSONとしてダウンロードする。
実装要件
デザイン: Tailwind CSSを使用し、モダンで見やすいUIにする。
フォント指定（重要）:
CSSおよびSVG内のテキスト設定において、フォントファミリーを以下の順序で指定すること。
font-family: 'Meiryo UI', 'Meiryo', sans-serif;
SVGの <text> 要素にも必ずこのスタイルまたは属性を適用し、Windows環境でメイリオで表示されるようにする。
エラーハンドリング: 画像のfetchに失敗した場合でもアプリが止まらないようにする。
構成: HTML, CSS, JavaScriptを1つのファイル（index.html）にまとめること。

出力成果物
抽出したJSONデータは、JavaScriptコード内の const jsonData = ... 変数に直接埋め込んでください。
解説は最小限にし、実行可能な完全なHTMLコードブロックを出力してください。 December 12, 2025

【CSSレベルをちょっと上げたい人へ】

1440pxではキレイなのに、
1000pxくらいになると急に崩れる…
これ、制作あるあるじゃないですか？

そんな微妙な値の調整を救ってくれるのが
みんな大好きclamp関数

「最小値 → 理想値 → 最大値」で
値をコントロールできる超便利なやつです

例）
font-size: clamp(16px, 2cqi, 24px);
（cqi → container幅の2%って意味）

16〜24pxの範囲で、
いい感じに調整してくれるし、

細かくメディアクエリで
レスポンシブ対応する手間も全カット

clampを覚えるだけでめちゃめちゃ柔軟に
レイアウトを組めるようになりますよ！

コンテナクエリーとの組み合わせが鬼強いから
その解説はまた今度😌 December 12, 2025

『番-委員会』のアップデート申請完了しました。
作業も一段落ということで、せっかく作った（作ってもらった？）環境アニメの気になるところを直しています。
雲アニメで画像無しの場合の雲を、ChatGPTにCSSで描画してもらったのですが……もうちょっと頑張ってもらいましょうか。 https://t.co/kyqS8hErRM December 12, 2025

#GCSS 行ってきました〜！
おしゃべり楽しかった！
途中鯖落ちしたり、私の耳の充電がなくなったりしましたがハプニング込みで面白かった〜！たまに暴走する文字起こしくんも面白かったw
ありがとうございました〜！ December 12, 2025

CSS、HTMLに最近めっきりさわらなくなって寂しさを覚えてる。ブラウザごとの対応で苦心してた頃の作業に戻りたいかと言われると微妙だけど、装飾や構造をコードで具体にする作業は楽しかったなぁ。 December 12, 2025

sassってホントに便利だなって改めて感じた。

ちょっとした色の変更とか余白調整も、
変数いじるだけで全体に反映されるの気持ち良すぎるし、
ネストも書きやすくて一回覚えたら戻れないやつ…。
普通のCSSで頑張ってた頃の自分に教えてあげたい😂

#web制作 #sass December 12, 2025