【HTML/CSSのみ】ぬるっと動くスムーススクロールの実装 - Qiita
#はじめに スムーススクロールは、同じページ内を滑らかに移動させる機能のことです。 何か項目をクリックすると、画面がぬるっと動くWebサイトをよく見かけると思いますが、あの動きを実現するためのものです。 サイトに動きをつける際、個人的にこれまでは主にJavaScriptを使っていたのですが、スムーススクロールはHTML/CSSだけで実装できると知ったので、実際に試してみました。 #ソースコード・動作 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Scroll</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box top" id="top"> <span class="text">Top</sp
HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG
GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。 TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに TablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック
ARIA in HTML仕様が勧告候補に | アクセシビリティBlog | ミツエーリンクス
W3Cからアナウンスがあるように、ARIA in HTML仕様（参考日本語訳）が勧告候補（Candidate Recommendation）になりました（W3C Invites Implementations of ARIA in HTML）。 ARIA in HTMLは、WAI-ARIAをHTMLで使用するにあたっての適合要件を定めるものです。 ご存じの方も多いとは思いますが、内容に関して具体的な例を通して簡単に見てみましょう。 例えばmain要素の場合、3章のテーブルをたどっていくと、2列目の暗黙のARIAセマンティクス（Implicit ARIA semantics）としてrole=mainが規定されていることがわかります。これは、HTML Standardのmain要素の冒頭の要素定義で、Accessibility considerationsのFor authorsのリンクからも
表示速度を飛躍的に向上させる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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape