<picture><source srcset属性>が正常動作しない理由

レスポンシブ ＞ レスポンシブ画像

一覧

　状態:- 　閲覧数:2,691 　投稿日:2016-01-15 　更新日:2016-01-15
遭遇事例1
・<picture>直下に<a>を配置すると、正常動作しない

遭遇事例1 … <picture>直下に<a>を配置すると、正常動作しない

　閲覧数:684　投稿日:2016-01-15　更新日:2016-01-15

aタグ未使用


<picture>直下に<source>と<img>を配置
　・正常動作
<picture>

  <source srcset="" media="(min-width: 544px)">

  <img src="" alt="">

</picture>


aタグ使用


<picture>直下に<source>と<a>を配置
・正常動作しない
<picture>

  <source srcset="" media="(min-width: 544px)">

  <a href="">

    <img src="" alt="">

  </a>

</picture>


<picture>直下に<a>を配置
・正常動作しない
<picture>

 <a href="">

   <source srcset="" media="(min-width: 544px)">

   <img src="" alt="">

 </a>

</picture>



<picture>直下に<source>と<img>を配置。全体を<a>で囲う
・正常動作
<a href="">

 <picture>

   <source srcset="" media="(min-width: 544px)">

   <img src="" alt="">

 </picture>

</a>


レスポンシブ画像実装方式



類似度ページランキング
順位 ページタイトル抜粋 ％
1 が正常動作しない理由 67
2 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 33
3 inputタグのsize属性 32
4 rssページが正しく表示されない／Google Chrome 30
5 perspectiveのベンダープレフィックスを自動付与したい 30
6 要素の alt 属性 と、
要素の違い
 30
7 「:first-child」が効かない場合は「:first-of-type」 30
8 Bookmarks clean up 30
9 「Bootstrap」の「js」がいつの間にか期待通り動作しなくなった際の対応案 29
10 「Twitter Bootstrap」導入したらおかしくなった時、試した方がよいかもしれないこと 29
11 数値データ型 ／ Numeric Data Types 29
12 Twitter Bootstrap 1.4 28
13 Twitter Bootstrap 2.0 28
14 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 28
15 cluster 28
16 Twitter ヘッダー画像は、Fireworks CS3 で作成している 27
17 JavaScript in Bootstrap 27
18 History Disabler 27
19 Illustrator CS3でのJavaScript実行方法 27
20 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 27
2026/8/29 3:59 更新
週間人気ページランキング ／ 8-21 → 8-27
順位 ページタイトル抜粋 アクセス数
1 Design 0 11
2 RGB → HSL ／ RGB → HSV | 色変換(色) 3
2 色変換(色) カテゴリー 3
2 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
3 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 2
3 絶対パス | HTML 2
3 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 | Google Chrome(ブラウザ) 2
3 RGBの種類 ／ ビットカラー | RGB(色) 2
3 Chromeブラウザは、ユーザーという単位で情報管理している(Cookieを使用する場面もあるが、必ずしもCookieだけに頼っているわけではない) | Google Chrome(ブラウザ) 2
3 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
3 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 2
3 IrfanView | ソフトウェア 2
4 考え方A.長さの比率で角度６０°を分割 ／ B≧G≧R 1
4 Create Link(Chrome 拡張機能) カテゴリー 1
4 Photoshop CS3(Photoshop) カテゴリー 1
4 「position:sticky;」がどうしても効かない →
を一旦削除してみる →
に「display:inline;」を指定 | CSSトラブル対応(CSS)
1
4 ツールチップが表示されないときー 1
4 「DALL·E 2 - OpenAI」を使用してみた感想。2022 年 7 月 31 時点では、デザイン実務に耐えられるレベルではないと思いました。 | AI画像生成 1
4 表示されている画像が、キャッシュから取得されているか、確認する方法 | Google Chrome(ブラウザ) 1
2026/8/28 5:05 更新