Home
ウェブ制作
ウェブデザイン
ウェブデザイン

【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選

海外サイト Marko Denic で公開された HTML Tips を著者 @denicmarko より許可をもらい、意訳転載しています。

 

この記事では、あまり知られていないHTMLの小技20個を実例サンプルと一緒にご紹介します。

 

CSSやJavaScriptなども使わずに、わずかなHTMLコードだけで実装可能な便利テクニックで、手軽に利用できるのもポイントです。

 

 

先日紹介したCSS小技テクと一緒に活用してみてはいかがでしょう。

 

【CSS】知っておくと便利！短いコードで実装できるCSS小技20選

たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個

 

 

そもそもHTMLってなに？

 

HTML（Hypertext Markup Language）は、Webブラウザで表示するための基本となる標準的なマークアップ言語です。また、CSS（Cascading Style Sheets）などの技術や、JavaScriptなどのスクリプト言語によってサポートされることもあります。

 

ホームページを作るときは、まずHTMLをつかって文章の構成を決めてマークアップすることで、表示したい情報をデザインします。ウェブページの基本といって良いでしょう。

 

では、わずかなCSSコードで実装できるテクニックを詳しくみていきましょう。

 

 

あまり知られていない、短いHTMLコードで実装できるテクニックまとめ

 


コンテンツ目次

 

loading="lazy"属性

ウェブパフォーマンス改善テクニックのひとつで、loading="lazy"属性利用すると、ユーザーがスクロールするまで読み込みを遅延することができます。YouTube動画の埋め込み用iframeコードや、大きなサイズの画像表示などにも便利。

 

<img src='image.jpg' loading='lazy' alt='代替テキスト'>

 

 

Eメールや電話、SMSショートメッセージへの送信

Eメール作成ページを開いたり、電話に直接発信したり、ショートメッセージを送信できるテクニック。

 

<a href="mailto:{email}?subject={subject}&body={content}">
  Eメールを送信
</a>

<a href="tel:{phone}">
  お電話ください
</a>

<a href="sms:{phone}?body={content}">
  SMSショートメッセージを送信
</a>

 

 

リストの順番を決めるstrat属性

start属性を利用することで、リスト形式の数字を自由に決めることができます。

 

 

 

meter要素で数字を表示

meter要素を利用すれば、色付きスライダーで数値や数量を表示できます。JavaScriptやCSSを一切必要ありません。

 

See the Pen
HTML <meter> by Marko (@denic)
on CodePen.

 

 

HTMLネイティブ・サーチ

フォーム入力要素にあらかじめデータリストをいくつか指定しておくことで、入力欄にドロップダウンで候補キーワードとして表示できます。

 

See the Pen
Native HTML Search by Marko (@denic)
on CodePen.

 

 

Fieldset要素でラベルをグループ化

fieldset要素を利用すれば、ウェブフォーム内の複数のコントロールやラベル（label）をひとまとめにグループ化できます。

 

See the Pen
Fieldset Element by Marko (@denic)
on CodePen.

 

 

window.opener を使って元ウィンドウの情報の取得を防止

target="_blankで開いたページでは、元のページのwindow.openerにアクセスできるようになります。「いつの間にか元のウィンドウがフィシングサイトに遷移していた」など、セキュリティやパフォーマンスに悪影響となる可能性も。これを防ぐには、rel="noopener"またはrel="noreferrer"を含めるようにしましょう。

 

<a href="https://markodenic.com/" target="_blank" rel="noopener">
	参考ウェブサイト
</a>

 

 

base要素

HTMLドキュメント内のすべてのリンクを新しいタブで開きたいときは、base要素を使用しましょう。以下のサンプル例では、どちらのリンクも新しいタブで開きます。

 

See the Pen
Base Element by Marko (@denic)
on CodePen.

 

 

ファビコンのキャッシュ防止

ウェブサイトのファビコンを更新するには、ファイル名に?v=2を追加することで、ブラウザに新しいバージョンをダウンロードさせることができます。

 

ユーザーが確実に新しいバージョンを入力できるよう、特に本番環境で有効的なテクニック。

 

<link rel="icon" href="/favicon.ico?v=2" />

 

 

spellcheck属性でスペルチェック

要素のスペルミスをチェックするかどうか決めることができるspellcheck属性。

 

See the Pen
spellcheck attribute by Marko (@denic)
on CodePen.

 

 

HTMLスライダーの表示

input type="range"を使えば、数値をスライダーで調整できるように。選択している数値はinput type="number"で表示できます。

 

See the Pen
input type="range" by Marko (@denic)
on CodePen.

 

 

HTMLだけでアコーディオンを表示

details要素を使えば、HTMLだけのネイティブアコーディオンを作成できます。

 

See the Pen
HTML Accordion by Marko (@denic)
on CodePen.

 

 

markタグでテキスト強調ハイライト

markタグを利用すれば、テキストの一部を黄色マーカーで強調できます。

 

 

 

ダウンロードファイルにはdownload属性を

URLリンクにdownload属性を使えば、ファイルに移動するのではなく、ファイルを直接ダウンロードできます。

 

<a href='path/to/file' download>
  Download
</a>

 

 

webpファイル形式の使用

画像フォーマットに「.webp」を使用することで、画像サイズを小さくすることができ、ウェブサイトのパフォーマンスを向上させることも。

 

<picture>
  <!-- サポートされていたら.webp画像を読み込む -->
  <source srcset="logo.webp" type="image/webp">
  
  <!--
 　　　　　　.webp画像や<picture>タグが
　　　　　　　ブラウザにサポートされていないときの
　　　　　　　フォールバックとして
  -->
  <img src="logo.png" alt="logo">
</picture>

 

 

ビデオ動画のサムネイル表示

poster属性を使えば、動画の読込中や再生ボタンを押すまで表示される画像を細かく指定できます。

 

<video poster="path/to/image">

 

 

type="search"で取り消しマークを表示

検索ボックスにtype="search"を使用すると、取り消し用の「X」クリアマークが自動で表示されます。

 

 

 

HTMLのみで実装できる機能は、こんなにもたくさんあるんですね。今後も小技テクニックを追加、アップデート予定です。

 

Related