画像生成AIの登場によって、大規模なデータセンターや巨大なワークステーションがなくても自宅で簡単に画像を生成できるようになりましたが、ある程度高いスペックのPCでなければAIモデルを動かすことができません。「AI Human Generator」はブラウザから人間の全身画像を簡単に生成できるサービスで、無料で利用することができます。 AI Human Generator – Generate and Modify People Online https://generated.photos/human-generator/ AI Human Generatorを体験するには、「Create Human」をクリック。 画面はこんな感じで、左に設定項目が、右に生成された画像が表示されています。「Face」では、あらかじめ用意した顔を読み込ませて画像に反映できるとのことで、「Upload」をクリ
先日の記事（Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ）で触れましたがCCSS Gridのsubgrid値が、grid-template-columnsとgrid-template-rowsの2つで設定できるようになりました。Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できます。 CSSのサブグリッド（subgrid）を使用すると、下記のように子要素（画像・見出し・テキスト）の水平グリッドも簡単に揃えることができます。 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える CSSのサブグリッド（subgrid）のサポートブラウザ デモページの解説 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える 3つのカードがあり、それぞれに画像・見出し・テキストがあります。subgrid以前は、
Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン
横並びになったボタンを同じ幅で配置するCSS
複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じwidthを指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。 縦方向に並んだボタンであれば、いずれか幅の広い方に合わせることは難しくない。次のようにすれば、最も幅の広いボタンに合わせて他のボタンも配置することができる。 <div class="wrapper"> <button type="button">Hi</button> <button type="button">Hello</button> <button type="button">Lorem ipsum dolor</button> </div> .wrapper { display: flex; flex-direction: column; gap: 1em; width: fit-conten
ドメインの変更は26日に実施。旧URLへアクセスしても自動的に新URLへ転送されるという。会社情報やサポートページなどは旧URLのままで、変更はないとしている。 関連記事 任天堂、「Newニンテンドー3DS」など3製品の修理受付を終了へ 部品は在庫限り 任天堂は13日、携帯ゲーム機「ニンテンドー2DS」「Newニンテンドー3DS」「Newニンテンドー3DS LL」の本体について、現在保有している部品在庫がなくなり次第、修理サービスを終了すると発表した。 3DSとWii U、オンラインプレイは4月9日で終了へ 任天堂は、ニンテンドー3DSとWii Uのソフトでのオンラインプレイなどのサービスを4月9日で終了すると発表した。 任天堂、被災した製品の無償修理を発表 保証書の有無問わず 任天堂は16日、令和6年能登半島地震により被災したゲーム機などの任天堂製品を無償修理すると発表した。 ゆうちょ銀
三井住友銀行のインハウスデザイナーにプロジェクト推進術を学ぶ。若いチームが大組織を動かすコツとは - ミーツキャリアbyマイナビ転職
会社の中で新しい企画やプロジェクトを提案したものの、「前例がない」「うちでは難しい」などと一蹴されてしまった経験はないでしょうか？ いつの時代も、組織は「過去」に支配されるもの。特に大企業ともなれば先例や慣習などの影響力が強く、何かを大きく変えることはなおさら困難に思えます。難攻不落の組織をどうすれば動かせるのでしょうか。 そのヒントになりそうなのが、三井住友銀行（SMBC）で2016年から始まった「インハウスデザイナー」たちの取り組みです。それまですべてのプロダクトのデザインを外部パートナーに委託していたSMBCが、初めて社員として3名のデザイナーを採用。しかし、当時は社内でデザインの価値が十分に理解されておらず、インハウスデザイナーがフルにパフォーマンスを発揮できる環境ではありませんでした。 そんな厳しい状況下でも、地道にデザインの価値を浸透させ、徐々に社内で信頼を獲得。2019年の三
横スクロールバーの発生源はデベロッパーツールのConsoleですぐに特定できる横スクロールバーの発生源の特定方法として有名なのは全称セレクタですべての要素にoutlineを付与して確認する方法だと思われますが、次のスクリプトをデベロッパーツールのConsoleに貼り付けて確認したほうが手っ取り早いです。
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
[【大阪】Kansai WordPress Meetup@大阪『ブロックエディターについてもっと知ろう！』](https://www.meetup.com/ja-JP/kansai-wordpress-meetup/events/295907589/) 登壇資料です。
キーワードを選ぶと自動で記事が書けちゃうAIライター
至極真っ当で常識的な文章が上がってきます。 OpenAI のチャットボットAI｢ChatGPT｣が大流行しており、今やさまざまなアプリやサービスにも組み込まれるようになっています。 もちろん公式サイトで使うこともできますが…いざとなると何を質問してどう活かせば良いのか？ 使い道がハッキリしていないと猫に小判ですよね。 AIに原稿を書いてもらおう株式会社ユーザーローカルが開発したのは、ChatGPTのGPT-4と連携した記事作成サービス｢ユーザーローカルAIライター｣。 使い方は非常に簡単で、テーマを決めたらまず関連がある単語を2～5個ほど入力するだけ。どんな流れで原稿ができるのか、調査がてらレッツ・トライです。 Image: 株式会社ユーザーローカル試しに｢夏休み 子供 熱中症対策｣と入力すると、｢関連キーワードを選択｣画面に進みます。そこでまた3～10のキーワードを選択すると？ Imag
Design System 1.4.1 | Figma
デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 デザインシステムについての詳細や更新履歴はデジタル庁ウェブサイトをご覧ください。 ※Figma Communityにて公開中のデータは、Figma Communityの規定によりCC BY 4.0のライセンスが表記されます。ただし、このファイル内のイラストレーション・アイコン素材に関してはデジタル庁ウェブサイトに掲載の「イラストレーション・アイコン素材利用...
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による10年間の分析・研究・実験を元にしています。 ブラウザの見え方を最適化 プログレッシブエンハンスメントを念頭において設計されています。 インクルード 推奨されるmetaタグやその他の利点を備えたH
以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 | プレスリリース | フリー株式会社
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー（このお知らせでお伝えしたいこと） ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム開発に携わるエンジニアやデザイナーの皆様に、「vibes」を利用してシステムを構築いただく、またはコード等を参照いただくことで、社会全体としてアクセシビリティ向上の取り組みが広がることを目指しています freee株式会社（本社：東京都品川区、CEO：佐々木大輔、以下「freee」）は、freeeがこれまで培ってきたアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes（読み：ヴァイブス）」を公開しました。本デザインシステムを公開するこ
CSSでここまでできるとは驚いた！ CSSを活用した本作りのワークフローを徹底解説した良書 -CSS組版Vivliostyle入門
CSSの解説書というと、通常はWebサイトやスマホアプリを実装するための知識やテクニックですが、今回は『CSSによる本作り』の解説書を紹介します。 原稿の執筆から、本のデザインやレイアウト、データ入稿まで、CSSを活用した本作りのやり方を徹底解説した解説書です。 表紙に「未知の表現力！」とあるように、CSSでこんなこともできるのかと驚きの連続でした。 本書は技術書で評判が高いリブロワークスさんの最新刊。当ブログでもVS Codeの解説書やJavaScriptの解説書を紹介しましたが、今回はCSSによる組版、本作りの解説書です。 マークダウンで原稿を執筆し、それをCSSでレイアウトし、本に仕上げます。本はWeb上でも書籍にもでき、本書自体もCSSで作成されています。
セキュリティの不十分なサーバーを見つけるためにウェブサイトには日々多数の不審なアクセスが行われています。そうしたアクセスをしてくる相手に対して解凍すると容量が膨れ上がる「ZIP爆弾」を送りつけて撃退する方法がブログにまとめられています。 How to defend your website with ZIP bombs https://blog.haschek.at/2017/how-to-defend-your-website-with-zip-bombs.html ZIP爆弾とは、ZIPの圧縮アルゴリズムを最大限に活用することで巨大なファイルを小さなZIPファイルに収めたものです。例えば下記の記事ではたった10MBのZIPファイルを解凍すると281TBになってしまうZIP爆弾が登場しています。 「非再帰的ZIP爆弾」は10MBのファイルが281TBに膨らむ - GIGAZINE サーバ
いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで z-index の値に calc(infinity) を指定すると、絶対に最前面に表示させることができます。 infinity は calc() の中で使用できる特殊な値です。名前の通り最も大きな値を表します。 そのため、どんなに大きな z-index の値を指定されても、calc(infinity) が最も大きな値になるため、最前面に表示されるわけですね。
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
オランダのゲーム開発会社で、2D、3D、サウンド、UIなどゲーム制作に使える170種類以上のフリー素材を提供しています。 各素材は商用・非商用に関わらず自由に使えます。詳しくは、各素材の利用規約をご確認ください。 Kenney『Kenney』利用規約CraftPix
【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？ - Qiita
【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？HTMLSEOマークアップSEO対策HTMLLivingStandard 本記事の結論は、「とりあえずHTML Living Standardを読め」です。 正直明日からHTMLを勉強したいです！って人には全くオススメできません。 おそらく開始5秒で戦意を喪失することになると思います。 とはいえHTMLの仕様全てが記述されているので「セマンティックにマークアップしたい」って時は「HTML Living Standard」の4章を確認すると良いと思います！
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 KeyboardEvent - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why the GOV.UK Design System team changed the input type for numbers – Technology in government https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-desig
株式会社リクルート エンジニアコース新人研修の内容を公開します！（2023年度版） | Recruit Tech Blog
こんにちは！ 2023年度エンジニア新卒の、吉田です。 株式会社リクルート 新卒エンジニアコースでは、部署への配属前に、BootCampと呼ばれる新人研修を行っています。 本日は2023年度の研修の内容を、実際に受講した新卒の立場から紹介させていただきます。 研修の内容については毎年反響をいただいていますが、今年度も一段と進化し、より充実した研修でした。 ページ下部に研修資料を公開していますので、ぜひ研修の雰囲気を感じ取っていただけると嬉しいです。 研修の概要 エンジニアコースの新人研修は、配属後にスピード感を持って成長できるようになることを見据え、 「さまざまな技術領域の講座を受け、興味関心を広げて、知らなかった好奇心に出会う」 「現場で求められる『仕事への取り組みスタンス』をつかむ」 「気軽に相談できる仲間（同期）をつくる」 の３点が目的とされています。 今年度は、入社前に行われたスキ
現在、Webアプリの約60％がHTTP/2を採用しているという。 新たな攻撃は、何十万ものリクエストを作成し、すぐにキャンセルすることで機能するとCloudflareは説明した。リクエスト／キャンセルのパターンを大規模に自動化することでWebサイトを停止に追い込む。 3社は、HTTP/2を採用するプロバイダーに対し、可能な限り早くセキュリティパッチを適用するよう呼びかけた。 クライアントによるこの攻撃への最善策は、利用可能なすべてのHTTPフラッド保護ツールを使用し、多面的な緩和策でDDoS耐性を強化することだとしている。 Cloudflareは、8月の攻撃について今報告するのは、「可能な限り多数のセキュリティベンダーに対応の機会を与えるため、情報を制限してきた」と説明した。 HTTP/2 Rapid Reset Attackの詳しい説明などは、以下の「関連リンク」の各社の公式ブログを参照
これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
HTMLはdivたった一つ、あとはCSSをコピペするだけで約580種類のローダーを実装できるCSS Loadersを紹介します。 ローダーは、バーやドットのシンプルなアニメーションから他ではあまり見ない面白いものまであり、ローダーを探すときはここをチェックすることをお勧めします。ローダーが不要な人でもCSSアニメーションを楽しめると思います。
ピクセルフォントが好きな人に！ JIS第1・第2水準漢字まで揃った、かわいさ全開の丸文字ピクセルフォント -マルミーニャＭ
ピクセルフォント「マルモニカ」などをリリースされているx0y0pxFreeFontから、新しいピクセルフォントがリリースされました。 ※「マルモニカ」（紹介記事）も第1・第2水準漢字対応です。 「マルミーニャＭ」はかわいさ全開の丸ゴシック体のピクセルフォントで、かわいいドット絵やゲーム演出にぴったりな丸文字フォントです。 マルミーニャＭ マルミーニャＭ -BOOTH マルミーニャＭのダウンロード マルミーニャＭの特徴 x0y0pxFreeFontの他のフォント マルミーニャＭのダウンロード さっそくフォントのダウンロード方法を紹介します。 まずは、本サイトから。x0y0pxFreeFontの本サイトはGitHubに移転され、そこからフォントをダウンロードできます。
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
今回は、何も知らないところからバンディットアルゴリズムを学びました。 シンプルなバンディットアルゴリズムから、各ユーザーごとに最適化するContextual Bandit、順序を最適化するCascading Banditまで解説します。 学んでいて疑問に思ったことを解消しつつ記載しています。 ソースコード https://github.com/birdwatcherYT/bandit 対象読者 バンディットアルゴリズムを理解して実装したい人 ユーザーごとにカスタマイズしたバンディットを理解して実装したい人（Contextual Bandit） 順序を最適化するバンディットを使いたい人（Cascading Bandit） バンディットアルゴリズム バンディットの問題設定を説明します。 スロットマシンN台がある スロットマシンの腕を引くと報酬がもらえる 累積報酬を最大化したい バンディットアル
令和5年9/12にユニコード15.1が正式公開され、CJK漢字拡張-Iの他に“漢字構成記述文字”に指示記号4種、“CJK筆画”に拡張漢字構成記述文字の指示記号が1種類追加されました。ユニコードに採用されていない字の説明がしやすくなったのが重要です。𝚄+𝟹𝟷𝙴𝙵の一部除去指示記号は文字構成要素の一部が削除されていることを示す記号です。 漢字構成記述文字記号をラテン・ギリシャ・キリル各文字体系に応用した例で、ユニコードに採用されていない左右逆になる字形と逆になる字形を説明しやすくなりそうです。画像はにしき的フォントに含まれるユニコード未登録のラテン・ギリシャ・キリル各種字母を漢字構成記述文字記号で説明した例です。
CSSでスムーズなアニメーションを実現する4つの新しい機能
今年もCSSの進化が止まりません！ 先日紹介した表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今まではJavaScriptや複雑なCSSを使用しないと実装できなかった、スムーズなアニメーションを実現するCSSの4つの新しい機能を紹介します。 Four new CSS features for smooth entry and exit animations by Una Kravets, Joey Arhar 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに displayをキーフレームでアニメーションさせる 個別プロパティのトランジションを可能にする 最上位レイヤーとの間で要素をア
テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。 日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントになるでしょう。 text-wrap: balance;の基礎知識と使い方、注意点を紹介します。 CSS text-wrap: balance by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 text-wrap: balance;とは テキストのバランスを見つける 制限事項 ブラウザが使用している技術の簡単な説明 text-wrap: bala
ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ
今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカーニングができるtext-spacing-trimプロパティ、これらがブラウザにサポートされるのを待っていた人も多いと思います。 Chrome 123 beta New in Chrome 123 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのlight-dark()カラー関数 CSSのdisplay-modeでpicture-in-p
想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。
パッケージ、MV、スタイリング、ビジュアルデザインなど全方位に高品質なK-POPクリエイティブにおいても軽視されがちなのがウェブ分野だが、その中でも数少ない事例を紹介。 （コミュニティアプリ・ライブ配信・ビハインドなども広義の意味ではウェブコンテンツだが、ここではいわゆる特設サイトについてのみ触れる） ＊ ＊ ＊ NewJeans.krNewJeansの公式サイトはニュースの役割を持たず、カムバックごとに特化した内容にリニューアルされる。特徴的なのは毎回実装される独自のデザインを生成できるジェネレーターで、しかしそのアプローチは常に異なる。 ウェブサイトに限らず、バッグ形態のパッケージデザインやデコ前提のシンプルなペンライトのように、各々のカスタム性を追求することによって逆に連帯感を演出する新しい大衆性がある（学校指定の鞄にキーホルダーで個性を出すやつを、メンバーとファンの間でやってるみた
共同編集可能で全ブラウザで動くWYSIWYGのリッチテキストエディタを作成できて商用OKなオープンソースの「ProseMirror」を使ってみた
ウェブ上でリッチテキストエディタを構築するためのオープンソースのツールキットが「ProseMirror」です。商用利用可能なライセンスになっており、もともと2015年にクラウドファンディングで約790万円を超える金額を集めて開発が始まったもの。ニューヨークタイムズ・Atlassian・asana・Box・Evernoteなども継続的な開発をサポートしています。共同編集が可能な構造で、プラグイン形式によって独自の拡張を盛り込むこともできる高機能なツールキットになっており、マークダウン形式とWYSIWYMの切替、ツールチップの実装、画像のアップロード、独自メニューの構築、linterによるスキャンでエラー検出してユーザーが修正できるようにする、コンテンツ内に脚注を追加、変更履歴を保持して各ユーザーがここの変更を調べて元に戻せるようにする、などなどウェブアプリ開発で求められる機能が柔軟に追加でき
フルスタック Web フレームワーク HonoX を使ってみる 2024.02.10 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。Hono が提供するサーバーサイドやクライアントサイドの機能を使いつつ、ファイルベースルーティングや Islands Architecture などの新しい機能を使うことができます。 HonoX は 2024 年 2 月現在アルファステージとなっています。セマンティックバージョンに従わずに破壊的な変更が行われる可能性があります。 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。以下のような特徴があります。 ファイルベースのルーティング 高速な SSR BYOR（Bring Your Own Rerender）：レンダリングエンジンを自由に選択できます island
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のダッシュボードを作って）というプロンプトで生
冷凍餃子フライパンチャレンジ｜味の素冷凍食品
「味の素の冷凍ギョーザがフライパンに張り付いた」という1件の投稿が、このプロジェクトの始まりです。失敗なく、羽根つきギョーザが焼き上がる感動を皆さまにお届けすることを目指している私たちは、この事実にしっかりと向き合い、さらなる研究・開発を重ねることを決意しました。まず、同様の現象が起きてしまったお客様に呼びかけたところ、たくさんの方々から、フライパンをお送りいただくことができました。このサイトでは、我々の研究の途中報告として、お客様から提供いただいたフライパンの3Dモデルをデジタルアーカイブとして公開しています。また、プロジェクトに連動したnoteにてフライパン検証の進捗をご報告してまいります。併せて、ご確認ください。 「味の素の冷凍ギョーザがフライパンに張り付いた」という1件の投稿が、このプロジェクトの始まりです。失敗なく、羽根つきギョーザが焼き上がる感動を皆さまにお届けすることを目指し
2023/9/12にChrome 117、9/15にEdge 117がリリースされ、CSSのSubgridが全ブラウザに対応しました。 Subgridとは、CSS Gridで新しく使えるようになった機能の一つ。行列（グリッド）を入れ子にして、親行列の行や列に子行列を整列させることが可能です。 この記事では、Subgridの基本から応用までを具体的なデモを交えて詳しく解説します。CSS Gridが初めての人でもわかりやすいよう、CSS Grid自体の解説も盛り込んでいます。 前提知識: CSS Gridとは CSS Gridとは、行と列を使ったレイアウトのことです。行・列とは、次の方向を指します。 CSS Gridを使うと、次のようなことができます。 ■ エリア名を指定して配置できる ■ 行列を繰り返したり、隙間をつくる ■ 行・列数の自動変更、敷き詰め 複雑な行列の入れ子と、subgrid
CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできる
CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算ができます。tan(atan2())を使用して、スクリーンサイズやフォントサイズを取得するテクニックを紹介します。 CSS Type Casting to Numeric: tan(atan2()) Scalars br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに tan(atan2())は単なる数値である 追記: 三角関数を学び直
margin: auto;は非常に便利なCSSで、使用することも多いと思います。 そのmargin: auto;の仕組みをおさらいし、最近の実装で使用される中央配置のテクニックを紹介します。また、ナビゲーションでタイトル以外のリンクを右寄せに配置させるなど、便利なテクニックが満載です。 All About 'margin: auto' in CSS: Centering and More by Ritika Agrawal 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 「auto」とはどういう意味ですか？ 「利用可能なスペースを占める」とはどういう意味ですか？ ブロックレベル要素でautoを使用する 絶対要素でautoを使用して中央配置 CSS GridとFlexboxでautoを使用して中央配置 Flexboxとa
Prettier 3.0 をリリースしました
2023 年 7 月 5 日に Prettier 3.0 をリリースしました。Prettier 2.0 がリリースされたのが 2020 年 3 月 21 日だったので、実に 3 年以上ぶりのメジャーアップデートとなります。 本当はもっと早くこのブログを書きたかったんですが、やる気が出ずだいぶ遅れてしまいました。 この記事では Prettier 3.0 の主要な変更点を紹介します。 Prettier 3.0 の主要な変更点 Prettier 3.0 はメジャーアップデートということもあって大きな変更がいくつか含まれています。ここでは、そのうちユーザーに直接的な影響がありそうなものを紹介します。 ここで紹介する以外にも大きな変更はありますが、プラグイン開発者向けのものとか、Prettier のソースコード自体が全部 ECMAScript Modules で書かれるようになったとか、ユーザーから
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像生成AIがブラウザから無料で人間の全身写真をさくっと作ってくれる「AI Human Generator」レビュー
CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます
CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ
任天堂、Webサイトのドメイン変更へ 26日から 「nintendo.com/jp」に
横スクロールバーの発生源を素早く特定する方法と最新の防止策 ｜ TAKLOG
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
HTML 全体の CSS を取得して Shadow DOM に適用する
ウェブサイトに侵入してくる相手にZIP爆弾を送りつけて撃退する方法
CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
ゲームづくりに役立つ無料&商用利用可能な素材サイトまとめ。3Dモデルやサウンド、フォントなどを一気に揃えよう
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
Google、Cloudflare、Amazon、 HTTP/2悪用の史上最大規模DDoS攻撃について説明
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI - ICS MEDIA
いろんなバンディットアルゴリズムを理解しよう - Qiita
ユニコード15.1に採用された漢字構成記述文字記号｜Qvarie
CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方
K-POPのデザイン16: ウェブにナラティブを取り戻す｜Simon says
フルスタック Web フレームワーク HonoX を使ってみる
CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する
CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック