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

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

一覧

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

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

　閲覧数:707　投稿日: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/11/07 12:57 更新
週間人気ページランキング ／ 10-31 → 11-6
順位 ページタイトル抜粋 アクセス数
1 CSS カテゴリー 5
1 Design 0 5
1 ログイン 5
2 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 4
2 黒体 ／ 色温度 ／ D65（6500K）／ D50（5000K）／ K | 色 4
2 Google Chrome(ブラウザ) カテゴリー 4
3 「position:sticky;」がどうしても効かない →
を一旦削除してみる →
に「display:inline;」を指定 | CSSトラブル対応(CSS)
3
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
3 ページ内リンクの位置を微調整するためには、Negative margin を使用する | CSS 3
3 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく | CSSトラブル対応(CSS) 3
3 アイコンを「Font Awesome」から変更。→「自分で探したSVG」を「自分のserver」へアップロード | アイコン(デザイン) 3
4 画像 2
4 「属性」「プロパティ」「アトリビュート」の違い | CSS 2
4 Chromeブックマーク(ブラウザ) カテゴリー 2
4 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 | Google Chrome(ブラウザ) 2
4 鉄道会社毎のカラーコード | カラーコード(色) 2
4 フェイスアイコンメーカー ／ オリジナル顔アイコン ／ 江崎グリコ株式会社 2
4 _notesフォルダ削除 | Dreamweaver8(Dreamweaver) 2
4 「bgcolor」「background-color」「background」の違い | CSS 2
4 カラーマネージメント | 色 2
2026/11/7 5:05 更新