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

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

一覧

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

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

　閲覧数:673　投稿日: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/6/21 17:35 更新
週間人気ページランキング ／ 6-14 → 6-20
順位 ページタイトル抜粋 アクセス数
1 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 7
2 「属性」「プロパティ」「アトリビュート」の違い | CSS 6
3 Design 0 4
3 キャラクター無料着せ替えジェネレーター Dress up game ／ オンラインサービス | イラスト参考(デザイン) 4
4 Adobe Camera Raw 4.0 | Photoshop 3
4 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 3
5 １ 2
5 RGBの種類 ／ ビットカラー | RGB(色) 2
5 「Google Chrome」タブをグループへ追加すると、そのタイミングでグループは自動的に開かれてしまいます。開かないようにすることはできません | Google Chrome(ブラウザ) 2
5 Flickrがサポートするライセンス 9 ＋ 特別なライセンス 2 | 画像著作権(画像) 2
5 画像縦横比の問題 | 画像 2
5 「Google Chrome」で「This browser does not support WebGL」と表示される場合は、ハードウェアアクセラレーションに不具合がある可能性があるため、設定画面よりハードウェアアクセラレーションを一旦無効にしてみる | Google Chrome(ブラウザ) 2
5 UI カテゴリー 2
5 MediBang Paint | ソフトウェア 2
5 _notesフォルダ削除 | Dreamweaver8(Dreamweaver) 2
6 Firefox プライベードブラウジングを止めたら、アドオンバーが非表示 | Firefox(ブラウザ) 1
6 案2.幅に合わせた寸法での表示（Viewport-based Selection） 1
6 XnViewMP | XnView MP 系(ソフトウェア) 1
6 レスポンシブ画像実装方式 | レスポンシブ画像(レスポンシブ) 1
6 FotoSketcher 3.10 | FotoSketcher(ソフトウェア) 1
2026/6/21 5:05 更新