# 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>
```
Sign in with Wallet
Connect another wallet