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

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

一覧

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

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

　閲覧数:702　投稿日: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/10/10 11:10 更新
週間人気ページランキング ／ 10-3 → 10-9
順位 ページタイトル抜粋 アクセス数
1 Design 0 9
2 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
3 RGB → 色相H 方式の違い | 色変換(色) 4
3 鉄道会社毎のカラーコード | カラーコード(色) 4
4 GIMP | GIMP 系(ソフトウェア) 3
5 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 2
5 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; | CSS 2
5 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 2
5 ログイン 2
5 ボタン候補2 ／ 「ボタン」エリア外で「テキスト」表示しても良いの？ | ボタン(UI) 2
5 RGB ⇔ Lab | 色変換(色) 2
5 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 2
5 ｢レイヤー」＋「レイヤー効果」をコピーして新規psdにペースト | Photoshop 2
5 UI カテゴリー 2
5 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 2
5 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 2
5 いい感じのGIFアニメーションを探してみる … 国内 2
5 早見表 | Illustrator CS3(Illustrator) 2
6 RGBの種類 ／ ビットカラー | RGB(色) 1
6 「シークレットモード」を利用していて一番困ること 1
2026/10/10 5:05 更新