Google Chrome、Microsoft Edge、Firefox、Safariといった今どきのWebブラウザーでは、ユーザーの使いやすさを向上するようなWebの表現を、ブラウザーの違いを気にすることなく実装できる。シンプルなコードでWebの表現力をアップさせる最新機能を紹介する。

特集
これだけでOK!省コードWeb作成術
目次
-
Webページのスクロールで画像が飛び出す、簡単なコードで手軽に実装
「Webページを一定量までスクロールすると、画像や文字が左右から飛び出して表示される」という表現は、広告ページなどでよく使われています。モダンブラウザーで使えるJavaScriptの「Intersection Observer」を使うと手軽に実装できます。
-
Webページのイライラを解消、画像の遅延ロードで表示速度を上げる
Webページの表示速度を向上するための「画像の遅延ロード」というテクニックを紹介します。HTMLのコードで実現できます。
-
複雑なCSSなしでOK、画像や動画のアスペクト比を固定する
画像や動画などのアスペクト比(縦横比)を固定してWebページの拡大縮小ができるCSSを紹介します。「aspect-ratio」というCSSプロパティーを使います。
-
JavaScriptライブラリーは不要!Webページを滑らかスクロール
Webページの「スムーススクロール」を簡単に実現するCSSを紹介します。スムーススクロールとは、Webページで目次などをクリックして同じページ内の別の位置に移動するときに、滑らかに動いてスクロールする表現のことです。
-
たった1行?日付からカレンダーを作り出す驚異のHTMLワザ
Webページの入力フォームで、カレンダーを表示するHTMLを紹介します。このような入力フォームは、ユーザーに生年月日や商品の購入日などの日付を入力させたいときに使います。