Zenn
🙄

今さら聞けないhtml～viewportとlink～【超初心者向け】

2025/01/31に公開
HTML
tech

metaタグのことで頭の中がメタメタです。
こんにちは、
ワニかず@40歳 出戻りエンジニアです。

さて今回は、今さら聞けないhtmlシリーズということで、
viewportメタタグやlinkタグについてまとめました。
（私のアウトプット）

超初心者向けの記事ですのでお気を付けください。

viewportメタタグ

viewportメタタグは、モバイルデバイスでのWebページの表示を制御する重要なHTMLタグです。

基本的な使い方

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

主なcontent属性のオプション

  1. width=device-width: デバイスの画面幅に合わせる
  2. initial-scale: 初期のズームレベル（1.0が標準）
  3. minimum-scale: 最小ズームレベル
  4. maximum-scale: 最大ズームレベル
  5. user-scalable: ユーザーによるズームの可否（yes/no）

実用例

<!-- ズーム禁止 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<!-- ズーム範囲制限 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0">

この設定はレスポンシブデザインの実装に不可欠で、モバイルデバイスでの表示を最適化します。

その他のcontent属性

  • height: ビューポートの高さ
  • target-densitydpi: Android 4.4以前での画面密度の制御
  • viewport-fit: iPhoneXなどのノッチ対応（coverなど）
  • interactive-widget: 仮想キーボードの表示制御
  • shrink-to-fit: iOS 9以前でのコンテンツ縮小制御

ただし、最も一般的に使用されるのは最初に挙げた5つの属性です。その他の属性は特定のデバイスや状況でのみ必要となります。

linkタグ

<link>タグは外部リソースをHTMLに関連付けるための要素です。

  1. CSSファイルの読み込み
  2. ファビコンの設定
  3. プリロード・プリフェッチの制御
  4. PWAマニフェストの指定

基本構文

<link 
  href="リソースのパス"
  rel="リソースタイプ"
  type="MIMEタイプ"
  media="メディア条件"
>

複数の属性を組み合わせることで、Webサイトのパフォーマンス、SEO、UXを最適化できます。

linkタグの属性

主な属性

  • href: リソースの場所（URL）
  • rel: リンクされるリソースとの関係性
  • type: リンクされるリソースのMIMEタイプ
  • media: メディアタイプの指定
  • sizes: アイコンサイズの指定
  • crossorigin: クロスオリジンリクエストの制御

例：

<link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
<link rel="manifest" href="manifest.json">
<link rel="preload" href="font.woff2" as="font" type="font/woff2">

主なrel属性値

  1. リソースタイプ指定
  • stylesheet: CSSファイル
  • icon: ファビコン
  • manifest: PWAマニフェスト
  • preload: 事前読み込み
  1. 検索エンジン・SNS向け
  • canonical: 正規URL
  • alternate: 代替バージョン
  • amphtml: AMPページ
  1. パフォーマンス最適化
  • dns-prefetch: DNS事前解決
  • preconnect: 事前接続
  • prefetch: 事前取得
  • prerender: 事前レンダリング
  1. セキュリティ関連
  • author: 作者情報
  • license: ライセンス情報
  • help: ヘルプドキュメント

各値は用途に応じて適切に選択します。

おわりに

多分、タグの構造を理解すれば、
あとは使うときに調べればよさそう（多分）
というのが理解できたのが良かったです。

アウトプットはメタメタの頭の中が整理される感じがしていい感じです、
と、冒頭のボケを回収して終わりたいと思います。（意味不明）
今回もありがとうございました！

Discussion