UIデザインで中央配置がずれてしまう理由と解決方法
UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2023年のWebアクセシビリティに関連する出来事を振り返りつつ、2024年のWebアクセシビリティの展望について俯瞰していきたいと思います。 WCAG 2.2の勧告とWCAG 2.1の更新 長らく待ちわびていたWCAG 2.2について、2023年10月5日付けでようやくW3C勧告（Recommendation）となりました（日本語訳はまだありません。詳細は後述の「臨時WGの活動状況」を参照）。また、これと連動する形でWCAG 2.1（日本語訳）の勧告も改めて発行されました。 今回のWCAG 2.1の更新では、達成基準4.1.1構文解析に注記が設けられています。これにより、WCAG 2.2で削除された達成基準4.1.1の扱いについて連続性が保たれるようになっています。WCAG 2.1からの変更点は、公
Amazon ECSで好きなだけ検証環境を起動できるOSSの設計・実装・運用 / YAPC::Hiroshima 2024
https://fortee.jp/yapc-hiroshima-2024/proposal/1e9fbacd-5a50-43ef-87f1-490e85448f17
ウェブブラウザ・Braveが非難されまくっているGoogleの「Web Environment Integrity」を無効化してリリースすることを発表
Googleが「健全なインターネット」のために策定を進めている「Web Environment Integrity(WEI)」に対して反対を表明している、ウェブブラウザ・Braveが、WEIを無効化する方針であることを明らかにしました。 Disables WebEnvironmentIntegrity feature and origin trials. by mkarolin · Pull Request #19476 · brave/brave-core · GitHub https://github.com/brave/brave-core/pull/19476 Google’s Plan To DRM The Web Goes Against Everything Google Once Stood For | Techdirt https://www.techdirt.com/2
こんにちは！ バーグハンバーグバーグ編集部です。 新人ライターさんから編集部によく寄せられる「どうやって記事を作ればいいですか!?」という声。 そこで前回は、どんな人でも書けるようになる『Web記事の作り方』をネタ出しとアポ取りに絞って解説しました。 ↑第三回 今回は、取材に行くときのコツやインタビューのやり方、撮るべき写真を解説します！ 前回と同じく、ジモコロ編集部のギャラクシー（左）と加藤（右）が、新人ライター瀬戸はるかさんに、解説する形で進めましょう！ ▼登場人物 WEBライター｜瀬戸はるか フリーの新人ライター。取材やインタビューはほぼ未経験。 ジモコロ編集長｜ギャラクシー 雑誌の編集、通販番組の脚本を経てWEB編集者に。【ギャラクシーが書いた記事】 WEB編集者｜加藤亮 編集プロダクションで編集とライティングを学んだ。【加藤が書いた記事】 服装について 早速なんですが、取材の時っ
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、Webアクセシビリティの初心者が基礎を学ぶときに助かった資料を紹介します。各資料に対する説明も掲載しているので、どうぞ最後までお楽しみください🌏 ※冒頭、Webアクセシビリティに関する前提知識の紹介が長くなっています。本編を読みたい方は「資料①｜ざっくり知ろう」からご覧ください。 ※今回は、デジタル庁等の引用元にならって「障害」の表記を使用します。 ※noteの内容に誤りがございましたら、お手数ですがコメントやSNS等でご指摘いただけると幸いです。 はじめにまずは、Webアクセシビリティに関する基礎知識の整理からスタートします。最近よく耳にする「合理的配慮」のことも振り返ります。 WebアクセシビリティとはWebアクセシビリティとは、文字通りWebサービスにおけるアクセシビリティのことです。 アクセシビリティは「アク
小さなゲームを作るとして、ターゲットデバイスと開発環境、何向けに何で作るのがいいんだろう - ABAの日誌
じゃあ小さなゲームを作ってみようか、と思ったときに、まず考えないといけないことの一つに、PC、スマホ、ゲーム機などなど、どのデバイスで動くゲームを作るかということがある。 特にこだわりがないのであれば、PCのWebブラウザ向けのゲームを作るのがおススメだ。今のブラウザは様々な開発環境で開発されたゲームを動作させるためのプラットフォームとして成熟しているし、他の人にプレイしてもらうにも、ネット上のURL告知からシームレスに遊んでもらえてお手軽だ。 ゲーム作りを楽しむ、という面では、どの開発環境・プログラミング言語・ゲームエンジンでゲームを作りたいか、から考える手もある。これについては小さなゲームだからどうこう、ということは特になくて、自分の好みで決めて良いと思う。ただ、重厚な3Dゲームを主なターゲットとしているUnreal Engineなどは小さなゲームを作るにはリッチすぎる、などは考慮して
画像生成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以前は、
横並びになったボタンを同じ幅で配置する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年能登半島地震により被災したゲーム機などの任天堂製品を無償修理すると発表した。 ゆうちょ銀
Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン
三井住友銀行のインハウスデザイナーにプロジェクト推進術を学ぶ。若いチームが大組織を動かすコツとは - ミーツキャリアbyマイナビ転職
会社の中で新しい企画やプロジェクトを提案したものの、「前例がない」「うちでは難しい」などと一蹴されてしまった経験はないでしょうか？ いつの時代も、組織は「過去」に支配されるもの。特に大企業ともなれば先例や慣習などの影響力が強く、何かを大きく変えることはなおさら困難に思えます。難攻不落の組織をどうすれば動かせるのでしょうか。 そのヒントになりそうなのが、三井住友銀行（SMBC）で2016年から始まった「インハウスデザイナー」たちの取り組みです。それまですべてのプロダクトのデザインを外部パートナーに委託していたSMBCが、初めて社員として3名のデザイナーを採用。しかし、当時は社内でデザインの価値が十分に理解されておらず、インハウスデザイナーがフルにパフォーマンスを発揮できる環境ではありませんでした。 そんな厳しい状況下でも、地道にデザインの価値を浸透させ、徐々に社内で信頼を獲得。2019年の三
横スクロールバーの発生源はデベロッパーツールのConsoleですぐに特定できる横スクロールバーの発生源の特定方法として有名なのは全称セレクタですべての要素にoutlineを付与して確認する方法だと思われますが、次のスクリプトをデベロッパーツールのConsoleに貼り付けて確認したほうが手っ取り早いです。
キーワードを選ぶと自動で記事が書けちゃうAIライター
至極真っ当で常識的な文章が上がってきます。 OpenAI のチャットボットAI｢ChatGPT｣が大流行しており、今やさまざまなアプリやサービスにも組み込まれるようになっています。 もちろん公式サイトで使うこともできますが…いざとなると何を質問してどう活かせば良いのか？ 使い道がハッキリしていないと猫に小判ですよね。 AIに原稿を書いてもらおう株式会社ユーザーローカルが開発したのは、ChatGPTのGPT-4と連携した記事作成サービス｢ユーザーローカルAIライター｣。 使い方は非常に簡単で、テーマを決めたらまず関連がある単語を2～5個ほど入力するだけ。どんな流れで原稿ができるのか、調査がてらレッツ・トライです。 Image: 株式会社ユーザーローカル試しに｢夏休み 子供 熱中症対策｣と入力すると、｢関連キーワードを選択｣画面に進みます。そこでまた3～10のキーワードを選択すると？ Imag
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
[【大阪】Kansai WordPress Meetup@大阪『ブロックエディターについてもっと知ろう！』](https://www.meetup.com/ja-JP/kansai-wordpress-meetup/events/295907589/) 登壇資料です。
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（読み：ヴァイブス）」を公開しました。本デザインシステムを公開するこ
Secrets from the Algorithm: Google Search’s Internal Engineering Documentation Has Leaked
Google, if you’re reading this, it’s too late. Ok. Cracks knuckles. Let’s get right to it. Internal documentation for Google Search’s Content Warehouse API has leaked. Google’s internal microservices appear to mirror what Google Cloud Platform offers and the internal version of documentation for the deprecated Document AI Warehouse was accidentally published publicly to a code repository for the c
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 サーバ
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで z-index の値に calc(infinity) を指定すると、絶対に最前面に表示させることができます。 infinity は calc() の中で使用できる特殊な値です。名前の通り最も大きな値を表します。 そのため、どんなに大きな z-index の値を指定されても、calc(infinity) が最も大きな値になるため、最前面に表示されるわけですね。
オランダのゲーム開発会社で、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章を確認すると良いと思います！
株式会社リクルート エンジニアコース新人研修の内容を公開します！（2023年度版） | Recruit Tech Blog
こんにちは！ 2023年度エンジニア新卒の、吉田です。 株式会社リクルート 新卒エンジニアコースでは、部署への配属前に、BootCampと呼ばれる新人研修を行っています。 本日は2023年度の研修の内容を、実際に受講した新卒の立場から紹介させていただきます。 研修の内容については毎年反響をいただいていますが、今年度も一段と進化し、より充実した研修でした。 ページ下部に研修資料を公開していますので、ぜひ研修の雰囲気を感じ取っていただけると嬉しいです。 研修の概要 エンジニアコースの新人研修は、配属後にスピード感を持って成長できるようになることを見据え、 「さまざまな技術領域の講座を受け、興味関心を広げて、知らなかった好奇心に出会う」 「現場で求められる『仕事への取り組みスタンス』をつかむ」 「気軽に相談できる仲間（同期）をつくる」 の３点が目的とされています。 今年度は、入社前に行われたスキ
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 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
現在、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に移転され、そこからフォントをダウンロードできます。
今回は、何も知らないところからバンディットアルゴリズムを学びました。 シンプルなバンディットアルゴリズムから、各ユーザーごとに最適化するContextual Bandit、順序を最適化するCascading Banditまで解説します。 学んでいて疑問に思ったことを解消しつつ記載しています。 ソースコード https://github.com/birdwatcherYT/bandit 対象読者 バンディットアルゴリズムを理解して実装したい人 ユーザーごとにカスタマイズしたバンディットを理解して実装したい人（Contextual Bandit） 順序を最適化するバンディットを使いたい人（Cascading Bandit） バンディットアルゴリズム バンディットの問題設定を説明します。 スロットマシンN台がある スロットマシンの腕を引くと報酬がもらえる 累積報酬を最大化したい バンディットアル
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
令和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は、下記の通りです。
共同編集可能で全ブラウザで動くWYSIWYGのリッチテキストエディタを作成できて商用OKなオープンソースの「ProseMirror」を使ってみた
ウェブ上でリッチテキストエディタを構築するためのオープンソースのツールキットが「ProseMirror」です。商用利用可能なライセンスになっており、もともと2015年にクラウドファンディングで約790万円を超える金額を集めて開発が始まったもの。ニューヨークタイムズ・Atlassian・asana・Box・Evernoteなども継続的な開発をサポートしています。共同編集が可能な構造で、プラグイン形式によって独自の拡張を盛り込むこともできる高機能なツールキットになっており、マークダウン形式とWYSIWYMの切替、ツールチップの実装、画像のアップロード、独自メニューの構築、linterによるスキャンでエラー検出してユーザーが修正できるようにする、コンテンツ内に脚注を追加、変更履歴を保持して各ユーザーがここの変更を調べて元に戻せるようにする、などなどウェブアプリ開発で求められる機能が柔軟に追加でき
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024年のWebアクセシビリティ | gihyo.jp
誰でも書ける『Web記事』の作り方｜取材・インタビュー・撮影編 - イーアイデム「ジモコロ」
Webアクセシビリティことはじめ【おすすめ資料5選】｜akane
画像生成AIがブラウザから無料で人間の全身写真をさくっと作ってくれる「AI Human Generator」レビュー
CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます
任天堂、Webサイトのドメイン変更へ 26日から 「nintendo.com/jp」に
CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ
横スクロールバーの発生源を素早く特定する方法と最新の防止策 ｜ TAKLOG
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
HTML 全体の CSS を取得して Shadow DOM に適用する
ウェブサイトに侵入してくる相手にZIP爆弾を送りつけて撃退する方法
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する
ゲームづくりに役立つ無料&商用利用可能な素材サイトまとめ。3Dモデルやサウンド、フォントなどを一気に揃えよう
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
Google、Cloudflare、Amazon、 HTTP/2悪用の史上最大規模DDoS攻撃について説明
いろんなバンディットアルゴリズムを理解しよう - Qiita
VSCodeのソース管理をはじめよう！ Gitの連携機能について解説
ユニコード15.1に採用された漢字構成記述文字記号｜Qvarie
CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方