表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
クリック・タッチを無効化するCSS「pointer-events: none;」がお手軽で便利
こんにちは、お久しぶりです。ウェブデベロップメント黒帯を務めております、HTMLやCSSやJavaScriptが大好きな岡部 和昌（@kzms2）と申します。 最近はCSSやSVGのアニメーション、ElectronやCordovaなどを用いたハイブリッドアプリなどがお気に入りです。 最近の活動 東大の坂本 大介先生と弊社の坂本 竜基、鈴木 健司（@kensuzuk）と一緒にFix & Slideというタッチデバイスにおける選択のUIについての論文を投稿し、UIST 2015やmobileHCI 2016と言った世界的なトップカンファレンスにて採択され発表・登壇などを行っていました。 上記の論文に関しましては、また別の機会でご紹介できたらと考えております。 それでは本題に入ります。 pointer-eventsについて 皆様はpointer-eventsというCSSプロパティーやその使い道を
10分で作るYahoo! OpenID RP
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。システム統括部脇阪です。 「OpenID関係の記事を24時間書く」という依頼の元、がんばって何か書こうと思います！ OpenID関連の記事ということで、今回はYahoo! JAPANのOpenID対応RPを構築する方法を紹介したいと思います RPって何？ RPとはRelying Partyの略で、OpenIDでログインできるサイトのことです。日本ではsmart.fm(旧iKnow!)が有名です。 ちなみにOpenIDを発行しているYahoo! JAPANやmixi,livedoorなどのことはOP(OpenID Provider)と言います。今回はOPに関しては取り扱いません。 RPになるメリットって？ ユーザーごとに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
