手引

このページでは、HTML に関する手引ガイドを一覧で掲載しています。ページへの JavaScript の追加、読み込みパフォーマンスの最適化、用語の意味的な定義、data-* 属性の扱いなど、さまざまな課題について解説しています。

HTML で用語を定義する

HTML は、インラインであろうと構造化された用語集であろうと、記述の意味を伝達するいくつかの方法を提供します。 この記事では、キーワードを定義する際に適切にマークアップする方法について説明します。

ウェブページに JavaScript を追加する

JavaScript を活用して、ウェブページを次のレベルに引き上げましょう。この記事では、 HTML 文書から JavaScript を正しく起動する方法を学びます。

キャンバス内で別オリジンの画像の使用

HTML では画像に crossorigin 属性を提供し、適切な CORS ヘッダーと組み合わせることで、 img 要素で定義されている他のオリジンから読み込まれた画像を、 canvas の中で現在のオリジンから読み込まれた画像であるかのように扱うことができます。

データ属性の使用

HTML は、特定の要素に関連付ける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されています。 data-* 属性により、標準外の属性や DOM の追加プロパティなどの特殊な方法に頼らずに、標準的な意味のある HTML 要素に追加情報を格納することができます。

画像の上にヒットマップを追加する

HTML では、area および map 要素を使用して、クリック可能なイメージマップを作成できます。 この記事では、イメージマップの設定方法と、作成前に考慮すべきいくつかの注意点について記述します。

読み込みが速い HTML ページを作成する

ウェブページを最適化すると、訪問者に対して応答性のよいサイトを提供するだけでなく、ウェブサーバーやインターネット接続の負荷を低減する効果もあります。これは大規模なサイトや、緊急事態で通信量が急増するニュース速報のようなサイトでは重要でしょう。 この記事では、一般的な知見と実験結果に基づいて、ページの読み込み時間を改善する方法について説明します。