ogiori.com | HTML

iPhoneで住所、電話番に点線が付くのをやめる。

👍

<meta name="format-detection" content="telephone=no, address=no, email=no">

iPhoneで住所、電話番に点線が付きます。それを、無効化してくれます。

HTMLで画面サイズや条件に応じて表示する画像を切り替える。

👍

<picture>
  <source srcset="○○px以上で表示する画像のURL" media="(min-width: ○○px)">
  <img src="上記の条件にマッチしなかった時に表示する画像のURL" alt="">
</picture>

画面幅が min-width 以上 → <source> の画像を表示。画面幅が min-width 未満 → <img> の画像を表示。 CSSで display: none で切り替えた場合、非表示にしても画像自体はダウンロードされます。 <picture> はブラウザが条件に合う画像だけをダウンロードするので、無駄な通信が発生しません。

ビデオを埋め込む。

👍

<video width="1027" height="578" poster="" loop muted autoplay playsinline>
  <source src="ファイルパス" type="video/mp4">
</video>

「loop」動画が終わったら最初に戻って繰り返し再生します。「muted」音声をミュートにします。 autoplay と組み合わせる際に重要で、ほとんどのブラウザはミュートでないと自動再生をブロックします。「autoplay」ページ読み込み時に自動で再生を開始します。 muted とセットで使わないと、ブラウザに無視されることがほとんどです。「playsinline」主にiOSのSafari向けの属性です。 iOSはデフォルトで動画を全画面で再生しようとしますが、この属性を付けることでページ内（インライン）でそのまま再生されます。Webサイトの背景動画やバナー動画では必須と言えます。【まとめると】この4つをセットで使うことで「ページを開いたら自動で、音なしで、ループして、全画面にならずに再生する」という、よくあるトップページの背景動画の挙動が実現できます。

電話をかける。

👍

<a href="tel:01-2345-6789">01-2345-6789</a>

href属性に「tel:〇〇」と書く。

リンクを新規タブで開く。

👍

<a href="" target="_blank" rel="noopener noreferrer"> </a>

target="_blank" > ここが新規タブで開く設定。 rel="noopener noreferrer" > 新しいタブから元のページへのアクセスを遮断（セキュリティ対策）・リンク元のURL情報（リファラー）を送信しない（プライバシー対策）

検索エンジン非検索。

👍

<!-- 検索エンジンへのインデックスを拒否・リンクのクロールも拒否 -->
<meta name="robots" content="noindex,nofollow">

検索エンジンへのインデックスを拒否・リンクのクロールも拒否。公開するときに、このコードを消すことを忘れないこと。