Google、WebUIの自動生成ツール「Stitch」をベータ公開。自然言語で指示するとHTML/CSSを生成
Googleは日本時間5月21日未明に開幕した年次イベント「Google I/O 2025」で、自然言語で指示を入力すると自動的にWeb UIを生成するツール「Stitch」のベータ公開を発表しました。 StitchはもともとGalileo AI社が提供する同名の「Galileo AI」と呼ばれるサービスでした。これをGoogleが買収し、Geminiをベースにしたサービスにしたものと言えます。 Stitchのデモ画面 下記がStitchの画面です。左側に例（Examples）が並び、右側にはプロンプトの入力欄があるというシンプルなものです。 これから作成するUIがデスクトップ版かモバイル版かを選択可能。また、生成AIとしてGemini 2.5 Flashを使う「Standard Mode」、より忠実なデザインかつ画像見本からもUIを生成できる「Experimental Mode」が選択で
古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
Vercel、自然言語からUIを生成するサービス「v0」を実験的に公開。Tailwind CSSとShadcn UIをベースに
Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebのユーザーインターフェイスを自動生成してくれるサービス「v0」をプライベートアルファ版として公開しました。 v0 by Vercel Labs Generate UI with simple text prompts. Copy, paste, ship. Explore the prompt library and join the waitlist today.https://t.co/yaDdOfnOaJ — Vercel (@vercel) September 14, 2023 v0の作例として公開されている、プロンプトから生成されたUIをいくつか見てみましょう。 下記は「A dashboard for saas app」（SaaSのダッシュボードを作って）というプロンプトで生
Pico CSSとは？セマンティックなHTMLを書けばCSS最小限でOK、Reactでも利用可能
7月24日、Pico CSSはReactアプリのスタイリングに革新をもたらす新しいフレームワークを発表しました。 Pico CSSは、セマンティックなHTML要素にスタイルを適用することで、カスタムCSSの記述を最小限に抑えることができます。 また、ダークモードのサポートやカスタムテーマの機能など、多くの機能を提供しています。 Pico CSSは、セマンティックなHTML要素にスタイルを適用することで、カスタムCSSの記述を最小限に抑えることができる、新しいコンセプトのフレームワークです。 また、ダークモードのサポートやカスタムテーマの機能など、多くの機能を提供しています。 Pico CSSは、セマンティックなHTMLにスタイルを適用することで、カスタムCSSの記述を最小限に抑えることができる最小限のCSSフレームワークです。 Pico CSSは、小規模なアプリケーションを構築する際にカス
Bing Chat で画面イメージからHTML/CSSの内容を生成してみる（日本語でもできました） - Taste of Tech Topics
カメラ好き機械学習エンジニアの@yktm31です。 昨日、マイクロソフト主催のMicrosoft Inspireにて、Bing Chat の更新内容が発表されました。 news.microsoft.com その中でも、特に Bing Chat の「Visual Search in Chat」の機能が気になったので、早速試してみました。 Bing Chat 新機能の概要 Visual Search in Chatは、画像から文脈を解釈し答えを返してくれる生成AI機能です。 旅行先で見かけた建築物について知りたいときや、冷蔵庫の中身からレシピを考えたいときなど、 Bing Chatに画像をアップロードするだけで、ウェブの知識を活用して回答される、とのことです。 バックエンドで動くモデルは、OpenAIのGPT-4モデルのようです。 デモでは、手書きの絵からHTML/CSSのコードを生成する例が
Bootstrap 4.1
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Two months ago we shipped the first major release of Bootstrap 4 and we’re thrilled y’all love the latest release and our brand new themes so much. Today we’re shipping our first minor release, v4.1! This release comes later than expected and some of the fixes we inten
[意訳]グローバルCSSの終焉 - Qiita
このポストは以下の記事の意訳です。 The End of Global CSS 何か間違いなどありましたら、ご指摘いただけると幸いです。 (以下、訳) グローバルCSSの終焉 CSSセレクタはすべて同じグローバル空間に存在しています。 CSSに触れた人は皆、以下のような見解に至っていることでしょう。 CSSの考えはドキュメントの時代に設計されたもので、今ではモダンなウェブアプリケーションのためのマトモな開発環境を提供することが困難であると。 全てのセレクタには意図しない副作用を起こす可能性があり、期待と違う要素にスタイルが適用されてしまったり、他のセレクタと競合してしまったりします。さらに驚くべきことに、セレクタはグローバル空間で詳細度の競争に負けることもあり、ページのデザインに全く影響を持たなくなることだってあり得るのです。 CSSファイルを変更する時はいつでも、スタイルが適用されるグロ
![[意訳]グローバルCSSの終焉 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e0b50f53f3746ca3c80fab40b10f178444168171/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY3NzYxNCUyRmZiOTI4YTg1OGZkYzRhOTJhOWRjNzk0MjJkMjRkOWU3OGMwYTRlN2IlMkZ4X2xhcmdlLnBuZyUzRjE3MDk3NjIzNTU_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9OGI0YmYxZmQzNGM1ODdkYjg4MjcyMWZmNjVjOGUxODY%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D64fc9452013a3c28080b96fa038df273%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU2JTg0JThGJUU4JUE4JUIzJTVEJUUzJTgyJUIwJUUzJTgzJUFEJUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgzJUFCQ1NTJUUzJTgxJUFFJUU3JUI1JTgyJUU3JTg0JTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9ZDZlZmEyM2ZjNDkyNWFkZTMxOGE2NzJhYzNjOGNjMWE%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB0ZW5rZWkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1hYWFlNWZiOGFhNjcxY2ZjZDlhYzU4NTZkOGI1ZTg0Zg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D2bcfa3a0c12f343d706653d30f2ac1b7)
Flexboxでどういうレイアウトができ、各プロパティはどのように挙動するのかがよく分かる -Flexbox playground
2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。IE11を対象した際に、Flexboxの導入を考える制作者も多いと思います。 ※Vistaは2017年にサポート終了（参考: Windows製品のライフサイクル） Flexboxでどういうレイアウトができるのか、各プロパティはどのように挙動するのかが分かるFlexbox playgroundを紹介します。 Flexbox playground Flexbox playgroundはページの埋め込みにも対応しており、Flexboxのコンテナとアイテムの各プロパティがどのような挙動をするかよく分かると思います。 Flexboxの各プロパティの詳しい解説は、下記ページをご
write once, publish anywhere ……という夢を見た。
商業品質の紙書籍と電子書籍の両方を作るというミッションを数年来継続し、得られた知見・経験を紹介する。Read less
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
日本マイクロソフト株式会社 Digital Sales 事業本部 Digital Cloud Solution Architect 上坂 貴志 クロスプラットフォームに対応した .NET Core、.NET 5 を得てリリースされた .NET 6は待望の LTS (Long-term Support)です。新規開発であれば .NET 6 での開発を検討できますが、.NET Framework で作成された既存のシステムはどうすれば良いでしょうか。 .NET Framework は version 4.8 を最後に新機能の追加予定は今のところありません。今後のことを考えて .NET 6 へのアップグレードを検討したいところですね。 このセッションでは .NET Framework から .NET 6 へのアップグレードについての様々な情報をお伝えします。
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles of Animation）
2015年2月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 コーディング HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント （1/3）：CodeZine Webブラウザー、Dreamweaver CC 2014、Brackets などで利用できる、PSD の Extract（抽出）機能は、最近私もWebブラウザー版と Brackets で利用してみましたが、なかなか便利で、コーディングが速くなると感じました。 たとえば、長方形シェイプレイヤーをクリックで選択した状態で、CSS で ba… と入力開始すると、background: #f00; のように、今選択しているシェイプの
MediumのCSSはこの上なく最高！ | POSTD
自分は常に最高であれって思っている。最高の香りを身にまとい、最高の振る舞いをする。ごみ1つ捨てるのだって、ほかの誰よりイカしてなきゃ。 ―Lil Wayne ずっと長いこと恥も外聞も知らずに、MediumでCSSについて執筆しようと思っていました…。 それからどうなったって？ 違うことをやっていた？ 何てこと、どうやったら同じことができるかって？ やり方を教わりたいって？ これから書くことは私たちのCSSについての覚書で、これまでに歩んできた道のりと現在のCSSについて述べています。 始まり（これまでの道のり） だいたい2年ほど前、私はソフトウェアアプリケーション開発と（皆さんが読んでくれているといいのですが） medium.com に取り組むためにObvious Corp.に加わりました。 その時、Mediumは、すでに一連の”スタイル更新”を行っていました（ スタイル更新とは デザイナ
コーディングガイド by @mdo
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
Bootstrap 3.1.0 released
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Today we’re stoked to ship Bootstrap v3.1. We’ve got a handful of new features, plenty of bug fixes and improvements, and updated build tools. New docs We’ve made tons of changes across the board, most notably to our documentation. Just like v2.1 brought a brand new de
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
CSSが破綻する4つの理由 - Qiita
CodePen - Front End Developer Playground & Code Editor in the Browser
ロールオーバーのいろいろなやり方
