動作保証対象OS・ブラウザ 基本的には、公式サポート有効内のOS・ブラウザをのみ対象にします。 サポート対象外のOS・ブラウザを使うことは セキュリティパッチの無償提供が停止 以後に発覚した脆弱性は修正されず、セキュリティ面でひどく脆くなってしまう 攻撃を受けた際、その責任はブラウザ提供側でなくwebサービス提供側になる恐れがある 古い環境ではできることが限られるため、開発＆保守の難易度が上がる 上記のリスクを含むことを確認してください。 現時点でのサポート対象は 各OSのリリース日とサポート終了日を表にまとめてみた で確認できます。 IE11 は windows 10 のサポート終了が2029年のため、 まだしばらくセキュリティアップデートが続くと思われますが Microsoft のアプリケーションや YouTube、Twitter などでサポートが 終了しているので、特別な理由がない限
marginとpaddingはCSSの基本ですが、正確に理解できていないと「レイアウト崩れ」にもつながります。この春CSSを学び始めた方へ、必読の解説記事です。 CSSを学び始めたばかりのころ、marginプロパティとpaddingプロパティに混乱しました。そっくりに感じただけでなく、同じ表示になっているとさえ思えました。 このチュートリアルでは、CSSにおけるmarginとpaddingの違いと、Webページでの余白への影響について解説します。さらにマージンの相殺（margin collapsing）やレスポンシブWebサイトの作成でさまざまな単位を使った場合の効果について説明し、最後にCSSのmarginと paddingを使って実現できるレイアウトテクニックをいくつか紹介します。 ボックスモデル CSSは、要素を四角形のボックスで表します。四角形のサイズは次の要素で指定します。 Co
Microsoft Edge の変更ログ - Windows 10 Insider Preview Build 10547 - Browser
何故か今回も変更が盛りだくさんです。 いつもの参照元 Release version 10547 : Microsoft Edge Dev EdgeHTML の更新 <template> element <picture> element Extended srcset (sizes) a[download] attribute Canvas ellipse CSS Mutability Pseudo-classes (:read-write, :read-only) CSS Range Pseudo-classes (:in-range, :out-of-range) input type=datetime-local SVG external content WebRTC - Object RTC API Chakra の更新 ES2016 Async Functions ES2016
lazysizes - the ultimate lazyloader for responsive images, iframes and widget
lazySizes lazySizes is the ultimate and lightweight lazyLoader which lazy loads images (including responsive images (picture/srcset)), iframes and scripts. It is written in VanillaJS and with high performance in mind. Simply add the JS to your website and put the class lazyload to all elements, which should be lazy loaded. For a short API description go to the readme.md. Image with LQIP technique
HTML Standard
Table of contents 1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Microdata6 User interaction7 Loading web pages8 Web application APIs9 Communication10 Web workers11 Worklets12 Web storage13 The HTML syntax14 The XML syntax15 Rendering16 Obsolete features17 IANA considerationsIndexReferencesAcknowledgmentsIntellectual property rights F
レスポンシブ・イメージ。 ざっくり言うと、「retinaなど高解像度なディスプレイも増えてきたし そろそろPCビューでも@2xと@1xと両方の画像を処理しましょうかね。」 ・・という処理と、 レスポンシブレイアウトの際にさらに 「どうやって高解像度画像とノーマル画像を扱っていくの？」 っていう課題みたいなところのことかなと思っています。 そんなレスポンシブ・イメージ的なコーディングのしかたと ついでのWordPressで「今」どうやって扱うといいかなぁという考察です。 「retina.js」は、「/images」 などのフォルダに「a.jpg」 と 「a@2x.jpg」 を放り込めば自動でretinaな場合にのみ@2xに変えてくれる便利なjsです。 →わたしが使ったタイミングがだいぶ前なので、今はよくわからないのですが なんとなく重い、あと、なんか変換されてるのか不安になるので、設定が簡単
WordPress 4.4で実装されたレスポンシブ・イメージをブラウザでテストしていた際、はまってしまって多くの時間を浪費してしまったので注意点を書き留めておきます。レスポンシブ・イメージをテストする際はお気をつけください！ 目次 キャッシュにご注意 Retinaディスプレイで見てませんか？ 開発者ツールの設定など 1. キャッシュにご注意 Mac Chrome 47でテストをしていて、ウィンドウ幅を変えてもレスポンシブ・イメージが反映されなくて不思議に思っていたんですが、よく考えてみたら画像がキャッシュから読み込まれていました。。。 Mac Chrome 47では、srcsetに記述のある画像がキャッシュにある場合、ウィンドウ幅を変えただけではそれ以下のサイズの画像を再度読み込まないようになっています。FirefoxやSafariとは違った挙動だったので、他に原因があると思って迷走してし
How to Use AVIF: The New Next-Gen Image Compression Format — Lightspeed
How to Use AVIF: The New Next-Gen Image Compression FormatAugust 5, 2020 November 2, 2021 Update: Firefox 93 now supports the AVIF format without feature flag. August 26, 2020 Update: Chrome 85 now supports the AVIF format and the link to the preview build of the Squoosh.app has been updated as it now fully supports AVIF. A More Optimal Image Format One of the upcoming technologies we're really ex
Next.js 13.5
Back to BlogTuesday, September 19th 2023 Next.js 13.5Posted by Next.js 13.5 improves local dev performance and reliability with: 22% faster local server startup: Iterate faster with the App & Pages Router 29% faster HMR (Fast Refresh): For faster iterations when saving changes 40% less memory usage: Measured when running next start Optimized Package Imports: Faster updates when using popular icon
斉藤祐也の海外WEBテク定点観測＜Issue.4-2013/08/17-2013/08/30＞ 斉藤 祐也（株式会社リッチメディア） Steven Wittens氏によるAcko.netのヘッダーアニメーション実装の解説、Node.jsをこれから始める人必見のチュートリアル、そしてPromises/A+の仕様を実装を通じて学べるチュートリアルなど、14日間のWeb開発最新ニュース合計18件を紹介します！ 注目ニュースピックアップ WebGL、CSS 3Dで最大のパフォーマンスと表現力を実現 — Acko.net 原題: Zero to Sixty in One Second Acko.netのSteven Wittens氏がWebにおける技術と表現力を最大限に発揮してくれた。 昨年1月にCSS3を使った3Dの表現の限界にチャレンジしたSteven。今年、Acko.netの13周年にあたって
PhotoShopでRetinaディスプレイに対応した画像を書き出す方法 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、制作担当の奥田です。 今まではPhotoShopで画像を書き出す際、スライスを使って「WEB用に保存」というコマンドで書き出していました。 しかし、もうその必要は無くなりそうです。 PhotoShop CC 2015で新たに追加された書き出し形式の指定を使って書き出しがとても容易になりました。 今回はその方法についてご説明いたします。 Table of contentsRetinaディスプレイに対応した画像とはどのように記述するのかPhotoShopでの書き出し方Retinaディスプレイに対応した画像とはRetinaに対応していないと折角のきれいなデザインも汚く表示されてしまいます。 以下の画像は左がRetina対応、右がRetina非対応の画像をRetinaディスプレイで見た例です。 右は文字が少し荒く表示されています。 どのように記述するのかHTMLではどのように指定すれば
はじめに 今回は、個人的によく活用させて頂いている、 コーディングが捗る便利ツールをご紹介します！ よく見るものから、ちょっとニッチなものまで 活用方法も踏まえてまとめたいと思います。 また、弊社QUOITWORKS.Incは2024年1月末締切で、ディレクター、デザイナー、エンジニア職を応募しておりますので 下記よりぜひご応募ください！ ChatGPT まずは王道、ChatGPT。 いろんな活用方法があるかと思いますが、今回ご紹介するものは 非課金ユーザーでも全く問題ないものです。 なぜなら、私が非課金だからです。 基本プロンプト ChatGPTに命令を出す際に、言い方で返答の「質」が変わるのは有名な話です。 精度が高い返答が欲しい時には活用しているプロンプトとして、 noteの深津さんが考案された「深津式プロンプト・システム」が効果的です。 その内容としては、 ・命令書 ・制約文 ・入
無料WordPressプラグインでレスポンシブ（スマホ対応）のデメリットを解消！スマホ/PC表示切替できる「LIQUID RWD PLUS」他 | WordPressやWebデザインなど紹介 Ocadweb
無料WordPressプラグインでレスポンシブ（スマホ対応）のデメリットを解消！スマホ/PC表示切替できる「LIQUID RWD PLUS」他 アクセス解析などを見るとiPhoneやAndroidのスマートフォンのユーザーが増え、WEBサイトを近年スマートフォンから見るユーザーが増えてきています。 そのためWEBサイトで重視されている機能の1つとしてレスポンシブ・WEBデザインを取り入れているものが増えてきています。 レスポンシブ（スマートフォン対応）はもちろんメリットは大きいもののきちんとデメリットも把握しておく必要があります。 メリットは維持したまま、デメリットを少しでも解消したいですよね？ 今回はデメリットを簡単に解消できるプラグインがWordpress公式プラグインとしてリリースされましたので紹介します。 WordPress公式プラグイン「LIQUID RWD PLUS」 まずはレ
After learning a little bit more about web accessibility last year I had been exploring some of the less common HTML elements, and making changes to this website, like wrapping the text of the posts on this blog in <article> tags and adding a <main> tag in the website’s layout templates (this website is built using Eleventy). I had previously done some work to make sure that <figure> and <figcapti
レスポンシブイメージのポリフィル「Picturefill.js」でブレイクポイントによって画像を切り替える ｜ Tips Note by TAM
2017.10.06 レスポンシブイメージのポリフィル「Picturefill.js」でブレイクポイントによって画像を切り替える スマホでは縦長の画像を表示したいけれど、PCでは横長の画像を表示したいということがよくあります。 そんな時にはJavaScriptで横幅を判定して切り替えるという方法がよくとられると思います。例えば、以下のような方法ですね。 jQueryでウィンドウサイズによって画像を切り替える 最近では、pictureタグなどを使ったいわゆるレスポンシブイメージを使える環境が増えてきてきているのをご存知でしょうか。 レスポンシブイメージとは、「画像を読み込む前に、ブラウザ側で横幅や解像度などを考慮して、指定された、もしくは最適な画像ファイルだけを読み込んでくれるHTMLのネイティブな機能」です。対応しているブラウザであればCSSもJavaScriptも使わずに使用できます。
スマホデザイン・UI 2014.07.07 WEBサイトやアプリの【Retina対応方法おさらい】 昨年からiPhone、iPad、iPad miniなどApple系デバイスの広がりによって急速に浸透して行った【Retinaディスプレイ】のモバイル端末。 一番はじめに打ち出された【Retina】という単語がユーザーにも浸透していますが、Windows8.1などでも高解像度(高DIP=Retina)対応が打ち出され、デバイス対決の舞台は”解像度”の戦いへと切り替わってきているのではないでしょうか。 我々WEBサイト制作者、WEBアプリ制作者が逃げられないのが、この高解像度ディスプレイへの対応になります。 今回は、WEBサイト、アプリ両方に影響があるRetinaへの対応方法をおさらいしてみましょう。 【関連ページ】スマホサイトを高速化、モバイルファーストインデックス対策 画像をRetina対応
WordPressの不要な機能を停止する
WordPressは短期間でバージョンアップをしながらさまざまな便利な機能が追加装備されています。その中にはサイトの内容や構成によっては使わない機能もあります。そのまま使わないだけならいいのですが不要なスクリプトやCSSを読み込んだりするのもありますので、スッキリ消したくなってきますよね。 そこで最近 WordPressに追加された機能の停止方法をご紹介します。 emoji (💩x1f4a9) WordPress4.2から実装されました。 「絵文字は使わないよ」という場合、標準でロードしている 絵文字用のスクリプト や CSS も不要になります。 Disable Emojisプラグイン https://wordpress.org/plugins/disable-emojis/ Disable Emojisプラグインを使うと不要なスクリプトは読み込まれなくなってスッキリします。 Embed
Image SEO Best Practices | Google Search Central | Documentation | Google for Developers
Google image SEO best practices Google provides several Search features and products that help users visually discover information on the web, such as the text result images, Google Discover, and Google Images. While each feature and product looks different, the general recommendations for getting images to appear in them is the same. You can optimize your images to appear in Google's search resul
Account for breakpoints in responsive images In many cases, the image size may change depending on the site’s layout breakpoints. For example, on a small screen, you might want the image to span the full width of the viewport, while on larger screens, it should only take a small proportion. <img src="400.png" sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw" srcset="100.png 100w, 200
これは旧バージョンのswiperのオプションについて書いた記事です。最新版（6系）のオプションについてはこちらにあります 以前もswiper.jsのオプションについて書いた記事を書いたんだけど、久しぶりに公式見たら一新されてて震えたから再度記事として上げる。 swiper.jsってなんぞ？ swiper.jsのダウンロードサイト 簡単に言うと、スライダー系のJS。オプションが多く、個人的にはbxsliderとslickとflexと合わせて神スライダー四天王として認識してる。 このswiper.jsのメリットデメリットはこんな感じ メリット オプションが非常に多い。前に記事したbxsliderより多い。コールバック関数（タッチ、クリックなどをした時に関数を実行するもの）の数が特に多い。 jQueryが不要。なんだかんだプラグインの多くはjQueryが必要になることが多いけど、これは不要。サイ
Introduction to Go 1.10 The latest Go release, version 1.10, arrives six months after Go 1.9. Most of its changes are in the implementation of the toolchain, runtime, and libraries. As always, the release maintains the Go 1 promise of compatibility. We expect almost all Go programs to continue to compile and run as before. This release improves caching of built packages, adds caching of successful
HTML 5.1
HTML 5.1はHTML5の最初のマイナーバージョンアップであり、Webアプリ開発に役立つさまざまな機能が追加されている。 連載目次 HTML 5.1とは HTML 5.1*1は2016年11月1日にW3Cによって勧告されたHTMLの言語仕様。 現在ではHTMLの言語仕様自体はWHATWGとW3Cによって策定が進められているが、前者はWebの進化を推進するためのもの（HTML Living Standard）、後者は「HTML Living Standard」を基にW3Cの仕様策定プロセスにのっとった言語仕様の安定的なスナップショットとなる点が異なる*2。最新のWeb標準をフォローするには前者をチェックするのがよい。 HTML 5.1で仕様に追加された機能としては、以下のようなものがある（抜粋）。 <picture>要素、srcset属性： デバイスの画面特性に応じて表示する画像ファイル
Webshim
Important note: Webshim is not compatible with upcoming jQuery 3.x and I do not plan to work on a new major version. I will still fix critical bugs in the future though. Webshim is a polyfill library that enables you to reliably use HTML5 features across browsers, even if native support is lacking. The project is hosted on GitHub, and is available for use under the MIT software license. You can re
Animated SVG vs GIF [CAGEMATCH] Published on 24 Nov, 2015 | Takes approximately 19 min to read SVG can do much more than display static images. Its animation capabilities are one of its most powerful features, giving it a distinctive advantage over all other image formats. They are one of many reasons that make SVG images better than raster images, including GIFs. But this, of course, only appl
![Animated SVG vs GIF [CAGEMATCH]](https://cdn-ak-scissors.b.st-hatena.com/image/square/42a27b2e109dff8bc3f8c4893279f77991badee0/height=288;version=1;width=512/https%3A%2F%2Fsarasoueidan.com%2Fog.png)
The picture element Stay organized with collections Save and categorize content based on your preferences. The previous module demonstrated how the srcset attribute allows you to provide different-sized versions of the same image. The browser can then decide which is the right version to use. If you want to change the image completely, you'll need the picture element. In the same way that srcset b
最近Reactのプロジェクトは全部Gatsbyベースで作ればいいじゃないかな（大体適用できる）と思ったので なぜそう思ったのかまとめてみます。（Gatsbyサイト実装の雛形付き） SPAのメリット・デメリット Reactに代表されるSPAのメリットとしては history APIによる疑似ルーティングでバックエンド無しでページ間遷移ができる（API無しの場合はファイルをホストするだけでWebページが作れる） フロントエンドとバックエンド（API）の棲み分けがはっきりしてる（SSRしない場合） 仮想DOMツリーによる差分レンダリングが高速 逆に動的に仮想DOMツリーを生成するSPAのデメリットとして以下のことが挙げられます。 bundle.jsのファイルサイズが肥大化して読み込みが遅い 仮想DOMツリーの構築に初回のJS実行時間がかかる TwitterやFacebookシェアのOGPを実装し
開発環境を調えたくなり、CGI用（しかも、Perl (ﾏﾃ） ）に考えていたのに、 WEB開発用にBracketsをインストールしました。 ちなみに、これまで使っていたのはSublimeText3。 これはこれでお気に入りなので、使い続けると思います。 とりあえず、色々なエディターを昨日より触れたのですが・・ Bracketsが、なにか使いやすくて感動してしまいました。 さすが、Adobeやるなｗ しかもAdobe戦略も、丸っとそっくりお見通ししちゃったが・・・（ぇ それでも使いたい、Brackets。 ということで、今回はBracketsのご紹介です。 １．Bracketsとはなにか？ Adobeが公開しているテキストエディタ。 HTML、CSS、JavaScript の3つを主要ターゲット言語として、特化してつくられている、 オープンソース（OSS)として Github 上で公開されて
Can You Afford It?: Real-world Web Performance Budgets - Infrequently Noted
Alex Russell on browsers, standards, and the process of progress. TL;DR: performance budgets are an essential but under-appreciated part of product success and team health. Most partners we work with are not aware of the real-world operating environment and make inappropriate technology choices as a result. We set a budget in time of <= 5 seconds first-load Time-to-Interactive and <= 2s for subseq
Inside Microsoft’s New Rendering Engine For The “Project Spartan” — Smashing Magazine
Spartan is a project that has been in the making for some time now. It will be a matter of few months until users and developers alike will be able to try Spartan for themselves, but we can share some of the interesting bits already today. In this article, Jacob Rossi will cover the inside story of the rendering engine powering Spartan, how it came to be, and how 20 years of the Internet Explorer
画像最適化戦略 AVIF 編 | blog.jxck.io
Intro 本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい AVIF 形式を提供し、対応ブラウザに配信するようにした。 フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。 画像最適化シリーズ第 6 回目のエントリである。 画像最適化戦略 PNG/JPEG 編 画像最適化戦略 Picture 編 画像最適化戦略 WebP 編 画像最適化戦略 SVG/Font 編 画像最適化戦略 Lazy Loading 編 > 画像最適化戦略 AVIF 編 AVIF AVIF は、ロイヤリティフリーなコーデックを目指して AOMedia が開発した AV1 を、画像に転用したものだ。 AV1 Image File Format の略とされ、 AV1 の I フレームを静止画として表示するイメージだ。 Chrome 85, Fire
May 19, 2022 You can now use LaTeX style syntax to render math expressions within Markdown inline (using $ delimiters) or in blocks (using $$ delimiters). Writing expressions as blocks To add math as a multiline block displayed separately from surrounding text, start a new line and delimit the expression with two dollar symbols $$. **The Cauchy-Schwarz Inequality** $$\left( \sum_{k=1}^n a_k b_k \r
Web Componentsに関するパネル、WebとDOMとの関係性、ARIAのWeb標準化など海外WEBテク20本を一挙公開
Web Componentsに関するパネル、WebとDOMとの関係性、ARIAのWeb標準化など海外WEBテク20本を一挙公開 斉藤 祐也（株式会社リッチメディア） 斉藤祐也の海外WEBテク定点観測＜Issue.12: 2014/03/01-2014/03/31＞ 今月の定点観測はWeb Componentsに関するパネル、WebとDOMとの関係性、ARIAのWeb標準化などを紹介します。 注目ニュースピックアップ Web Componentsに関するパネルディスカッション 原題: EdgeConf 3: Components 3月21日にロンドンにて開催されたEDGE Conferenceにて議論されたWeb Components。このカンファレンスでの議論そのものも非常に興味深いものですが、このカンファレンスをきっかけに多くの議論がブログなどで展開されました。Web開発の未来を担うとす
マツカワ Webサイト制作／コンテンツ企画／Web広告／SEO／マーケティングを経験してきた雑食系Webクリエイター・プロデューサー プロフィール / Twitter / Facebook レスポンシブデザインを採用しているWebサイトでは、デバイスごとに適正なサイズ（解像度）の画像を読み込ませる、という課題があります。 特に、高解像度のスマートフォンが登場したことで、画像がぼやけてキレイに表示されないと言う新たな問題も出てくるようになりました。 表示サイズの調整に加え、高解像度ディスプレイへの対応という2つの点から画像を最適化するのが常識になってきています。 以前なら、こういった問題に対応するには JavaScript を用いた面倒な実装が必要でしたが、現在はHTMLだけで解決することができます。 それが srcset や sizes 属性の利用です。 この記事では srcset とsi
また、<picture>を使えば「WebP形式の画像に対応していないブラウザなら、PNG画像を表示する」といった出し分けも可能になります。 pictureタグの使い方 具体的な使い方を解説していきます。 sourceとimgタグと使う <picture>タグは、複数の<source>と、1つの<img>を囲う形で使います。 <picture> <source srcset="候補1の画像URL" 属性 /> <source srcset="候補2の画像URL" 属性 /> <img src="候補4の画像URL" alt="~" /> </picture> 👆それぞれに表示する画像候補のURLを指定します。この中からどれか1つの画像が表示されます。<img>は1つだけですが、<source>はいくつ入れてもOKです。 条件に当てはまる画像1つだけが表示される ブラウザは以下のような流れで
SVG Fallbacks | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! There is a very clever technique by Alexey Ten on providing an image fallback for SVG going around the internet recently. It does just what you want in the classic no-SVG-support browsers IE 8- and Android 2.3. If we dig a little deeper we find a some pretty interesting stuff including a bit
【注意喚起】第三者のQiitaのコピー記事で飯を食っているかもしれないサイトについて... - Qiita
見つけた タイトルをそのままGoogleで検索したら同じ記事が出てきました。 Qiitaの色んな方の記事タイトルをGoogleで検索したら全く同じタイトルの記事がやや高確率で検索上位に出てきました。 私は怪しいと思ったので、軽く調べることにしました。 そのサイト のんのん技術ブログ 怪しい 別ドメイン（←まぁ本人かもしれんし...） タイトルと記事が全く同じ 投稿記事元のユーザがバラバラ →同一人物が運営しているとは思えない サイト運営者の情報不足 Aboutページ→信頼性がない プライバシーポリシー→なし お問い合わせ→連絡手段なし 広告ばっかり タイトルと記事が全く同じ 左←問題のサイト 右→Qiita プライバシーの保護のため、ぼかしています。 リンクも画像ソースも同じ。 多少デザインを加えていますね。 投稿記事元のユーザがバラバラ どれだけコピーされているか相手の記事の一部を示しま
WordPressで画像に自動追加されるようになったsrcset属性とsizes属性を無効化する方法 | TechMemo
WordPress4.4以降では、画像を出力する際にsrcset属性とsizes属性が自動で追加されるようになりました。例えば、以下のような感じで、挿入した画像に自動的にsrcset属性とsizes属性が追加されます。 <img width="758" height="419" src="https://techmemo.biz/wp-content/uploads/2016/07/example.png" class="attachment-featured size-featured wp-post-image" alt="" title="" srcset="https://techmemo.biz/wp-content/uploads/2016/07/example.png 758w, https://techmemo.biz/wp-content/uploads/2016/07/
Google Chrome拡張機能のアクセシビリティチェックツール"Alix"が便利すぎた - Qiita
Google Chrome拡張機能のアクセシビリティチェックツールAlixが簡単便利でかなり使えたので紹介します。 概要 Alixはa11y.cssを元にしたChrome拡張HTML lintツールで、閲覧中のHTMLコードにチェック用のCSSを当てることによってアクセシビリティ上のエラーを検証し、マークアップに関するアドバイスをしてくれます。 Chrome ウェブストア GitHub 使い方 Chromeを立ち上げ、Chrome ウェブストアよりインストールします。 Chromeの右上に><という形をしたAlixのアイコンが表示されるのでクリック。 すると設定画面が表示されます。 LanguageはEnglishを（残念ながら日本語はありません）選択。 通知レベルはEverything（旧式の書き方、注意とエラー、アドバイス）, Obsolete Stuff, Warnings & Er
HTML and CSS techniques to reduce your JavaScript
Anthony Ricaud (@anthony_ricaud) is a web engineer helping teams ship efficient products at a sustainable pace. With a broad understanding of web protocols and browsers, he likes to design simple but fast web architectures. Longer page load times Page is unusable until the JavaScript loads and if it does so without any errors Usability, reactivity and accessibility can be lacking without a team wi
Better SVG Fallback and Art Direction With The <picture> Element
Better SVG Fallback and Art Direction With The <picture> Element Published on 15 Feb, 2015 | Takes approximately 8 min to read Besides using an SVG as a background image in CSS, you can serve SVG foreground images in HTML using one of several embedding techniques, each of which has its advantages and use cases. Unless you’re in need of interactivity or external styling, is the standard way for
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
小〜中規模サイトのフロントエンド・コーディング規約 HTML編 - Qiita
CSS初学者がきちんと理解したい、marginとpaddingとborderの複雑な関係
レスポンシブ・イメージ的に今使えそうな部分と、WordPressでの扱い方 | バニデザノート
レスポンシブ・イメージをテストする際の2つの注意点と開発者ツールの設定
斉藤祐也の海外WEBテク定点観測＜Issue.4-2013/08/17-2013/08/30＞
【コーダー必見】効率化のためのChatGPTフル活用戦術+便利ツール集
A Blog Post With Every HTML Element
【今更聞けない!?】WEBサイトやアプリのRetina対応方法おさらい | モバイルラボ
Responsive images | Articles | web.dev
swiper.js使ってみたからそのオプションについて(v4.1.6) | なんかいろいろデザインする人
Go 1.10 Release Notes - The Go Programming Language
Animated SVG vs GIF [CAGEMATCH]
The picture element | web.dev
お前らのReactは遅すぎる(SSG編) - Qiita
Bracketsに感動！インストールしたプラグイン達 - brriant’s blog
Render mathematical expressions in Markdown
srcsetとsizes属性でサイズ(解像度)ごとに画像を出し分ける方法
pictureタグで画像をレスポンシブに切り替える - HTMLリファレンス