計測方法と結果 以下のようになlazy loadが発火した時点でのソースと画面中央の距離(px)を測るページを用いて、iframeと画像の二種類のソースを対象に4000pxのdiv要素とボタン以外に何も読み込まれていない状態とすでに画像が読み込まれている状態との二つの状態を掛け合わせて計測しました。 import React, { useState, useRef } from 'react'; export default function Home() { const iframeDistance = 4000; const [showImage, setShowImage] = useState(false); const imageRef = useRef(null); const toggleImage = () => { setShowImage(!showImage); };

2023年5月31日 そのaria-labelは本当に必要ですか？ チーフアクセシビリティエンジニア 黒澤 アクセシビリティ対応には複数の方法がありますが、方法によって運用負荷はさまざまです。 私はお客様に、aria-labelを設定するのではなく、画面に表示されているテキストで情報が伝わるようにすると運用負荷を抑えられますよ、という話をすることがあります。 aria-labelは指定をミスするとほぼ確実にアクセシビリティの問題につながりますが、画面に表示されないため、作業漏れが生じやすく、指定ミスに気がつきにくい性質があります。 実際、お客様サイト・サービスの現状把握や競合調査の業務ではaria-labelの作業漏れや指定ミスによるアクセシビリティの問題を多数見てきました。 この記事では実際の問題例をサイト・サービスが特定されないように調整したうえで紹介していきます。 紹介した例はいずれ

<search>要素がHTML Standardに追加されました。私も初めて出会う要素になるわけですが、とても良い機会なので、私が要素を調べる際にどうやって調べて学んでいるのかを共有したいと思います。これは新しい要素に限らず、既存の要素の調査に応用できると思います。また、初学者はもちろん、マークアップを生業としている方にも参考になると思います。 新要素追加の経緯を調べる まずはHTML StandardのGitHubのPRからスタートするとよいでしょう。議論や更新はGitHubで行われています。たとえば、今回の<search>はAdd the <search> element #7320というPRによって更新されました。 そもそも更新自体のキャッチアップ方法はクローズされたPRを更新順にして確認してもいいですし、更新のみをツイートしている@htmlstandardのTLを確認してもいいと思

日頃マークアップで使用しているVScodeのスニペットをまとめてみました。 スニペットの指定方法 VScodeを開いて Code(WindowはFile) → Prefences→ User Snippets から、スニペットを指定したい言語を選ぶ あとはデフォルトの記述例に従ってjsonファイルにスニペットを記載していく 使い方 設定した言語のファイルを開いて、"prefix"に指定した単語を入力してTabキーを押せば展開される 例： html.jsonで以下のスニペットを指定した場合 "test1": { "prefix": "test", "body": [ "<div class="test">test</div>" ] },

HTMLファイルで特殊記号を使う際、① は &#9312;、© は &copy; のように置き換えて書かないといけないものだと思いこんでいないでしょうか。 現代ではそれは誤解です。 UTF-8では特殊記号の文字参照は不要 そもそも環境依存文字とは、データを扱う機種・ソフトウェアなどの違い（文字コードの割り当ての違い）により表示に違いが出てしまう文字のことでした。 例えばShift_JISには © が含まれておらずそもそも保存できなかったり、 ① などの丸数字は含まれているものの、WindowsとMac OS（当時）の割り当ての違いにより正しく表示できなかったりしました。[1] しかし現在ではUnicodeによって文字コードは統一化されており、その問題はほとんど起きなくなっています。 近年では多くの場合 UTF-8 でファイルを記述すると思います。 HTMLファイルの文字エンコーディングが

まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効

a タグにtarget=_blankをつける時はとりあえず rel 属性に rel="noopener noreferrer" と書いておけばいいと思ったのですが、どうして noreferrer だけだとだめなんだろうと気になったので調べてみました。 結論 noreferrer だけでも問題はないが、ちょーーーーーーーーーーーーーーーっとだけ問題がある。 前回までのあらすじ！ どうして noopener noreferrer が必要なのか a タグ には target=_blank という設定があり、別タブで開かせることができます。

No.HTML要素ネスト調査主要コンテンツカテゴリ他のカテゴリフォーム関連カテゴリ特徴属性概要公式文書情報連番要素名親子コンテンツモデル・概要（特性／子）使用できるコンテキスト・概要（親）メタデータフローセクショニングヘディングフレージングエンベディッドインタラクティブスクリプトサポートセクショニングルートパルパブルフォーム関連付要素送信可能要素リセット可能要素ラベル付け可能要素自動大文字化継承要素API記載要素カテゴリなし透過的置換要素グローバル固有属性読み意味（要約）関連する要素章タイトル（分類）文書No.使用できるコンテキストコンテンツモデル

フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする

レスポンシブイメージとは 画面幅や端末（パソコン、スマホなど）に応じて表示するイメージを切り替えること なぜ重要なのか スマホみたいな小さな画面で表示する時に5000x2500みたいな巨大画像を送りつけてしまうと、意味もなく通信時間がかかり、ユーザが可哀想 逆にスマホ用の小さな画像をPCで開くと、画像がボケる なので表示端末に応じて画像を切り替える必要がある そのために何を理解する必要があるのか HTML5でimgに追加されたsrcset属性, sizes属性 ブラウザがどうやって画像を選択しているのか Retinaについて 凄まじく短いですが、今回の記事用にGitHubのレポジトリ作っときました 早速実装してみよう サイズが異なるフラミンゴの画像を4つコチラから拝借しました。 普通にimg srcを指定して表示する まずは普通にimgにsrcを設定します。

VS Codeには便利な機能拡張がたくさんありますが、その中から特にHTMLを書いたり、修正する時に役立つ機能拡張を紹介します。 VS Code Extensions for HTML by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLを書いたり、修正する時に役立つVS Codeの機能拡張 はじめに HTMLを書いたり、修正する時に役立つVS Codeの機能拡張を紹介します。すべてを気に入るとは思いませんが、自分が抱えていない問題を解決したり、必要以上の機能を備えているかもしれません。それでも構いません。ここで紹介するのは、私が実際に使用し、気に入っている機能拡張です。 VS Codeの機能拡張を紹介する前に、Emmetから始めたいと思います。これは機能拡張ではありませんが、VS

ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleのエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加

Developers Summit 2020の登壇資料です。 新しいHTML要素の<portal>を利用するにあたってのデザイン方法や、詳細な技術仕様と実装方法について説明しました。Read less

通常のwebページを作る場合とは違って、タグの制限が多くて崩れやすいHTMLメール。 styleはインラインで書かなければならないし、flexboxもfloatも使えません（！） 今後のために、作り方と注意点のまとめです。 基本設定 ・基本的なレイアウトはtable組みで。 ・Doctypeの宣言は4.01Transitional(strictだとtableが使えない） ・文字コードはiso-2022-jp、改行コードはCRLF（楽天のメルマガはShift_JIS、改行コードはCRLF） ・styleはインラインで書く(scssで書いてgulpでinline化する) ・画像に絶対パス、border: noneは必須 注意点 ・同じパスの画像は使い回しが出来ない ・背景カラーはOK、背景画像はoutlookで表示されないので使わない ・rgbaが有効じゃない環境があるので使わない(どうしても

この記事は新野淳一氏のブログ「Publickey」に掲載された「HTML標準仕様の策定についてW3CとWHATWGが合意発表。今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に」（2019年5月29日掲載）を、ITmedia NEWS編集部で一部編集し、転載したものです。 W3CとWHATWGは、HTML標準仕様の策定について合意したことを発表しました。 いわゆるHTML5と呼ばれるHTMLの最新仕様には、WHATWGが公開しているものとW3Cが公開しているものが併存しており、しかも両者には一部で異なる仕様があったために混乱を招いているところがありました。 今回の合意によりW3CはHTMLとDOMに関する標準策定をやめ、今後はWHATWGが策定するリビングスタンダードがHTMLとDOMの唯一の標準となります。 両者が合意した主な内容は下記となります。HTMLとDOMのリビン

Help us understand the problem. What are the problem?

日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り

こんにちは、デザイナーのサリーです。 皆さんはSafariのリーダーモードを使っていますか？ 記事からheaderやfooterやCSSの装飾を取り払った「集中モード」で読むことができるという、Safariの機能です。 昔からある割にメジャーでないこの機能ですが（私も全然使いません＾o＾；）、隣の席のディレクターまさしは愛用していました。記事を読むときに、サイドバーや背景画像などの必要がない情報を目にしたくない、という理由で必ず使っているそうです。 人によってはなくてはならない機能なのかも……？ ということで、今回はリーダーモードの使い方や簡単な仕様などを調べてみましたのでご紹介します。 リーダーモードの使い方 使い方はとても簡単です！ アドレスバーの横の「リーダー」ボタンを押すだけです。 上のように会社概要ページやお問い合わせページなど、記事ではないページではリーダーボタンが押せません。

日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り