知られざるHTML:40の便利なテクニック

  • 2314単語
  • 12分
  • 31 Jul, 2024

HTML開発には、非常に実用的だがあまり知られていないテクニックがいくつかあります。この記事では、ほとんどの人が知らない40のHTMLテクニックを共有します。これらのテクニックは、さまざまなHTMLタグや属性の使用方法をカバーしており、ウェブページの開発効率とユーザー体験を向上させるのに役立ちます。

1. 連絡用リンクの作成

<a>タグをmailto:tel:sms:と組み合わせることで、クリックして連絡できるリンクを作成できます。

1
<a href="mailto:name@example.com">メールを送信</a>
2
<a href="tel:+1234567890">電話をかける</a>
3
<a href="sms:+1234567890">SMSを送信</a>

2. ダウンロードリンクの作成

<a>タグのdownload属性を使用することで、ファイルを直接ダウンロードできるリンクを作成できます。

1
<a href="file.pdf" download>PDFをダウンロード</a>

3. リンクの開き方を制御

target属性でリンクの開き方を制御できます。新しいタブ、同じウィンドウ、または指定されたフレームで開くことができます。値には_blank, _self, _parent, _topがあります。

1
<a href="https://example.com" target="_blank">新しいタブで開く</a>

4. 折りたたみコンテンツの作成

<details><summary>タグを使うことで、シンプルな折りたたみコンテンツエリアを作成できます。

1
<details>
2
<summary>クリックして展開</summary>
3
<p>これは折りたたみ可能なコンテンツです。</p>
4
</details>
クリックして展開

これは折りたたみ可能なコンテンツです。

5. セマンティックタグの使用

<article><section><header><footer>などのセマンティックタグを使用することで、コードの可読性とアクセシビリティを向上させ、SEOにも良い影響を与えます。

6. <optgroup>でドロップダウンメニューを改善

<optgroup>タグを使用することで、ドロップダウンメニュー内のオプションをグループ化し、メニューをより整理されたものにできます。

1
<select>
2
<optgroup label="果物">
3
<option>リンゴ</option>
4
<option>バナナ</option>
5
</optgroup>
6
<optgroup label="野菜">
7
<option>トマト</option>
8
<option>ニンジン</option>
9
</optgroup>
10
</select>

7. 動画の表示改善

<video>タグのposter属性を使用することで、動画の読み込み前にサムネイルを表示できます。

1
<video controls poster="thumbnail.jpg">
2
<source src="movie.mp4" type="video/mp4" />
3
</video>

8. 動画の読み込み最適化

preload属性を使用して、動画の事前読み込みの動作を設定し、読み込み速度を最適化できます。

1
<video src="movie.mp4" preload="auto">
2
ブラウザがビデオタグをサポートしていません。
3
</video>

9. 複数選択のサポート

multiple属性を使用することで、ファイル選択やドロップダウンメニューで複数選択をサポートできます。

1
<input type="file" multiple />
2
<select multiple>
3
<option value="java">Java</option>
4
<option value="javascript">JavaScript</option>
5
</select>

10. 画像の読み込み方法を制御

loading属性を使用して、画像の読み込み方法を遅延読み込み(lazy)または即時読み込み(eager)に設定できます。

1
<img src="image.jpg" loading="lazy" />

11. アクセシビリティの確保

alt属性で画像に説明を提供し、アクセシビリティとSEOを向上させます。

1
<img src="image.jpg" alt="画像の説明" />

12. <picture>要素を使用してレスポンシブ画像を実現

<picture>要素を使用することで、デバイスの表示条件に応じて異なる画像を読み込むことができます。

1
<picture>
2
<source media="(min-width: 650px)" srcset="img_large.jpg" />
3
<source media="(min-width: 465px)" srcset="img_medium.jpg" />
4
<img src="img_small.jpg" alt="画像の説明" />
5
</picture>

13. 最大入力長の設定

maxlength属性を使用して、入力フィールドに入力できる最大文字数を制限できます。

1
<input type="text" maxlength="4" />

14. 最小入力長の設定

minlength属性を使用して、入力フィールドに入力する最小文字数を制限できます。

1
<input type="text" minlength="3" />

15. スペルチェックの制御

spellcheck属性を使用して、ブラウザのスペルチェック機能を有効または無効にできます。

1
<input type="text" spellcheck="true" />

16. 特定のファイルタイプを受け入れる

accept属性を使用して、ファイル入力フィールドで受け入れるファイルタイプを指定できます。

1
<input type="file" accept="image/png, image/jpeg" />

17. カスタムスライダーの作成

<input>type="range"を使用することで、範囲内の値を選択できるスライダー入力を作成できます。

1
<input type="range" min="1" max="100" value="50" />

18. <form><fieldset>でフォームを整理

<fieldset>タグを使用してフォーム要素をグループ化し、<legend>でタイトルを定義します。

1
<form>
2
<fieldset>
3
<legend>個人情報</legend>
4
<label for="name">名前:</label>
5
<input type="text" id="name" name="name" />
6
</fieldset>
7
</form>
個人情報

19. <label>タグでフォームのアクセシビリティを向上

<label>タグはフォームコントロールに説明を提供し、フォームの使いやすさを向上させます。

1
<label for="username">ユーザー名:</label>
2
<input type="text" id="username" name="username" />

20. <datalist>で提案を提供

<datalist>タグは<input>にドロップダウンの提案リストを提供します。

