Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ
「とほほのWWW入門」管理人の杜甫々氏が、これまでの経歴と、「とほほのWWW入門」執筆時に気をつけていること、自身の趣味について話しました。全2回。 「とほほのWWW入門」管理人 杜甫々氏 杜甫々氏（以下、杜甫々）：どうも杜甫々です。「とほほのWWW入門」というやつを作っています。こういうところに出ることはあまりなくて、2022年の岡山のオープンセミナーも録画でやっていたので、こんなにたくさんの人の前でしゃべるのは初めてだったりします。 まずちょっと、おじさんの紹介をやっていきます。「とほほのWWW入門」の管理人です。1996年から始めたので、もう27年目に突入ですね。ハンドルネームは杜甫々です。途中で漢字を当てはめてみました。本名は違いますけどね。 広島生まれの広島在住です。もちろんカープファンです。2023年の観戦成績は6勝1敗で、けっこう良かったんじゃないかなと思っています。 次にイ
ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか？ 筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレビュー表示など、めんどくさい・見づらい・使いづらいと思うことがあります。どうにか快適に書けないかと思いさまざまな拡張機能や設定を試しながら業務を行ってきました。 この記事では、筆者が試した拡張機能やVS Codeの設定の中で便利だったものを紹介します。①から⑥まではすべて無料で利用できるので気軽に試してみてください！ ①マークダウンの表をエクセルからコピペできる拡張機能 VS Codeでの表の作成に重宝しているのが「Excel to Markdown table」という拡張機能です。エクセル
グラフィック系の開発者であるニキータ・リシッツァ氏が、「自身のプロダクトのあらゆる場所で使用している」と述べるお気に入りのテクニックである「指数平滑法」について解説を投稿しました。 My favourite animation trick: exponential smoothing | lisyarus blog https://lisyarus.github.io/blog/programming/2023/02/21/exponential-smoothing.html リシッツァ氏は下図のようなトグルボタンを例に解説を行っています。クリックすると「オン」「オフ」が切り替わります。まだアニメーションを何も設置しておらず、トグルボタンは左端と右端を瞬間移動しています。 機能的にはアニメーションが設定されていなくとも問題はないのですが、アニメーションを設定することでユーザーは何が起こって
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
プログラミング言語で書かれた謎の広告→「分かる人」が見ると……？ 粋なアイデアが「おしゃれ」と話題 東急に制作背景を聞いた
東急グループのデジタル技術による街づくりプロジェクト、「URBAN HACKS」の電車内広告が「面白い！」「おしゃれな広告」と話題です。CSSの記述に見える文字列をよく見てみると……？ 「分かる人には分かる」広告が話題 話題になっているのは、Webページの装飾を設定するためのプログラミング言語「CSS」風の文字列が黒い背景に並んでいる電車内広告。「エンジニア デザイナー募集」の記載もあるため求人広告とは分かりますが、コード部分の意味は一見しただけでは分かりません。 CSS部分をよく見ると…… しかしよくよくコードを読んでみると、「skill: 100%;」「org-style: flat;」「work-space: unset;」など、実は職場環境を紹介する文になっているのです！ 「フラットな社風で働く場所は自由、スキルを100%生かせる仕事です」といった感じかな……？ 別バージョンでは「
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。 さまざまな形状はdivだけでなく、imgで画像にも実装することもできます。 The Ultimate CSS Shapes Collection The Ultimate CSS Shapes Collectionを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回はさまざまな形状を実装するシェイプです。
【849円】ノートPCを「劇的に楽に充電する」激安アイテムを検証&実戦投入！これちゃんと使えるの…？｜ずんだもんと学ぶ「激安商品」の実態 No.68
今回は「マジで欲しくて買ったもの回」として、激安の「PDトリガー」を検証していきます。〇音声読み上げ：VOICEVOX https://voicevox.hiroshiba.jp/〇登場キャラクター・VOICEVOX：ずんだもん・VOICEVOX：四国めたん〇動画内で使用させていただいているBGM・fun fun Ukelele：shimtone 様 https://dova-s.jp/bgm/play16650.html・Metal Jingle：shimtone 様 https://dova-s.jp/bgm/play16229.html〇その他素材・pixabay さま https://pixabay.com/ja/ ・効果音ラボ さま https://soundeffect-lab.info/〇投稿者のTwitter https://twitter.com/Saityo_Zunda
Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート
5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 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
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
「HTML,CSSだって難しいよ！」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第１版』 注意 作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。 初め 壊れない完璧な設計を
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。 「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。 また、たとえ知っていたとしてもよく理解できておらず、「それって何?」「なんで気にする必要があるの？」「サンプルコードがあると助かるんだけど、」そんな人におすすめしたい記事となっています。 周りがあっと驚くテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次これだけは知っておきたい最新モダンCSS（2024年春版）CSSコンテナクエリのインタラクティブガイドCSS sroll()とview()によるスクロール駆動アニメーション実践編CSS :has()のインタラクティブガイドCSS Nestingの具体的な使い方と使用例CSSコンテナ
php-fpm の挙動を確認するために発行されるシステムコールを簡単に確認できる Docker Compose 環境を作りました。 github.com システムコール strace-php-fpm strace オプション php-fpm が発行するシステムコール例 ini ファイルの探索 nginx からの FastCGI リクエスト PHP ファイルの読み込み さいごに 参考 システムコール システムコールは、php-fpm のようなユーザプログラムが、ファイル操作やネットワーク通信、プロセス制御のようなカーネルが提供する機能を利用する仕組みです。PHP コードは PHP（ここでは php-fpm）で実行する必要があるので、php-fpm が発行するシステムコールを確認することで php-fpm や PHP コードがどのように動作しているかを知る手掛かりになります。 システムコールを
最近次のようなポストをしましたが、主に不透明度を伴う色の指定に現在でもrgba()関数を使用している方が多い印象です。 ポストを別枠で表示する 今年に投稿されているCSSの技術記事でもrgba()関数を使用したサンプルコードが散見されますが、現在rgba()関数はレガシーな指定とされています。 rgba()関数使っている人、全員時代に取り残されています過去のCSSでは色を指定する方法の一つとしてrgba()関数が使用されてきました。この関数はRGB値とアルファ値（不透明度）を組み合わせて色を表現するために用いられます。
上達のコツはやはり反復練習！ということで、第4回では、InDesignで作られた書籍のPDF（なければプリントアウト）をもとに、紙面デザインをそっくりに再現する方法について解説します。何度か作成していくうちに、Vivliostyleの可能性やクセがつかめてくるはずです。 CSS組版を覚える早道は……？ 筆者は2023年に『Web技術で「本」が作れるCSS組版 Vivliostyle入門』を執筆しましたが、これを読んだだけで自在に本を組めるようになるかといえば、残念ながらそう簡単なものではないというのが正直なところです。 では、どうやってCSS組版を勉強すればいいのでしょうか？ ひるがえって、自分がたどった道のりを思い出してみると、CSS組版とVivliostyleを使い始めたのは、書籍の原稿整理の一環として、書籍デザイン通りの字数・行数をCSS組版で再現したのが始まりでした。何度もそれを繰
State of HTML 2023
While JavaScript was taking over the web, and CSS was gaining new superpowers year over year, it could seem like HTML was content to stay dormant, happy to cede center stage to its younger siblings. After all once you've learned about <div>s and <h>s 1 through 6, what else is there to know? Quite a lot, as it turns out! Once again we drafted Lea Verou to put her in-depth knowledge of the web platf
誤解しているかも！ CSSの詳細度について、よくある誤解を解説
CSSの詳細度とは、(0,0,2)や(1,0,0)など3つの数字でスタイルを適用する際の優先度を決めるブラウザのアルゴリズムです。要素に対して複数のCSS宣言があり、そのプロパティや値が競合している場合、詳細度が高いものが優先されます。 このCSSの詳細度について、よくある誤解を紹介します。 Misconceptions about CSS Specificity by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 詳細度の誤解 1: 詳細度は10進数である 詳細度の誤解 2: style属性で詳細度が高くなる 詳細度の誤解 3:!importantで詳細度が高くなる 終わりに はじめに CSSの詳細度（Specificity）、ひいてはカスケード（Cascade）に関する記事が公開される度に、私はと
プログラミング言語で書かれた謎の広告→「分かる人」が見ると……？ 粋なアイデアが「おしゃれ」と話題 東急に制作背景を聞いた（ねとらぼ） - Yahoo!ニュース
東急グループのデジタル技術による街づくりプロジェクト、「URBAN HACKS」の電車内広告が「面白い！」「おしゃれな広告」と話題です。CSSの記述に見える文字列をよく見てみると……？ 【画像】謎の広告を翻訳した結果 「分かる人には分かる」広告が話題 話題になっているのは、Webページの装飾を設定するためのプログラミング言語「CSS」風の文字列が黒い背景に並んでいる電車内広告。「エンジニア デザイナー募集」の記載もあるため求人広告とは分かりますが、コード部分の意味は一見しただけでは分かりません。 しかしよくよくコードを読んでみると、「skill: 100%;」「org-style: flat;」「work-space: unset;」など、実は職場環境を紹介する文になっているのです！ 「フラットな社風で働く場所は自由、スキルを100%生かせる仕事です」といった感じかな……？ また、オフィス
コーポレートサイトでの htmx 実装をデモサイトで試してみよう | htmx | ブログ | a-blog cms developer
2024年2月、JavaScriptライブラリ htmx の発見から始まり、短期間でその可能性に引き込まれ、以下の3つの記事を書きました。 JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ | kazumich.log kazumich.log htmx という JavaScript のライブラリが、2023 JavaScript Rising Stars : Front-end Frameworks で 2位 になっているが、日本ではあまり聞かない。私自身も最近知ったばかりだが面白そうな... Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル appleple htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページ
HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる）
HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる） これまでの何年間か、Webアクセシビリティまわりのことをやってきた中で、「Webアクセシビリティに取り組む」上でいろいろな障壁を感じてきました。 「なぜWebアクセシビリティをやるのか」の理解を得る・得てもらうまでの障壁 イノベーター層・アーリーアダプター層な開発者（エンジニアやデザイナー）が取り組みを始める上での障壁 マジョリティ層が取り組みを始める上での障壁 今回はこの3つめの「マジョリティ層が取り組みを始める上での障壁」の話です。 残りの2つについては、私が執筆に参加したWebアプリケーションアクセシビリティが網羅的なガイドになってくれるはずです。しかしコイツは内容的にも物理的にもゴツすぎる問題があると思っていて、導入編としては見えにくい、読みにくい
Google I/O で、昨年の I/O での発表以降、ベースラインがどのように進化しているかについてニュースを共有しました。ウェブ プラットフォーム ダッシュボード、RUM Archive との統合、RUMvision との今後の統合についても発表しました。この投稿では、講演で取り上げたすべてのリソースを 1 か所にまとめます。 ウェブ プラットフォーム ダッシュボードは、ウェブ プラットフォーム全体と個々の機能の相互運用性の過程を確認するための新しい方法です。これにより、ベースラインに含まれるようになります。詳細については、ウェブ プラットフォーム ダッシュボードの発表をご覧ください。 Baseline を日常的に使用するツールと統合することは、このプロジェクトのビジョンの一つでした。Google は、ユーザーがブラウザの互換性への対応について、あまり時間をかけて考える必要がないように
Time-based CSS Animations
In my earlier post Time Uniform For CSS Animation, I took a note about a way to do CSS animations with time ticks instead of keyframes. It was limited applicable because CSS lacked the ability of doing complex Math calculations. After years of wait, CSS now has enough Math functions supported, particularly mod(), round(), and trigonometric functions. It's time to revisit the time-based way of anim
The Static Site Guide
This is a book about creating and publishing static websites using HTML, CSS, and the Hugo static site generator. It’s still a work in progress, but you can read the draft chapters here. Table of ContentsIntroductionMaking Your First Web PagePublishing Your Web PageSprucing Things UpCreating a Static Website Using HugoCustomizing Our Hugo WebsiteUsing a Custom Domain NameImplementing Version Contr
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Cards (gradient border) 最近良く見かけるモダンなUIカードエフェクトをまとめたミニライブラリ。CSSでできるボーダーアニメーションと合わせてどうぞ。 See the Pen Cards (gradient bor
主題と副題のマークアップの方法に関しては度々Xでも話題になっていて、例えば次のポストの返信やリポストを見ると、人によって以下のような様々なアプローチがあることがわかります。 参考：過去に話題になったポスト ポストを別枠で表示する 見出し要素（h1〜h6）の中に主題と副題の両方を含めるこの場合の副題はspanではなくstrongやsmallを使うと言った意見も見られる主題をh1要素でマークアップし、副題は隣接するh2要素を使う疑似要素とcontent:attr()を使って副題を表示するこのブログのトップページでも主題+副題が用いられていて、いくつかのマークアップ方法を検討した結果「hgroupの中に主題のh1要素と副題のp要素を含める」方法を選択しました。
HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や
Combining CSS :has() And HTML <select> For Greater Conditional Styling — Smashing Magazine
While the CSS :has() pseudo-class is widely celebrated for its ability to select a parent element up the chain conditionally based on its contents, there is more conditional logic it is capable of handling when we move it up the chain, so to speak. Amit Sheen demonstrates using :has() to apply styles conditionally when a certain <option> in a <select> element is chosen by the user and how we gain
HubSpotやCSS設計に明るい半田のウェブサイトです。 ウェブサイトの本質は情報を伝えることですので、それを言い訳にデザインは全体的に工事中です。 みんな大好き、あるいは大嫌いなCSS設計。そんな言葉が生まれてから久しく、JavaScriptフレームワーク（以後JSフレームワーク）を始めとする技術が提供するスコープ付きのコンポーネント環境の登場によって、そのなりを潜めている気がしなくもない。 そんなCSS設計とは何だったのか、をちょっと小難しく振り返ってみます。 なお本記事では、区別のためCSS設計が「再利用可能なパーツ」とみなす単位を（あるいは慣習的に）「モジュール」、JSフレームワークにより提供される単位を「コンポーネント」と呼びます。 CSS設計が行っていたこと 「CSS設計」と聞くと Block__Element–Modifier という形式の長ったらしいクラス名を付けることだ
OBSのブラウザソースで動くものを作るあなたへ
MacOSのみ一部バージョンが異なるのは26.1.1リリースのタイミングでブラウザソースがクラッシュする問題が発生し、hotfixとして26.1.2リリースのタイミングでMac版のみアップデートがなされたためです。 このようにバージョンアップのタイミングはまちまちで、XSplitに関しては最近までChrome 68系、OBSについても最新版の30.xでもChrome 103系と執筆現在(2024/04/22)での最新バージョンであるChrome 124から21バージョン遅れをとっている状況です。 これらのアップデートが進まないことの背景には、OBSがCEF経由でページの表示をテクスチャとして使用するためにテクスチャ共有を利用しながら、ゲームなどの他のソフトウェアやキャプチャを使用するためにもテクスチャ共有を利用していることと、CEFがOffscreen Rendering(OSR)時にハー
はじめに結論 CSS の aspect-ratio プロパティを使っている場合、Chrome 124 で崩れる場合があります。 aspect-ratio を設定している要素に min-width: 0; を設定しておくと安全かも。 以下詳細です。 現象 以前は問題なく表示できていたはずのページで、コンテンツがページ外にはみ出してしまう現象が発生していました。 原因を確認すると、以下のような条件で発生していました。 親で display: grid; を設定して横並びにしている おそらく flex でも同様 その中に aspect-ratio プロパティを設定している要素がある 同様の状況を再現したのが、冒頭に掲載した CodePen のサンプルです。 原因 Chrome 123.0.6262.0 で表示を確認したところ、問題なく表示されていました。 Chrome 124.0.6367.92
matcha.css Drop-in semantic styling library in pure CSS. matcha.css is a pure CSS library designed to style HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents. Ideal for fast prototyping, static HTML pages, Markdown-generated documents, and developers seeking to streamline their workflow without delving into CSS intricacies and
Chrome 125で追加された、CSSの新しい機能4つを紹介します。 今回のアップデートでは、今まではJavaScriptを使用しないと実装できなかったアンカーのポジションをCSSだけで設定できるようになりました。また、新しい関数やスクロールバーのカラースキームなど、Web制作者は要チェックです！ New in Chrome 125 Chrome 125 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSによるアンカーのポジション CSSのステップ値関数 round(), mod(), rem() 明度がほぼ100%または0のOklabおよびOklchカラーの不連続性を除去 スクロールバーのカラースキーム はじめに 5/15にリリースされたChrome 125で4
視覚障害を持つ人々はブラウザの拡大機能やカスタムCSSを使用して文字を大きくしてウェブサイトにアクセスすることがありますが、サイト側の対応が不適切だとレイアウトが崩れてしまいます。レイアウトを維持したまま文字のサイズ変更に対応する方法が、Airbnbの企業ブログで解説されています。 Rethinking Text Resizing on Web. Airbnb has made significant strides in… | by Steven Bassett | The Airbnb Tech Blog | May, 2024 | Medium https://medium.com/airbnb-engineering/rethinking-text-resizing-on-web-1047b12d2881 視力が著しく低下してしまった人がAirbnbのページを見た時のイメージはこん
WebKit Features in Safari 17.5
Happy May! It’s time for another release of Safari — our third significant update of 2024. With just a month until WWDC24 and the unveiling of what’s coming later this year, we are happy to get these 7 features and 22 bug fixes into the hands of your users today. CSS There are several exciting new CSS features in Safari 17.5, including text-wrap: balance, the light-dark() color function, and @star
Printing music with CSS grid
Printing music with CSS Grid Too often have I witnessed the improvising musician sweaty-handedly attempting to pinch-zoom an A4 pdf on a tiny mobile screen at the climax of a gig. We need fluid and responsive music rendering for the web! Stephen Band 24 Apr 2024 Music notation should be as accessible and as fluid as text is, on the web; that it is not, yet, is something of an afront to my sensibil
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
令和のHTML / CSS / JavaScriptの書き方50選
紙っぽいかわいいWebサイト作りたい - Qiita
PC-8801mkIISRで「漢字BASIC」を制作、大学の研究室ではApple IIを使用… 杜甫々氏が「とほほのWWW入門」を開設するまで
VS Codeでマークダウンを快適に書きたい！ オススメの拡張機能と設定6選 - ICS MEDIA
アニメーションをスムーズに見せるためのテクニック「指数平滑法」とはどんなものなのか？
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
HTML,CSS初めて１ヶ月ぐらいの人に知って欲しいCSS設計のこと - Qiita
CSSは日々進化している！知ったら使いたくなる「モダンCSS」機能紹介
これだけは知っておきたい最新モダンCSSの書き方（2024年夏版）
Docker Compose で php-fpm が発行するシステムコールを見る - Shin x Blog
えっ！？まだ色の指定でrgba()関数を使っているの！？ – TAKLOG
Vivliostyleで市販書籍とそっくりに組んでみよう | gihyo.jp
ウェブの最新情報 | Blog | web.dev
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版
主題と副題のマークアップにはhgroupを使用する – TAKLOG
CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版: Days on the Moon
CSS設計とは何だったのか？と、コンポーネント環境との関わり
【CSS・Chrome 124】aspect-ratioを使っているページが何もしていないのに壊れた
matcha.css | Drop-in semantic styling library in pure CSS
Web制作者は要チェック！ Chrome 125で新しく追加された4つのCSSの機能
ブラウザ側で文字サイズを変更してもレイアウトが崩れないようにするための方法をAirbnbのエンジニアが解説