---
# System prepended metadata

title: NKOHwebナレッジ集

---

# NKOHwebナレッジ集
役割に関わらずみなが知っておくべき豆知識
## picture要素、Safariで使えない
【safari】<picture>タグが表示崩れを起こす
キャッシュクリアした後、ブラウザ幅を変更すると、<picture>で指定している画像で、pc用、sp用が入れ替わってしまう。
#### 対応
<picture>タグを使用せず、メディアクエリなどCSSにてレスポンシブ対応する。
#### 未調査
imgのsrcset属性は未調査だけどアヤシイ…？？？

## タップ可能な要素の最小サイズは48x48ピクセル
48ピクセルの領域は、約9mmに相当。これは、人の指の腹の領域とほぼ同じサイズだそうです。

## head内セット
作成中〜〜〜〜
参考： https://qiita.com/kana-t/items/76d84fb7746ed9c18d9d
```
<head>
  <meta charset="utf-8"/>
  <title>そうだ、ミルクは愛なのだ。キャンペーン｜ジャージー牛乳プリン｜オハヨー乳業</title>
  <meta name="keywords" content="" />
  <meta name="description" content="ミルクのやさしさに包まれるミルキーなボディケアセットなどが総計738名様に当たる「そうだ、ミルクは愛なのだ。キャンペーン」は3月15日をもって終了いたしました。たくさんのご応募ありがとうございました！" />
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta property="og:title" content="そうだ、ミルクは愛なのだ。キャンペーン｜ジャージー牛乳プリン｜オハヨー乳業"/>
  <meta property="og:url" content="https://www.ohayo-milk.co.jp/campaign/jersey2102/"/>
  <meta property="og:description" content="ミルクのやさしさに包まれるミルキーなボディケアセットなどが総計738名様に当たる「そうだ、ミルクは愛なのだ。キャンペーン」は3月15日をもって終了いたしました。たくさんのご応募ありがとうございました！"/>
  <meta property="og:type" content="article"/>
  <meta property="og:image" content="https://www.ohayo-milk.co.jp/assets/img/common/ogp.png"/>
  <meta property="og:site_name" content="オハヨー乳業株式会社"/>
  <meta name="apple-mobile-web-app-title" content="オハヨー乳業株式会社"/>
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/common/favicons/apple-touch-icon.png"/>
  <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/common/favicons/favicon-32x32.png"/>
  <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/common/favicons/favicon-16x16.png"/>
  <link rel="manifest" href="/assets/img/common/favicons/manifest.json"/>
  <link rel="mask-icon" href="/assets/img/common/favicons/safari-pinned-tab.svg" color="#5bbad5"/>
  <meta name="theme-color" content="#ffffff"/>
  <!-- CSSの読み込み順は変更しないでください。追加が必要な場合はサイト全体のstyleを定義しているstyle.min.cssが先にくるようにしてください。 -->
  <link rel="stylesheet" type="text/css" media="all" href="/assets/css/style.min.css" />
  <link rel="stylesheet" type="text/css" media="all" href="/assets/css/lib/jquery.fancybox.min.css" />
  <link rel="stylesheet" type="text/css" media="all" href="/campaign/jersey2102/css/jersey2102.css" />
  <meta name="google-site-verification" content="e5VQ6OhqoafKPhOH95G9Yl_II27p3BpsnRdLutS8VCs" />
  <!-- Google Tag Manager -->
  <script>
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-NTT4GP5');
  </script>
</head>
```