1
<input list="browsers" />
2
<datalist id="browsers">
3
<option value="Chrome"></option>
4
<option value="Firefox"></option>
5
<option value="Safari"></option>
6
<option value="Edge"></option>
7
<option value="Opera"></option>
8
</datalist>

21. コンテンツの編集を許可

contenteditable属性を使用することで、要素の内容を編集可能にし、ユーザーがテキストを直接変更できるようにします。

1
<div contenteditable="true">この内容は編集可能です。</div>
この内容は編集可能です。

22. 追加情報の提供

title属性を使用して、ユーザーが要素にカーソルを合わせたときに追加情報を表示します。

1
<p title="世界保健機関">WHO</p>

WHO

23. セパレーターの作成

<hr>タグを使用することで、水平セパレーターを作成し、視覚的にコンテンツを分けることができます。

1
<hr />

24. テキストの下付きと上付きの表示

<sub><sup>要素を使用して、テキストの下付きと上付き表示を行います。

1
<p>H<sub>2</sub>O</p>
2
<p>E=mc<sup>2</sup></p>

H2O

E=mc2

25. <base>で基準URLを定義

<base>タグを使用して、すべての相対URLの基準URLを定義します。

1
<head>
2
<base href="https://example.com" target="_blank" />
3
</head>
4
<body>
5
<a href="/page">ページ</a>
6
</body>

26. <meta>タグでビューポートを設定

<meta>タグのviewport設定を使用して、モバイルデバイスでのウェブページの表示を最適化します。

1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

27. <wbr>で長い単語の改行を制御

<wbr>タグを使用して、長い単語の特定の位置にオプションの改行点を追加します。

1
<p>
2
これは長い単語です:su<wbr />per<wbr />ca<wbr />li<wbr />fra<wbr />gi<wbr />li<wbr />sti<wbr />cex<wbr />pi<wbr />ali<wbr />do<wbr />cious。
3
</p>

28. <code><pre>でコードスニペットを表示

<code>タグを使用してインラインコードを表示し、<pre><code>を組み合わせて複数行のコードスニペットを表示し、フォーマットを維持します。

1
<pre><code>
2
function helloWorld() {
3
console.log("Hello, World!");
4
}
5
</code></pre>

29. <bdi>を使用してテキストの方向を正しく保つ

<bdi>(双方向隔離)タグは、テキストの方向が周囲のコンテンツに影響しないようにし、異なる言語が混在する場合に便利です。

1
<p>ユーザー名:<bdi>username123</bdi></p>

ユーザー名:username123

30. <noscript>でJavaScript非対応のユーザーに情報を提供

1
<noscript
2
>お使いのブラウザはJavaScriptをサポートしていません。一部の機能が正常に動作しない可能性があります。</noscript
3
>

<noscript>タグは、JavaScriptが無効になっている場合に表示するコンテンツを提供します。

31. <b><strong>でテキストを太字にする

<b><strong>は、テキストを太字にするために使用され、<strong>は強調を意味します。

1
<p><b>太字</b>テキスト</p>
2
<p><strong>重要</strong>テキスト</p>

太字テキスト

重要テキスト

32. <i><em>で斜体と強調を表す

<i><em>は、斜体と強調を表すために使用され、<em>は強調を意味します。

1
<p><i>斜体</i>テキスト</p>
2
<p><em>強調</em>テキスト</p>

斜体テキスト

強調テキスト

33. <kbd>でユーザー入力を示す

<kbd>タグは、ユーザーが入力するキーやコマンドを示すために使用されます。

1
<p><kbd>Ctrl</kbd> + <kbd>C</kbd>でテキストをコピーしてください。</p>

Ctrl + Cでテキストをコピーしてください。

34. <time>で特定の時間や日付を示す

<time>タグは、特定の時間や日付を表すために使用されます。

1
<p>会議は<time datetime="2024-07-19">2024年7月19日</time>に行われます。</p>

会議はに行われます。

35. <cite>で作品のタイトルを引用

<cite>タグは、作品のタイトルを引用するために使用されます。

1
<p>私のお気に入りの小説は<cite>『百年の孤独』</cite>です。</p>

私のお気に入りの小説は『百年の孤独』です。

36. <meter>で既知の範囲内のスカラー測定を表示

<meter>タグは、既知の範囲内のスカラー測定(例えば、評価)を表示するために使用されます。

1
<meter value="2" min="0" max="10">2 / 10</meter>

2 / 10

37. <progress>でタスクの進捗を表示

<progress>タグは、タスクの進捗状況を表示するために使用されます。

1
<progress value="70" max="100">70%</progress>

70%

38. <abbr>タグで略語のフルフォームを表示

<abbr>タグを使用して、略語に対するフルフォームの説明を追加できます。ユーザーが略語にカーソルを合わせると、ツールチップが表示されます。

1
<p>
2
<abbr title="Hypertext Markup Language">HTML</abbr>はマークアップ言語です。
3
</p>

HTMLはマークアップ言語です。

39. <mark>タグでテキストを強調表示

<mark>タグは、テキストをハイライトするために使用されます。

1
<p>これは<mark>重要</mark>なメッセージです。</p>

これは重要なメッセージです。

40. <dialog>タグでダイアログボックスを開く

この記事を参考にしてください:HTML5新タグ<dialog>の使い方

まとめ

この記事では、40個のHTML実用テクニックを紹介しました。これらのHTMLテクニックを習得することで、ウェブ開発の効率を大幅に向上させ、ユーザー体験を改善できます。基本的なタグの使用から高度な機能の応用まで、これらの内容が役立つことを願っています!