メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • HTMLコンテンツをモバイル・タブレットのブラウザに最適化するメタタグ(viewport)の利用

HTMLコンテンツをモバイル・タブレットのブラウザに最適化するメタタグ(viewport)の利用

HTMLのメタタグ(viewport)の設定で違うサイズのブラウザにコンテンツ表示の最適化

  • PC・タブレット・モバイルのブラウザのサイズがそれぞれ違います
  • コンテンツレイアウトをそれぞれのサイズに対応しきれないことがよく起きます
  • メタタグ(viewport)の設定より、ある程度コンテンツの表示に最適化することができます
    • 例:メタタグ(viewport)の設定
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • メタタグ(viewport)設定あり/なしのコンテンツ表示結果は以下のようです
      メタタグ(viewport)設定あり/なしの表示結果
  • 写真と文字だけのコンテンツを違うサイズのブラウザに最適化することが比較的に簡単ですが
    • 表、カラムなどがある複雑なレイアウトのコンテンツではこのメタタグ(viewport)だけでは表示最適化することが難しいです

メタタグ(viewport)の幅設定に固定な値を避けたほうが良い

  • viewportの幅設定(width)に固定値の使用ができます
    • 例:<meta name="viewport" content="width=450, initial-scale=1.0">
  • widthに固定値を入れると、特定なサイズに対応できますが、ほかのサイズのブラウザに適応できなくなる恐れがあります
  • ブラウザの幅に合わせた設定にしたほうが良いでしょう
    • 例:<meta name="viewport" content="width=device-width, initial-scale=1.0">
    • "width=device-width”:ブラウザの幅に応じてコンテンツ表示の最適化をしてくれます

メタタグ(viewport)のスケール(initial-scale)設定に注意

  • ”initial-scale=1.0”: コンテンツの拡大/縮小はしないです
  • ”initial-scale=0.5”:コンテンツを縮小して表示します
  • 縮小表示する場合、倍率よりコンテンツの字が読みづらくなることがありますので、注意する必要があります
  • 一方、拡大して表示すると、文字が大きくなって、コンテンツの内容を表示しきれなくなることがあります

メタタグ(viewport)とcss(media)を併用すればより効果的

  • メタタグ(viewport)だけでは、コンテンツを違うサイズのブラウザに最適に表示することに限界があります
  • css(media:ブレイクポイントの設定)で違うサイズのブラウザに対してコンテンツレイアウト設計を行います
    <!--  例:media でブレイクポイントの設定 -->
    @media (min-width: 360px) {
      body {
        font-size: 1.0em;
      }
    }
    
    @media (min-width: 500px) {
      .seven-day-fc .temp-low,
      .seven-day-fc .temp-high {
        display: inline-block;
        width: 45%;
      }
    
      .seven-day-fc .seven-day-temp {
        margin-left: 5%;
      }
    
      .seven-day-fc .icon {
        width: 64px;
        height: 64px;
      }
    }
  • 違うサイズに大雑把なレイアウトの設定ができましたら、メタタグ(viewport)の設定でより効果できとなります

クリックイベント発生の座標:offsetX/Y,clientX/Y,pageX/Y,screenX/Yの区別

イベント発生場所の座標:offsetX/Y,clientX/Y,pageX/Y,screenX/Y

  • マウスクリック(click)、オバー(mousehover)などのイベントが発生すると、発生場所の座標がイベントのプロパティにあります
    eventのプロパティ
  • イベント発生場所の座標は以下のようです
    • offsetX, offsetY
    • clientX, clientY
    • pageX, pageY
    • screenX, screenY

参照オブジェクトの違う座標を理解する

  • イベント発生時の座標がそれぞれの参照オブジェクトを参照します
  • offestX/Y:イベントリスナーを設定してオブジェクト(例:div、アンカータグ、ボタンなど)
    • そのオブジェクトを表示するボックスの縦、横の座標となります
  • clientX/Y:viewportの縦、横までの座標となります
    • viewportはブラウザの可視範囲を指しています(詳細は:「HTMLコンテンツをモバイル・タブレットのブラウザに最適化するメタタグ(viewport)の利用」を参考)
  • pageX/Y:コンテンツのHTMLのドキュメント(htmlタグ)に参照します
    • コンテンツが長い時に、ブラウザのviewportに表示切れないことがあります。
    • ブラウザのスクロール機能でhtmlコンテンツを表示します
  • screenX/Y:文字通りにスクリーン(モニター)の可視範囲を参考します
  • それぞれの座標は以下のイメージで表現
    eventの発生場所の座標

htmlにあるエレメントの座標(例:offsetX/Y)と違う

  • htmlにあるそれぞれのエレメントの座標(例:offsetX/Y)があります
  • エレメントが親エレメントとの位置関係を示しています
  • 詳細は「コンテンツ表示とスクロール時のアニメ効果 」を参考します

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads