CSS Scroll Snapは横送りの演出より先に各項目を通常の順で読めるようにする
- CSS Scroll Snapはscroll後の位置を項目へ揃えるための仕様です。横送りの見せ方を足す前に、各項目の本文、link、通常の順序、scroll containerを分けて確認します。
カテゴリー: ホームページ制作
swipeで切り替えるcarouselは一指で進めるbuttonを別に置く
- swipeやpinchで操作するcarouselは、同じ結果へ進めるbuttonを別に置きます。WCAG 2.1のPointer Gesturesを手掛かりに、gesture、機能、代替操作、実機確認を分けて考える方法を解説します。
CSSのgrid-auto-flow:denseは空きを埋める前に内容の順序を確認する
- grid-auto-flow:denseはCSS Gridの空きを後から来るitemで埋めます。その結果、画面上の順序が前後することがあります。カード一覧へ使う前に、読者が追う順序と空きを埋める目的を分けて確認します。
GutenbergのSpacer blockは段落の改行ではなくpage固有の間隔に使う
- Gutenberg 2.8には空の領域を作るSpacer blockが加わりました。段落の改行で位置を動かさず、投稿ごとに必要な間隔とthemeが管理する共通余白を分ける方法を解説します。
WebXR Device APIのorigin trialは仮想体験を足す前に通常の案内と試験対象を分ける
- WebXR Device APIはChrome 67 Betaでorigin trialとして案内されています。仮想体験を試すときは、通常の説明page、試験対象のdevice、読み込むmedia、止める条件を分けて決めます。
WordPress 4.9.5でcaptionのstyleが戻ったら投稿を直す前にthemeのCSSと本文を分けて確認する
- WordPress 4.9.5ではcaption shortcodeの以前のstyleが戻りました。画像説明を含む投稿を急いで書き換えず、本文、WordPressの出力、themeのCSSを分けて確認する方法を解説します。
AMP Storiesを試すときは画像を並べる前に通常記事へ残す説明とlinkを決める
- AMP Storiesは画像や動画をtapして読むmobile向けのformatです。通常記事を消さず、storyで伝える一つの場面、本文へ進むlink、公開後に見る数字を分ける方法を解説します。
Chrome 66のautoplay制限に備える動画pageは再生buttonと本文を分けて置く
- Chrome 66では音の出るautoplayに条件が付きます。動画を自動再生だけへ依存させず、再生button、静止画、本文、問い合わせへの入口を分けて置く考え方を解説します。
textareaとselectのautocomplete属性は入力内容でなくfieldの目的を示す
- textareaとselectにもautocomplete属性を使えるようになります。入力を必須にする属性とは分け、住所、都道府県、自由記入欄の目的を正しく示す考え方を解説します。
CSSのgapをgrid layoutへ使うときは子要素のmarginと役割を分ける
- CSS Gridのgrid-gap、grid-row-gap、grid-column-gapはChrome 66でgap、row-gap、column-gapへ名称が移ります。containerが決める間隔と子要素のmarginを分けて直す考え方を解説します。
Async Clipboard APIでコピーbuttonを作るときは書き込み処理と通常の選択コピーを分けて残す
- Async Clipboard APIはPromiseを使ってclipboardのtextを読み書きするAPIです。copy buttonを便利にしても、通常の選択コピーを残し、成功と失敗を画面で分ける作り方を解説します。
object-positionは画像の枠を埋める前に見せる位置を決め、3項指定を使わない
- object-positionは枠からはみ出す画像の見せる位置を決めるCSS propertyです。object-fitとの役割、読者に見せる部分の決め方、Chrome 66で使えなくなる3項指定を解説します。
GutenbergのColumns blockは横に並べる前にスマホの本文順と更新方法を決める
- GutenbergのColumns blockは横に並べる見た目だけで選びません。スマホで読む本文順、更新担当、実験的機能の検証を先に決める方法を解説します。
Service WorkerはSafari対応の見通しより先に通常pageの更新を守る
- Service WorkerのSafari対応が進んでも、営業時間や問い合わせ先まで古い表示にしないために、cacheする内容、更新確認、通常pageを残す考え方を解説します。
AdSense Auto adsはcodeを一度置くだけでも表示を確認してから使う
- AdSense Auto adsは広告codeを一度置いて始められます。表示位置を任せる前に、本文、問い合わせ、既存広告の見え方を確認する順序を解説します。
AMP for Emailはメール内で操作できても受付記録の正本を別に持つ
- AMP for Emailでメール内に返信や予約の操作を置くとき、画面上の操作と受付記録を分け、問い合わせを取りこぼさないための考え方を解説します。
