以前に 劇薬の The New CSS Reset という記事を書き、その中で「UAスタイルシートを理解していれば、どんなCSSリセットも使える」と言いました。 ただ改めてUAスタイルシートの事を検索にかけても「ブラウザのデフォルトのスタイルシートです」で終わる記事が多く、これでUAスタイルシートを理解しろというのは無理な話です。 そこで後進のために、UAスタイルシートとは何なのか？ UAスタイルシートとリセットCSSの付き合い方を文章として残しておきます。 UAスタイルシートとは？ UAスタイルシートとは、User Agent Style Sheet の略で、webブラウザがデフォルトで持っているスタイルシートのことです。これは、HTML要素をどのように表示するか、振る舞いを持たせるかを定義したものです。 スタイルシートの種類と階層 スタイルシートといっても、いくつかあります。 多くのド
What's New In DevTools (Chrome 96) | Blog | Chrome for Developers
Preview feature: New CSS Overview panel Use the new CSS Overview panel to identify potential CSS improvements on your page. Open the CSS Overview panel, then click on Capture overview to generate a report of your page’s CSS. You can further drill down on the information. For example, click on a color in the Colors section to view the list of elements that apply the same color. Click on an element
はじめに 以前から話題になっていたMCP（Model Context Protocol）ですが、Anthropicの独自規格の範囲に留まらず、OpenAIが公式に採用を発表した事で一気に火がつき、最近は至るところでMCPという単語が躍るようになりました。 今回はMCPを利用したデータベースとの対話+資料化までのデモを1つのユースケースとして残しておきたいと思います。 ■構成 クライアント：Claude Desktop データベース：BigQuery データベースとの対話+資料化デモ BigQueryのMCPサーバーについては以下2つが公開されています。 機能的にはほぼ一緒なのですが、後者はデータセット名までパラメータで渡せるので、こちらを使っていきます。 Claude Desktopの構成で以下の設定をするだけで、すぐに使えます。 "mcpServers": { "bigquery": {
Figma MCP Serverで変わるWeb開発 | CyberAgent Developers Blog
みなさんこんにちは。最近渋谷でクレカを落としたところ、偶然弊社の人事が拾って届けてくれたことで事なきを得たラッキーボーイ、柳(@pagu0602)です。 本記事は 2025 年 6 月 6 日に公開されたSpindle MCP で変わるデザインシステムの開発 ~ Figma 連携で実現する超高速開発 ~で触れられていた、Figma Dev Mode MCP Server について、具体的な利用方法や特徴を紹介します。 サードパーティ製 Figma MCP Server デザインツール「Figma」のデザインデータをテキストデータとしてコンテキストに追加できる MCP ツールが登場しました。 有名なものだと Figma-Context-MCPが挙げられます。 これを受けて、Ameba でも Figma MCP Server を利用して開発がどのように変化するか検証しました。 機能とその実現方
Web Interface Guidelines
Interfaces succeed because of hundreds of choices. This is a living, non-exhaustive list of those decisions. Most guidelines are framework-agnostic, some specific to React/Next.js. Feedback is welcome. Interactions Keyboard works everywhere. All flows are keyboard-operable & follow the WAI-ARIA Authoring Patterns. Clear focus. Every focusable element shows a visible focus ring. Prefer :focus-visib
Bootstrap 5
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Bootstrap 5 has officially landed! After three alphas, three betas, and several months of hard work, we’re shipping the first stable release of our new major version. It’s been a wild ride made possible by our maintainers and the amazing community that uses and contrib
WebKit Features in Safari 16.4
Mar 27, 2023 by Patrick Angle, Marcos Caceres, Razvan Caliman, Jon Davis, Brady Eidson, Timothy Hatcher, Ryosuke Niwa, and Jen Simmons ContentsWeb Push on iOS and iPadOSImprovements for Web AppsWeb ComponentsCSSHTMLJavaScript and WebAssemblyWeb APIImages, Video, and AudioWKWebViewDeveloper ToolingWeb InspectorSafari Web ExtensionsSafari Content BlockersNew Restrictions in Lockdown ModeMore Improve
What's New In DevTools (Chrome 94) | Blog | Chrome for Developers
Use DevTools in your preferred language Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language! Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools. Preferences" width="800" height="494"> Chromium issue: 1163928 New Nest Hub devices in the Device list You can now simulate the dimensions of Ne
この記事は BASE アドベントカレンダー 13 日目の記事です。 はじめに こんにちは。 BASE BANK 株式会社 Dev Division にて Software Developer をしている永野(@glassmonekey)です。 普段はバックエンドエンジニアとして、Go/Python/PHP を主に書いてたりします。 最近はチームの分析基盤づくりとかもやってたりします。 そのことについて先日書いたりもしたので、もし良かったらご確認ください。 devblog.thebase.in 私達のチームでは、「BASE」でショップを運営しているショップオーナーが簡単に資金調達をできる「YELL BANK」というサービスの開発・運営しています。 thebase.in あるプロジェクトで、ショップオーナーへのコミュニケーション手段に HTML メール を新しく作ることになりました。その際に
I spent years teaching CSS layout on this blog. I put everything I know into The Layout Maestro course: 70+ lessons and 150+ interactive examples that teach you how to think CSS layouts, not just memorize syntax. Each time I work on a component that needs absolute positioning, I ask myself: is it really necessary? I started to notice a few use-cases where using position: absolute isn’t needed. I f
What's New In DevTools (Chrome 95) | Blog | Chrome for Developers
New CSS length authoring tools DevTools added an easier yet flexible way to update lengths in CSS! In the Styles pane, look for any CSS property with length (e.g. height, padding). Hover over the unit type, and notice the unit type is underlined. Click on it to select a unit type from the dropdown. Hover over the unit value, and your mouse pointer is changed to horizontal cursor. Drag horizontally
If you’re a web developer, you may have already heard that some CSS selectors are faster than others. And you’re probably hoping to find a list of the better selectors to use in this article. Well, not quite. But bear with me, I promise that by the end, you’ll have learnt something new about CSS selector performance. A quick look behind the scenes The way you write CSS selectors does play a role i
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
WebKit Features in Safari 17.4
ContentsArchitectural improvementsWeb AppsForm elementsCSSWeb APIJavaScriptMediaSVGWebGLWeb AssemblyWeb InspectorChanges to SafariSafari ExtensionsWeb AuthenticationBug Fixes and moreUpdating to Safari 17.4Feedback Just like Safari 15.4 and Safari 16.4, this March’s release of Safari 17.4 is a significant one for web developers. We’re proud to announce another 46 features and 146 bug fixes. You ca
WebKit Features in Safari 18.0
ContentsNew in Safari 18Web apps for MacCSSSpatial WebHTMLJavaScriptWeb APICanvasManaged Media SourceWebRTCHTTPSWebGLWeb InspectorPasskeysSafari ExtensionsApple PayDeprecationsBug Fixes and moreUpdating to Safari 18.0Feedback Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolve
What's New In DevTools (Chrome 100) | Blog | Chrome for Developers
Chrome 100 Here’s to the 100th Chrome version! Chrome DevTools will continue to provide reliable tools for developers to build on the web. Take a moment to click around in the What’s New tab to celebrate the milestones. As usual, you can watch the latest What’s New in DevTools video by clicking on the image. View and edit @supports at rules in the Styles pane You can now view and edit the CSS @sup
2025年のオープンソース活動の振り返りとGitHub Sponsorsでの収入をまとめた記事です。 今年はtextlintとJSer.infoにMCPサーバーを実装しました。 また、JavaScript PrimerをES2025に対応し、secretlintに新しい検出ルールを追加しました。 AI連携とECMAScript最新仕様への対応が中心の年でした。 TSKaigi 2025とYAPC::Fukuoka 2025では、継続的なメンテナンスについて発表しました。 サプライチェーン攻撃対策についてはZennに記事をまとめました。 npmパッケージ/GitHub Actionsを利用する側/公開する側でサプライチェーン攻撃を防ぐためにやることメモ 今までの振り返り 2014年: https://efcl.info/2014/12/31/oss-in-2014/ 2015年: https
Hardest Problem in Computer Science: Centering Things Translations: Chinese Japanese Russian This is my claim: we, as a civilization, forgot how to center things. I mean, we know how to do it. It has never been simpler: display: flex; justify-content: center; /* Horizontal centering */ align-items: center; /* Vertical centering */ (don’t ask why you need to remember four words instead of just hori
可変可能なGoogleスライドを、Genspark × GASでリッチに再現する悪魔の「けいたろう式プロンプト」｜keitaro_aigc
第2章 けいたろう式プロンプトでスライドの作成方法ここからは、けいたろう式を実際に使うときの流れを整理します。 1. アプローチの全体像違い：テンプレ依存ではなく、まずHTMLでリッチな表現を作り込み、その後スライドに変換 特徴：リッチさと編集可能性の両立（安定性はやや犠牲） 注意点：画像は持ち込まない。複雑なグラフは枠＋説明テキストで代替 📷（スクショ例：全体フロー図） 2. スライド作成の4つの考え方（整理版）パターン1：一発生成（速いが修正不可） パターン2：骨子出力（構成安定） パターン3：テンプレ流し込み（安定重視） パターン4：けいたろう式（リッチ＋編集自在） 3. Genspark活用のプロセス敬太郎式の肝となるのが、この Genspark → HTML → GAS → Google Slides という流れです。 「思った通りのスライドが出ない」「修正できない」というAI
1. 毎回Wi-Fiパスワードを共有するの、面倒じゃないですか？ 家に友人が来たとき、ほぼ毎回こうなります。 「WiFiパスワード教えて〜」 「いいよ〜！これパスワード！」 「ありがとう！（入力…）あれ、つながらない、、、」 「えっ、ここ一文字間違えてるかも」 いつもちょっと面倒だなと思ってました。 口頭で伝えるのもそれはそれで面倒なので、いっそのことちょっと変な共有の仕方にしたいと思い、WifiパスワードをQRコードで共有することにしました。 2. できたものがこちらです！ どう考えても家には必要ありませんが、おしゃれにできたのではないかと思います。 3. 実装 3.1. 全体コード コード全体はこちらです <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" conten
Google DeepMindから次世代のマルチモーダル生成AI「Gemini」が発表されました。「GPT-4を圧倒」や「人間の専門家を超えた」などの華々しい評価が発表され、驚くようなデモ動画も公開されました。 断片的な情報が飛び交う中、しっかりと技術レポートを読み解いてみます。 どんな生成AIモデル？ 定量的な評価は？ 具体例は？ Gemini - Technical Report はじめに革新的な技術が登場したとき、技術レポートや論文をしっかりと読むことが、急がば回れの近道です。華々しいデモ動画や断片的な二次情報の記事を読んでも、表層的な情報に踊らされて、技術の真の姿を読み解くことはできません。 Geminiに関しては、オープンソースではなく論文もありませんが、技術レポートが公開されています。しかし、60ページの大作であり、英語で書かれているため、多くの人が読むのをためらうでしょう。
はじめに今年3月末、私は絶望していました。 「3ヶ月後に数学研究会で登壇することになったけど、準備する時間なんてあるのか・・・」 日中は学校で一番忙しい教務部の仕事。しかも、一年で最も忙しい年度初めという最悪のタイミング。高3担当の数学教師として、生徒の受験指導にも追われる。勤務時間内に発表準備をする時間なんて、1秒もありません 家に帰ったら帰ったで、また別の戦いが始まります。 定時ダッシュで学童へお迎え、帰宅後は食事の準備、年子の宿題チェック、家事、そして明日の授業の予習。すべてが片付く頃には寝る時間。 そんな日々を繰り返すうちに、あっという間に2ヶ月が経過。発表の日だけが、容赦なく近づいていました。 しかし、あるツールとXポストとの出会いがすべてを変えました。 Obsidian・Cursor・Marpを組み合わせることで、発表前日のたった1時間で、発表用スライドを完成させることができた
Update 1.82.1: The update addresses this security issue. Update 1.82.2: The update addresses these issues. Update 1.82.3: The update addresses this security issue. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the August 2023 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key hi
Responsive Design Today Today, when using the term: "responsive design", you are most likely thinking about using media queries to change layout when resizing a design from mobile size, to tablet size, through to desktop size. But soon, this perception of responsive design may be considered as outdated as using tables for page layout. Viewport-based media queries give you some powerful tools, but
Jun 9, 2025 by Jen Simmons, Saron Yitbarek, Jon Davis, Richard Robinson, Eddy Wong, Brandel Zachernuk, Marcos Cáceres, Tim Nguyen, Daniel Liu, Razvan Caliman, Blaze Burg, Qianlang Chen, Brian Weinstein, Aditya Keerthi, Karl Dubost, David Johnson, Luming Yin ContentsSVG IconsEvery site can be a web app on iOS and iPadOSHDR ImagesWebKit in SwiftUI<model> on visionOSImmersive video and audio on visio
Robin Marx is a Web Performance Architect at Akamai Technologies. His main expertise is in network protocol performance, including HTTP/3 and QUIC, which was the topic of his PhD research. In a previous life he was a multiplayer game programmer and co-founder of LuGus Studios. YouTube videos of Robin are either humoristic technical talks or him hitting other people with longswords. Time-To-First-B
2021年11月2日 お問い合わせフォーム等のツールは、お客様とお店をつなぐ重要な役割を担っています。 しかしその反面、スパムなど悪用されることもあります。 これを何とかするのがrecaptchaと呼ばれる機能です。 時たま、数字を入力したり、写真を選んだりするフォームがありますが、そのことです。 今回は google のreCAPTCHAを導入する機会があったので、備忘録として記録いたします。 とはいえ、どうやって導入するの？reCAPTCHAを導入すればセキュリティが向上することはわかります。 でもどうやればいいの？ そもそもどうやればいいのかがさっぱりです。 なのでググって調べたところ、以下の手順を踏めば導入できることがわかりました。 google reCAPTCHA管理画面にドメインを登録するお問い合わせフォームにトークン処理を埋め込むプログラム側にトークン判定処理をも盛り込む作
Update 1.97.1: The update addresses these security issues. Update 1.97.2: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the January 2025 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key highlights include: Next Edit Suggestions (preview) - Co
WebKit Features in Safari 17.2
ContentsHTMLCSSImages and videoJavaScriptWeb APIWeb AppsWebGLPrivacyWeb InspectorFixes for Interop 2023 and moreUpdating to Safari 17.2Feedback Web technology is constantly moving forward, with both big new features and small subtle adjustments. Nowadays, web developers expect web browsers to update multiple times a year, instead of the once or twice a year typical of the late 2000s — or the once
Neat CSS
Rapidly build efficient sites with Neat, the minimalist css framework. Neat is about 3Kb and that's before it's minified and compressed. About Getting Started Uses Customizing Design Decisions Examples Contributing GitHub About It's tiny, opinionated, and made to last. It's created by Joel Dare and heavily inspired by other minimalist sites like Hundred Rabbits and dozens of similar blogs. "That's
What's New in DevTools (Chrome 117) | Blog | Chrome for Developers
Network panel improvements Override web content locally even faster The local overrides feature is now streamlined, so you can easily mock response headers and web content of remote resources from the Network panel without access to them. To override web content, open the Network panel, right-click a request, and select Override content. If you have local overrides set up but disabled, DevTools en
Update 1.86.2: The update addresses these issues. Update 1.86.1: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the January 2024 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key highlights include: Per-window zoom levels - Adjust the zoom leve
はじめに 今回は無料はてなブログでもできる、ブログタイトル下にグローバルメニューを設置する方法をご紹介します。 一つの記事を閲覧するためにブログに訪れた読者の方が他の記事を閲覧するきっかけにもなり、欲しい情報に辿り着きやすくなってブログの滞在時間が伸びるおすすめのカスタマイズです。 読者のブログ滞在時間や読みやすさはGoogleアドセンスの合格にも繋がりますので、アドセンス合格を目指す方もぜひ取り入れてみてください。 はじめに グローバルメニューとは コピペ後の完成イメージ スマホで反映されない場合 グローバルメニューの設置 デザインCSS CSSコードを入力する場所 コピペ用CSSコード ヘッダーにHTMLコードを貼り付ける コピペ用HTMLコード 色の変更 注意：CSSコードを貼り付けてもうまくいかない時は まとめ グローバルメニューとは グローバルメニューとは、ブログのタイトル下にあ
Do you want to master CSS layouts? I'm building a new course. Learn more A few weeks ago, Adobe released a web version of Photoshop that is built with the web technologies like WebAssembly, web components, P3 colors, and a lot more. Photoshop was the first professional design app that I learned when I was 14 years old. It was one of the reasons that I became a designer, and eventually a front-end
Jun 10, 2024 by Jen Simmons, Jon Davis, Karl Dubost, Anne van Kesteren, Marcos Cáceres, Ada Rose Canon, Tim Nguyen, Sanjana Aithal, Pascoe, and Garrett Davidson ContentsWebXRCSSWeb apps for MacSafari ExtensionsSpatial mediaHTMLMediaWebRTCPasskeysHTTPSJavaScriptWeb APICanvasWebGLWeb InspectorWKWebViewApple PayDeprecationsBug Fixes and moreHelp us Beta TestFeedback The last year has been a great one
表のように掲載される要素や状況に応じてCSSを使い分けることで、触れるべきCSSを瞬時に判断することができ、円滑に作業をするための仕組みを作ることができるのです。 CSSファイルの同期 CSSを読み込むためには、Markdown側にFrontmatterを記載します。 --- link: - rel: 'stylesheet' href: 'css/main.css' <!-- 読み込みたいCSS -- > <!-- 複数のCSSを読み込む場合（ここから） -- > - rel: 'stylesheet' href: 'page_settings.css' <!-- 複数のCSSを読み込む場合（ここまで） -- > lang: 'ja' --- Frontmatterはルールが厳しく、前後には半角の-が必ず3つ、:の後には必ず半角スペースが1つ、rel:とhref:の行頭を揃えるなど、守ら
Version 1.108 is now available! Read about the new features and fixes from December. Update 1.85.1: The update addresses these issues. Update 1.85.2: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the November 2023 release of Visual Studio Code. There are many updates in this version that we hope you'll l
説明なしで、視覚的に伝えることができるアイテム。日頃から、アイコン様にはとってもお世話になっております。。ちょうど人から聞かれる機会もあった… HTMLに記述-1 インラインSVGで色変更次に、svg画像に対して色変更を行っていきます。 1つ目は、<svg>〜</svg>の内容をHTML内に直接記述して、 cssでの色調整を行う方法です。 シンプルでわかりやすく、ロゴなどで使用する時に使えそうです。 svg画像のファイルをエディターで開いたら、中身をコピペします。 cssで色の管理をするため、デフォルトで入っている <style>〜</style>の、色の記述を削除します。(例:<style>.a{fill:#ff7bac;}</style>)(xmlns=”http://www.w3.org/2000/svg”の部分も、なくても作動します) <div class="myicon1"> <
こんにちは。メルカリ ハロのモバイルチームのEMの@atsumoです。 この記事は、連載：メルカリ ハロ 開発の裏側 – Flutterと支える技術 –の3回目と、 Mercari Advent Calendar 2024 の7日目の記事です。 はじめに メルカリ ハロは2024年3月にリリースされた、Flutterを用いて開発されたアプリケーションです。本記事では、デザインシステムの導入によって実現した開発効率の向上と、その具体的な運用方法について共有いたします。 目次 デザインシステムの概要 メルカリ ハロのデザインシステム Componentのご紹介 FigmaからFlutterへの実装について Componentを使った画面実装 1年経過して見えてきた課題 今後の展望 まとめ それでは、順を追って説明していきます。 デザインシステムの概要 デザインシステムについて触れたいと思います
Indoor VivantsAnton Sviridov. I love reinventing the wheel and I usually use Scala for that. TL;DR We are deploying an app to Cloudflare using Scala.js We are using ScalablyTyped We are using Scala 3 heavily Code on Github Deployed app Cloudflare API bindings Welcome to the "Put ma Scala on yo cloud" series I want to say that I'm kicking off a blog series, but even I don't believe that. If I did,
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UAスタイルシートとリセットCSSとは - 2023 - kojika17
MCPでのデータベースとの対話+資料化 - Qiita
MJMLでhtmlメールを楽にいい感じに書くことができた話 - BASEプロダクトチームブログ
Less Absolute Positioning With Modern CSS
The truth about CSS selector performance
オープンソース活動の振り返り/GitHub Sponsorsの収入まとめ @ 2025
Hardest Problem in Computer Science: Centering Things
家に来た人に毎回Wi-Fiパスワード聞かれるのが面倒なので、QR化したら謎の歓迎ページが爆誕した - Qiita
Geminiの技術レポートを読み解く〜生成AIの最前線｜Ray | 旅する魔法使い
第4回｜Obsidian × Cursorで数学研究会スライドを爆速作成した話｜こじか🦌@教育×AI
August 2023 (version 1.82)
The new responsive: Web design in a component-driven world | Articles | web.dev
News from WWDC25: WebKit in Safari 26 beta
TTFB doesn't mean what you think it means
Google reCAPTCHA V3をフォームに埋め込んでみた | ホームページ制作 オフィスオバタ
January 2025 (version 1.97)
January 2024 (version 1.86)
【コピペでOK】無料はてなブログでグローバルメニューを設置する方法 - 効率さん
CSS Findings From Photoshop Web Version
News from WWDC24: WebKit in Safari 18 beta
DTPあるあるのCSS組版的解決法 | gihyo.jp
November 2023 (version 1.85)
SVGのアイコンやロゴの色をCSSで変更する方法 | MW Design
メルカリ ハロのデザインシステムとFlutter | メルカリエンジニアリング
Cloudflare functions with Scala.js