古いリセット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の解説
CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する
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
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
レスポンシブデザインとブレイクポイントについて改めて整理してみた
デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回は、「レスポンシブデザインとブレイクポイント」についてです。 こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。 今回はウェブサイトのレスポンシブデザインと、そのうえで重要なブレイクポイントについてです。レスポンシブやブレイクポイントは、デザイナーやエンジニアの皆さんにとっては当たり前の手法として用いていると思いますが、PCやタブレット、スマホなどさまざまなデバイスが登場し、多種多様な閲覧・活用方法があるため、改めて整理してみたいと思います。 各デバイスは解像度が大きくなり数年前とはサイズが大小さまざま違います。そんな中で現在の主流となったデバイ
「ノーコードツール」がWeb制作に激震をもたらす 事例詳細｜つなweB
近年話題の「ノーコードツール」。Web制作にとって脅威となるのか、それとも援軍となるのか、すぐにもWeb制作会社が使うようなものなのか、それともまだ先の話となるのか、さまざまな意見が交わされています。Webコンサルタントとして、これまで長く企業と制作会社の双方と深く関わってきた、（株）ゴンウェブイノベーションズの権成俊さんは、「ノーコードツールの時代はWeb制作会社が大きく成長するチャンスになる」と話をされています。権さんはどういった点に注目しているのでしょうか。ここでじっくりと伺っていこうと思います。 教えてくれたのは… 権 成俊さん （株）ゴンウェブイノベーションズ 代表取締役 ／集客など「対症療法としてのWeb活用」ではなく、自社の提供する価値から見直す「根本治療としてのWeb活用」を提案。一般社団法人 ウェブコンサルタント・ウェブアドバイザー協会代表理事も務める。 飛躍か撤退か。ノ
無料Webクローラー「EasySpider」 プログラミングスキル不要、マウスクリックだけで操作可能
このコーナーでは、2014年から先端テクノロジーの研究を論文単位で記事にしているWebメディア「Seamless」（シームレス）を主宰する山下裕毅氏が執筆。新規性の高い科学論文を山下氏がピックアップし、解説する。 Twitter: ＠shiropen2 シンガポール国立大学と中国の浙江大学に所属する研究者らが発表した論文「EasySpider: A No-Code Visual System for Crawling the Web」は、Excelを使用するように視覚的にWebスクレイピングタスクを設計し、実行できるカスタマイズ可能なWebクローラーシステムを提案した研究報告である。公式ページはこちら。 このシステムは、マウス操作のGUI（Graphical User Interface）を使用して提供されており、コーディングの経験がなくても使えるため、ノンプログラマーでも簡単にタスクを設
ソフトウェアはなぜバージョンアップしなければならないのか - Qiita
はじめに 社内インフラの運用担当者にとってソフトウェアのバージョンアップは地味な割に大変な業務です。 特に社内のオンプレサーバで動いているようなソフトウェアの場合、バージョンアップに伴う諸々の調整をそのソフトウェアを利用している各部署と行う必要があります。 そんなときに「今は忙しいからバージョンアップを先送りしてほしい」「このバージョンはスキップしてもよいのでは？」なんて声が各部署から聞こえてきます。バージョンアップの価値を各部署に理解してもらうのは大変です。 この文章はそんな時になぜバージョンアップしなければならないのかを上司や各部署のマネージャに伝えるために書きます。 ソフトウェアの有効期限は2-5年 まず、第一に、ソフトウェアというものは無限に使えるわけではなく、一定の有効期限があり、それを過ぎると徐々に動かなくなってきます。俗にいう「何もしてないのに動かなくなった問題」です。 なぜ
デザインの参考になる！ 最近のWebサイトやスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ
最近のWebサイトやスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利です。
decoding="async" について詳しく調べてみる
この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、「decoding="async" をつけましょう」というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを
Googleアナリティクスの過去データをMatomoにインポートして移行し解析結果を保存する手順まとめ
Googleが提供するアクセス解析サービスのGoogleアナリティクスでは、2023年7月1日に「Google アナリティクス 4(GA4)」への完全移行が実施され、前世代のGoogleアナリティクスである「ユニバーサル アナリティクス(UA)」でのデータ処理が終了しました。完全に更新が止まったUAのデータをそのうちGoogleが消したりアクセス不能にしたりする前に、別のアクセス解析ツールであるMatomoへとインポートしてみました。 Import Google Analytics User Guide - Analytics Platform - Matomo https://matomo.org/guide/installation-maintenance/import-google-analytics/ Matomoはクラウドサービスが提供されているほか、セルフホストも可能で一切外部
CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法
まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。 はじめに Webのアニメーション、ちょっとだけおさらい アニ
WebサイトのログインにPasskeyを追加できる新サービス「Passwordless.dev」、Bitwardenが正式公開。月間1万ユーザーまで無料
オープンソースのパスワードマネージャ「Bitwarden」などを提供しているBitwarden,Inc.は、Webサイトのログイン機能にPasskeyを簡単に追加できる新サービス「Passwordless.dev」の正式公開を発表しました。 WebサイトをPasskey対応にすることで、ユーザーはパスワードを覚えておく必要がなくなると同時に、指紋認証などの手軽な手段でWebサイトにログイン可能になります。さらに、サーバ側でのパスワード流出や、ユーザー側での偽サイトに誘導されるフィッシングなどのリスクがほとんどなくなるというセキュリティ面での大きなメリットもあります。 一方で、WebサイトをPasskey対応にするには、ログインに関わる認証のロジックを従来のIDとパスワードの組み合わせに加えて、Passkey対応を追加しなければなりません。 今回正式公開されたPasswordless.dev
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう
Googleが日本語を自動改行する「BudouX」をオープンソース「GitHub」で公開 | Web担当者Forum
2023 CSS
これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
CSSでこんなことができるの知ってた？ 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック
Matomo - The Google Analytics alternative that protects your data
【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？ - Qiita
便利なのが登場！ フロントエンドの開発に役立つ最新ツールがひとまとめに利用できる -HTML＆CSS Code Generator
