Interop 2025が始まりました！
2月14日（日本時間）、ブラウザ間でのWeb標準の相互運用性を向上するプロジェクト「Interop」の2025年プロジェクトが始まりました。 この記事では、Interop 2024の振り返りと、Interop 2025でどのAPIが重点対象として選出されたのかについて触れていきます。 前提知識として、Interopそのものの取り組みについての解説については、昨年書いたInterop 2025のプロポーザル投票が始まりました！をご覧ください。 Interop 2024の振り返り 2025年のInteropプロジェクトについて触れる前に、2024年のInteropプロジェクトについて振り返ってみましょう。 Stable Experimental 最新の安定版ブラウザでのリリースにおいては全体で95点まで網羅されており、プレリリース版においては97点まで網羅されていました。安定版でのテスト網羅率
Announcing Interop 2025
Exciting news for web developers, designers, and browser enthusiasts alike — Interop 2025 is here, continuing the mission of improving cross-browser interoperability. For the fourth year in a row, we are pleased to collaborate with Bocoup, Igalia, Google, Microsoft, and Mozilla to smooth out inconsistencies between browsers. The result? A more reliable, user-friendly web experience for everyone. T
Honestly, it’s difficult for me to come to terms with, but almost 20 years have passed since I wrote my first book, Transcending CSS. In it, I explained how and why to use what was the then-emerging Multi-Column Layout module. Hint: I published an updated version, Transcending CSS Revisited, which is free to read online. Perhaps because, before the web, I’d worked in print, I was over-excited at t
【2024年最新】Perplexity AI完全ガイド：機能・使い方から料金まで徹底解説 | in-Pocket インポケット
2022年8月にローンチされてすぐ大きな話題となり、2024年初頭には月間利用者数が1000万人を超えるサービスとなった「Perplexity AI（パープレキシティ エーアイ）」。 リサーチや学習に便利！ と小耳に挟んではいるけれど、使う前にどんなサービスなのか概要を把握したい…という方のために、こちらの記事では、Perplexity AIのメリット・デメリット、便利な活用シーン、実際の使い方、料金プランなどをご紹介します。 Perplexity AIとは？ Perplexity AI（以下、Perplexity）は、ChatGPTやSiri、Alexaなど自然な会話から答えを導き出す対話型AIの仲間で、なかでも検索に強みがある「優秀な図書館司書」のような存在です。その理由は、毎日新しい本や雑誌が届く図書館の司書さんのように、インターネットから最新の情報を探してきて、出典を示しながら回答
HTML Whitespace is Broken September 2, 2024Recently, I was working on a project which required a deeper understanding of how whitespace works in HTML. I was never a fan of HTML's whitespace behavior before as I've been burned by it a few times. But as I dug into it more deeply, I found myself discovering complex design issues that I wanted to explore in a blog post. This is partially to write down
Launching Interop 2025 – Mozilla Hacks - the Web developer blog
Launching Interop 2025 The Interop Project is a collaboration between browser vendors and other platform implementors to provide users and web developers with high quality implementations of the web platform. Each year we select a set of focus areas representing key areas where we want to improve interoperability. Encouraging all browser engines to prioritize common features ensures they become us
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML / CSS / JavaScript 制作 Tips 中級編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編について教えてくださり、ありがとうございました。今日は中級編として、以下の10個の項目について詳しく教えてください。 レスポンシブデザインに対応するにはCSSのメディアクエリを使うとええよ。 モダンJavaScriptでは、アロー関数がよく使われるわ。覚えときなり。 CSSでflexboxやgridを使うと、レイアウト作成が手軽になるの。 画像やフォントはな
HTML / CSS / JavaScript 制作 Tips 番外編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編・中級編・上級編として次の３０項目を教えていただきました。 初級編のTips 10個： HTMLタグは必ず閉じるように心掛けてや。メンドクサイけんど、閉じ忘れが原因でエラー起こることもあるんじゃ。 CSSは外部ファイルで管理する方が整理整頓やし、保守や改修も楽よ。ほなら、あんたのコードもすっきりと！ やはよう使うけど、セマンティックなタグを使うとSEOにも好影響よ。シンプルでも、意味をもったタグがあるけん、活用しとき。 CSSのセレクタ優先度を理解しとき。この順なら、「ID」「クラス」「タグ」よ。覚えておき。 JavaScriptでDOM要素を扱うときは、getElementByIdやquerySelector
Flexbox Labs
A visual tool for experimenting with flexbox layouts
Chrome 133 の DevTools の新機能 | Blog | Chrome for Developers
永続的な AI チャット履歴 [AI アシスタント] パネルで、セッション間でチャット履歴がローカルに保持されるようになりました。これにより、DevTools や Chrome を再読み込みした後でも、Gemini との以前の会話を表示できます。 [パフォーマンス] パネルの改善 このバージョンでは、[パフォーマンス] パネルが大幅に改善されています。 画像配信のインサイト [パフォーマンス] > [分析情報] タブで、ファイルサイズを最適化できる画像をハイライト表示できるようになりました。分析情報で画像をクリックすると、[ネットワーク] トラックでハイライト表示されます。 画像配信の最適化方法については、画像を効率的にエンコードするをご覧ください。 従来のキーボード ナビゲーションとモダンなキーボード ナビゲーション [パフォーマンス] パネルで、好みのキーボード ナビゲーション スタイ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 株式会社YUZURIHAでUIUXデザイナーとして働いている林です。 YUZURIHAのとあるプロジェクトでは、デザイナーがFigmaで作成したデザインデータは、最終的にエンジニアが実装することで形になります。 しかし、デザインデータが整理されていなかったり、コーディングを考慮していない場合、エンジニアの作業が大幅に遅れるだけでなく、完成物にズレが生じることもあります。 本記事では、私の実際の業務経験を通じて、Figmaでデザインデータを作成する際に、コーダーがスムーズに作業を進められるよう工夫するポイントを紹介します。デザイ
2024年～2025年にかけての、Marp エコシステムの大きな変化について、自分用メモも兼ねて。 標準テーマのコンテナが Flexbox → block になった今まで、標準テーマのスライドコンテナーは、縦方向の中央寄せを実現するために Flexbox にしていました。が、驚き最小の原則からすると微妙です。 Block element に対する align-content: center のブラウザサポート が Baseline 2024 になったことで、このタイミングで変更することにしました。 [v4] Always treat the slide container of built-in themes as block element · Issue #372 · marp-team/m… Flexbox だと、画像の float や、 Margin collapsing、Mult
Theme 第 170 回のテーマは 2024 年 12 月と 2025 年 1 月の Monthly Platform です。 Show Note Chrome 動向 Stable: 132 Updates New in Chrome 132 https://developer.chrome.com/blog/new-in-chrome-132 Dialog element toggle events Element capture The File System Access API on Android and WebView What's new in DevTools, Chrome 132 https://developer.chrome.com/blog/new-in-devtools-132 Coming soon: What's new in DevTools, Chro
本日の課題図書 「初心者からちゃんとしたプロになる HTML+CSS標準入門 改訂2版」 初心者からちゃんとしたプロになる HTML+CSS標準入門 改訂2版 作者:栗谷 幸助,相原 典佳,塩谷 正樹,中川 隼人エムディエヌコーポレーションAmazon 狙い Webサイト制作でデザインテンプレートを編集するとき、HTMLとCSSの知識は避けて通れない。 今後、Webデザインで詰まることがないように現時点での最新知識を理解しておきたい。 狙い 目次 ■Lesson1 Webデザインの“いま” ■Lesson2 Webサイトを制作する準備 ■Lesson3 HTMLとCSSの基礎 ■Lesson4 HTMLとCSSの応用 ■Lesson5 シンプルなWebページを作る ■Lesson6 シングルページのサイトを作る ■Lesson7 Flexboxを使ったサイトを作る ■Lesson8 CSS
どのCSSプロパティやどの要素が、iOSどれから使えるか分からなくなるため私的な確認用まとめ。 主にCSS・たまにJSとHTML。 14.0 MediaQueryListEvent API Can I Use… いきなりCSSじゃないですが、メディアクエリを使ってJSのレスポンシブ対応をするときのこれ👇が使えるようになるのはiOS14からです。 const mql = window.matchMedia("(max-width: 600px)"); mql.addEventListener("change", (event) => { if (event.matches) { } }); :is() Can I Use… iOS13だと:matches()か:-webkit-any()で似た動作をしていたものが、:is()としてサポートされたのはiOS14からになります。 また、 for
2024.06.15 【CSS】カード型レイアウトは「flex」or「grid」どっちがいい？ WEB#css こんにちは！デザイナーのasaです。 同じレイアウトでも人によってコーディング方法は様々です。コーディングしていると頻繁にでてくるカード型の記事などを複数並べるレイアウト。皆さんはどのようにコーディングしていますか？ おそらく「flexbox（フレックスボックス）」派と「grid layout（グリッドレイアウト）」派の2つに分かれると思います。 今回は 「flexbox」「grid layout」両方のやり方と、個人的に思う最適解を紹介します。 結論から知りたい方はこちらからどうぞ。
ウェブサイトに初めて訪れた瞬間、あなたは何を感じますか？ スクロールするたびに背景と前景が異なる速度で動き出し、まるで別世界に誘われるような感覚――これこそがパララックス効果です✨ この記事では、以下のポイントを丁寧に解説します: GSAP & ScrollTriggerプラグイン を使った実装手法 各要素に設定する data-speed 属性によるスクロール速度のカスタマイズ 初心者でも理解しやすい、基本構造から実装までの具体的なステップ さあ、一緒に新たな表現の世界へ飛び込み、あなたのウェブサイトを魅力的に変革しましょう！ 🌟 概要 目的 GSAPとScrollTriggerを利用し、スクロールに応じた動きで深みあるパララックスエフェクトを実現する 主な特徴 各要素にdata-speed属性を設定し、スクロール速度を個別制御 背景画像と前景のボックスが異なる速度で動くことで、奥行きを
プログラミングを仕事にするための“完全ロードマップ” ──4つの開発分野と「自学自習」成功の秘訣を徹底解説── - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 【タイトル】 プログラミングを仕事にするための“完全ロードマップ” ──4つの開発分野と「自学自習」成功の秘訣を徹底解説── 【目次】 はじめに 1.1 なぜ「ロードマップ」が必要なのか 1.2 本記事の構成と読み方 第1章：ソフトウェアエンジニアの共通基礎スキル 1.1 コードを書く前に知っておきたい心構え 1.2 プログラミング言語とアルゴリズム・データ構造 1.3 コマンドライン・Gitなどの基本ツール 1.4 コーディングのベストプラクティス 第2章：データサイエンス／機械学習ロードマップ 2.1 なぜ今、AI・機械学習が注目さ
今回は、WordPressのブロックエディタ・フルサイト編集に対応したテーマの自作方法について紹介します。 従来のクラシックエディタとウィジェットを用いてテーマを自作していた方からすると、ブロックエディタ（グーデンベルグ）を使った自作テーマの制作は、かなり面倒に感じるかと思います。 ぜひ参考にしてみて下さい。 目次 フルサイト編集（FSE）とは？ 構成例 フルサイト編集に独自機能を組み込む際の大まかの流れ テンプレートのキャッシュクリア テンプレートパーツ用HTMLファイルの作成 テンプレートパーツと再利用ブロックの違いは？ テンプレートパーツ名を変更する テンプレート・テンプレートパーツの削除方法 TOPページのテンプレート設定方法 レスポンシブデザイン用のレイアウト設定（管理画面の幅設定） スライドショーを実装するとき、画像IDをショートコードの引数で指定する カスタムフィールドの選択
プリザンターは、ノーコードおよびローコード双方のメリットを併せ持つ強力な機能を備えており、技術的な知識がなくても簡単に業務アプリを作成できるツールです。オープンソースで提供され、初期費用なしユーザライセンスなしでご導入いただけます。 標準機能だけでなく、スクリプトを活用して高度なカスタマイズも可能なため、多くの企業で導入されており、業務効率の向上に貢献しております。また、90社を超える全国のビジネスパートナーからのサポートも受けられるため、安心してお使いいただけます。 <center> <div class="top_banner" style="margin-bottom: 5px"> <div class="banner00"> <a href="https://www.itreview.jp/best-software/2024" rel="noopener noreferrer"
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Revisiting CSS Multi-Column Layout | CSS-Tricks
HTML Whitespace is Broken - Devel without a Cause
HTML / CSS / JavaScript 制作 Tips 中級編 - Qiita
HTML / CSS / JavaScript 制作 Tips 番外編 - Qiita
エンジニアが実装しやすいFigmaデータの作り方 - Qiita
Marp Core / CLI v4 の大きな変化まとめ｜Yuki Hattori
ep170 Monthly Platform 202501 | mozaic.fm
初心者からちゃんとしたプロになる HTML+CSS標準入門 改訂2版 - SAGA SITE
（随時更新）iOS○○から使えるCSSなどまとめ【iOS14以降で】 | deep-space.blue
【CSS】カード型レイアウトは「flex」or「grid」どっちがいい？ | HINODE ICT lab
パララックス効果で魅せる新しいウェブ体験へ 🚀 - Qiita
WordPressのテーマを自作（ブロックエディタ・フルサイト編集対応版）
Pleasanter ユーザーマニュアル | OSSのローコード開発プラットフォーム