{"id":13691,"date":"2026-07-22T16:54:15","date_gmt":"2026-07-22T07:54:15","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?p=13691"},"modified":"2026-07-22T16:54:15","modified_gmt":"2026-07-22T07:54:15","slug":"aspect-ratio-13691","status":"publish","type":"post","link":"https:\/\/code-plus.jp\/gp\/aspect-ratio-13691\/","title":{"rendered":"\u753b\u50cf\u306e\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u3092\u81ea\u52d5\u8a08\u7b97\u30fb\u4ed8\u4e0e\u3059\u308b | aspect-ratio\u304c\u52b9\u304b\u306a\u3044\u539f\u56e0\u3068CLS\u5bfe\u7b56"},"content":{"rendered":"<!--\ntitle: \"\u753b\u50cf\u306e\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u3092\u81ea\u52d5\u8a08\u7b97\u30fb\u4ed8\u4e0e\u3059\u308b | aspect-ratio\u304c\u52b9\u304b\u306a\u3044\u539f\u56e0\u3068CLS\u5bfe\u7b56\"\ndescription: \"CSS aspect-ratio\u304c\u52b9\u304b\u306a\u3044\u539f\u56e0\u3092\u62bc\u3055\u3048\u3064\u3064\u3001\u6295\u7a3f\u4fdd\u5b58\u6642\u306b\u5b9f\u753b\u50cf\u304b\u3089\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\uff08\u7e26\u6a2a\u6bd4\uff09\u3092\u81ea\u52d5\u8a08\u7b97\u30fb\u81ea\u52d5\u4ed8\u4e0e\u3057\u3001SP\/PC\u306e\u51fa\u3057\u5206\u3051\u307e\u3067\u624b\u4f5c\u696d\u30bc\u30ed\u3067\u7dad\u6301\u3059\u308b\u4ed5\u7d44\u307f\u3001CLS\u5bfe\u7b56\u3068\u3057\u3066\u7121\u7406\u306a\u304f\u904b\u7528\u3059\u308b\u305f\u3081\u306e\u5b9f\u904b\u7528\u3067\u306e\u4f7f\u3044\u65b9\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002\"\ntags: \"aspect-ratio, aspect-ratio \u52b9\u304b\u306a\u3044, \u81ea\u52d5\u8a08\u7b97, \u81ea\u52d5\u4ed8\u4e0e, \u753b\u50cf\u81ea\u52d5\u5316, CLS, Core Web Vitals, \u753b\u50cf\u6700\u9069\u5316, \u9045\u5ef6\u8aad\u307f\u8fbc\u307f, lazy loading, picture\u8981\u7d20, \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6, WordPress, \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9, getimagesize\"\n-->\n\n<p><code>aspect-ratio<\/code> \u306f\u3001\u753b\u50cf\u306e\u9ad8\u3055\u3092\u5148\u306b\u4e88\u7d04\u3057\u3066\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30ac\u30bf\u3064\u304d\uff08CLS\uff09\u3092\u9632\u3050\u305f\u3081\u306e\u3001\u3044\u307e\u3084\u5b9a\u756a\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002\u4fbf\u5229\u306a\u4e00\u65b9\u3067\u3001\u300c\u306a\u305c\u304b\u52b9\u304b\u306a\u3044\u300d\u300c\u5024\u306e\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u304c\u9762\u5012\u3067\u7d50\u5c40\u4f7f\u308f\u306a\u304f\u306a\u308b\u300d\u3068\u3044\u30462\u3064\u306e\u58c1\u306b\u3076\u3064\u304b\u308a\u304c\u3061\u3067\u3059\u3002<\/p>\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u524d\u534a\u3067 <b class=\"fw-600\">\u52b9\u304b\u306a\u3044\u30b1\u30fc\u30b9\u306e\u6574\u7406\u3068\u3001\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u6642\u4ee3\u306eCLS\u5bfe\u7b56\u3068\u3057\u3066\u306e\u6b63\u3057\u3044\u4f7f\u3044\u65b9<\/b>\u3001\u5f8c\u534a\u3067\u672c\u984c\u3067\u3042\u308b <b class=\"fw-600\">\u7e26\u6a2a\u6bd4\u3092\u81ea\u52d5\u8a08\u7b97\u30fb\u81ea\u52d5\u4ed8\u4e0e\u3057\u3001\u753b\u50cf\u306e\u5165\u308c\u66ff\u3048\u304c\u591a\u3044\u73fe\u5834\u3067\u3082\u624b\u4f5c\u696d\u30bc\u30ed\u3067\u7dad\u6301\u3059\u308b\u5b9f\u904b\u7528\u306e\u4ed5\u7d44\u307f<\/b>\u3092\u307e\u3068\u3081\u307e\u3059\u3002\u300c\u52b9\u304b\u306a\u3044\u300d\u3092\u89e3\u6c7a\u3059\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u305d\u306e\u5148\u306e\u300c\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3057\u7d9a\u3051\u3089\u308c\u308b\u5f62\u300d\u307e\u3067\u3092\u6271\u3046\u306e\u304c\u3053\u306e\u8a18\u4e8b\u306e\u306d\u3089\u3044\u3067\u3059\u3002<\/p>\n\n<!-- \u2756\u76ee\u6b21\u30ea\u30b9\u30c8 -->\n<ul class=\"tocList mt-1.5r\" data-toc-id=\"js-tocBWGD\" style=\"height:28rem\"><\/ul>\n<ins class=\"tocBtn is-fixed\" data-toc-id=\"js-tocBWGD\"><\/ins>\n\n<hr class=\"separator mt-3r\">\n\n<h2 class=\"fz-xl\">aspect-ratio \u3068\u306f\u4f55\u304b<\/h2>\n<p><code>aspect-ratio<\/code> \u306f\u3001\u8981\u7d20\u30dc\u30c3\u30af\u30b9\u306e\u300c\u5e45\u3068\u9ad8\u3055\u306e\u6bd4\u7387\u300d\u3092\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<code>aspect-ratio: 16 \/ 9<\/code> \u306e\u3088\u3046\u306b\u66f8\u304f\u3068\u3001\u5e45\u304c\u6c7a\u307e\u308c\u3070\u9ad8\u3055\u304c\u305d\u306e\u6bd4\u7387\u3067\u81ea\u52d5\u7684\u306b\u6c7a\u307e\u308a\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-css\">.thumb {\n  width: 100%;\n  aspect-ratio: 16 \/ 9; \/* \u5e45\u306b\u5bfe\u3057\u3066\u9ad8\u3055\u304c\u81ea\u52d5\u3067\u6c7a\u307e\u308b *\/\n  height: auto;\n}<\/code><\/pre>\n<h3 class=\"fz-ml\">\u306a\u305c\u753b\u50cf\u306b\u300c\u9ad8\u3055\u306e\u4e88\u7d04\u300d\u304c\u5fc5\u8981\u306a\u306e\u304b<\/h3>\n<p>\u30d6\u30e9\u30a6\u30b6\u306f\u3001\u753b\u50cf\u3092\u5b9f\u969b\u306b\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u307e\u3067\u305d\u306e\u5bf8\u6cd5\u3092\u77e5\u308a\u307e\u305b\u3093\u3002\u5bf8\u6cd5\u304c\u4e0d\u660e\u306a\u753b\u50cf\u306f\u3001\u3044\u3063\u305f\u3093\u9ad8\u30550\uff08\u3082\u3057\u304f\u306f\u6975\u5c0f\uff09\u3067\u914d\u7f6e\u3055\u308c\u3001\u8aad\u307f\u8fbc\u307f\u5b8c\u4e86\u5f8c\u306b\u672c\u6765\u306e\u9ad8\u3055\u3078\u5e83\u304c\u308a\u307e\u3059\u3002\u3053\u306e\u3068\u304d\u4e0b\u306b\u3042\u308b\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u62bc\u3057\u4e0b\u3052\u3089\u308c\u3001\u3053\u308c\u304c <b class=\"fw-600\">CLS\uff08Cumulative Layout Shift\uff09<\/b> \u3068\u3057\u3066\u30b9\u30b3\u30a2\u306b\u52a0\u7b97\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u30da\u30fc\u30b8\u5185\u306b\u5bf8\u6cd5\u672a\u6307\u5b9a\u306e\u753b\u50cf\u304c5\u679a\u3042\u308c\u3070\u3001\u8aad\u307f\u8fbc\u307f\u306e\u305f\u3073\u306b\u6700\u59275\u56de\u306e\u72ec\u7acb\u3057\u305f\u30ba\u30ec\u304c\u8d77\u3053\u308a\u5f97\u307e\u3059\u3002\u3068\u304f\u306b <b class=\"fw-600\">\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\uff08lazy loading\uff09\u3068\u5bf8\u6cd5\u672a\u6307\u5b9a\u306e\u7d44\u307f\u5408\u308f\u305b\u306f\u3001\u5927\u304d\u304f\u30ba\u30ec\u307e\u3059<\/b>\u3002<\/p>\n<p>\u9006\u306b\u8a00\u3048\u3070\u3001\u5bf8\u6cd5\u3055\u3048\u5148\u306b\u4f1d\u3048\u3066\u304a\u3051\u3070\u3001\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u3067\u3082CLS\u306f\u767a\u751f\u3057\u307e\u305b\u3093\u3002<\/p>\n\n<hr class=\"separator mt-3r\">\n\n<h2 class=\"fz-xl\">aspect-ratio \u304c\u52b9\u304b\u306a\u3044\u4e3b\u306a\u30b1\u30fc\u30b9<\/h2>\n<p>\u300c\u6307\u5b9a\u3057\u305f\u306e\u306b\u52b9\u304b\u306a\u3044\u300d\u306e\u539f\u56e0\u306f\u3001\u307b\u3068\u3093\u3069\u304c\u6b21\u306e\u3044\u305a\u308c\u304b\u3067\u3059\u3002<\/p>\n<h3 class=\"fz-ml\">1. \u5e45\u3068\u9ad8\u3055\u3092\u4e21\u65b9\u3068\u3082\u56fa\u5b9a\u3057\u3066\u3044\u308b\uff08\u6700\u983b\u51fa\uff09<\/h3>\n<p><code>aspect-ratio<\/code> \u306f <b class=\"fw-600\">\u5e45\u304b\u9ad8\u3055\u306e\u5c11\u306a\u304f\u3068\u3082\u4e00\u65b9\u304c <code>auto<\/code><\/b> \u306e\u3068\u304d\u306b\u3060\u3051\u50cd\u304d\u307e\u3059\u3002\u4e21\u65b9\u306b\u5177\u4f53\u5024\u304c\u5165\u3063\u3066\u3044\u308b\u3068\u3001\u6307\u5b9a\u3057\u305f\u6bd4\u7387\u306f\u9ed9\u3063\u3066\u7121\u8996\u3055\u308c\u3001\u660e\u793a\u3057\u305f\u5024\u304c\u512a\u5148\u3055\u308c\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-css\">\/* NG: \u4e21\u65b9\u56fa\u5b9a \u2192 aspect-ratio \u306f\u7121\u8996\u3055\u308c\u308b *\/\n.box { width: 200px; height: 50px; aspect-ratio: 1; }\n\n\/* OK: \u7247\u65b9\u3092 auto \u306b *\/\n.box { width: 200px; height: auto; aspect-ratio: 1; }<\/code><\/pre>\n<p>\u5bfe\u7b56\u3068\u3057\u3066\u3001<code>aspect-ratio<\/code> \u3092\u4f7f\u3046\u8981\u7d20\u306b\u6a2a\u65ad\u7684\u306b <code>height: auto<\/code> \u3092\u5f53\u3066\u3066\u3057\u307e\u3046\u624b\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-css\">&lsqb;style*=\"aspect-ratio:\"&rsqb; { height: auto; }<\/code><\/pre>\n<h3 class=\"fz-ml\">2. \u30d5\u30ec\u30c3\u30af\u30b9\u30a2\u30a4\u30c6\u30e0\u304c\u5f15\u304d\u4f38\u3070\u3055\u308c\u3066\u3044\u308b<\/h3>\n<p>\u89aa\u306b <code>align-items: stretch<\/code>\uff08\u30d5\u30ec\u30c3\u30af\u30b9\u306e\u521d\u671f\u5024\uff09\u304c\u52b9\u3044\u3066\u3044\u3066\u3001\u30a2\u30a4\u30c6\u30e0\u306e\u9ad8\u3055\u304c\u4ea4\u5dee\u8ef8\u65b9\u5411\u3078\u5f15\u304d\u4f38\u3070\u3055\u308c\u308b\u5834\u5408\u3001\u305d\u306e\u9ad8\u3055\u304c\u512a\u5148\u3055\u308c\u3066 <code>aspect-ratio<\/code> \u304c\u52b9\u304d\u307e\u305b\u3093\u3002<code>height: fit-content<\/code> \u3084 <code>max-content<\/code> \u3092\u4f75\u7528\u3059\u308b\u304b\u3001<code>align-items<\/code> \u3092\u898b\u76f4\u3057\u307e\u3059\u3002<\/p>\n<h3 class=\"fz-ml\">3. img \u306e\u5185\u5728\u30b5\u30a4\u30ba\u304c\u512a\u5148\u3055\u308c\u3066\u3044\u308b<\/h3>\n<p><code>&lt;img&gt;<\/code> \u306f\u300c\u7f6e\u63db\u8981\u7d20\u300d\u3067\u3001\u8aad\u307f\u8fbc\u3093\u3060\u753b\u50cf\u305d\u306e\u3082\u306e\u306e\u5bf8\u6cd5\uff08\u5185\u5728\u30b5\u30a4\u30ba\uff09\u3092\u6301\u3061\u307e\u3059\u3002<b class=\"fw-600\">CSS\u306e width\/height \u304c\u4e21\u65b9 auto \u3067\u3001\u304b\u3064 HTML\u306e width\/height \u5c5e\u6027\u3082\u7121\u3044<\/b>\u3068\u3001\u753b\u50cf\u306f\u5143\u306e\u30b5\u30a4\u30ba\u3067\u8868\u793a\u3055\u308c\u3001<code>aspect-ratio<\/code> \u3060\u3051\u3092\u8db3\u3057\u3066\u3082\u6bd4\u7387\u306f\u5909\u308f\u308a\u307e\u305b\u3093\u3002\u5e45\u3092\u660e\u793a\u3059\u308b\uff08<code>width: 100%<\/code> \u306a\u3069\uff09\u304b\u3001width\/height \u5c5e\u6027\u3092\u4ed8\u3051\u308b\u3053\u3068\u3067\u89e3\u6d88\u3057\u307e\u3059\u3002<\/p>\n<h3 class=\"fz-ml\">4. \u305d\u306e\u4ed6<\/h3>\n<p>\u30b3\u30f3\u30c6\u30f3\u30c4\uff08\u9577\u3044\u30c6\u30ad\u30b9\u30c8\u7b49\uff09\u304c\u6bd4\u7387\u3092\u306f\u307f\u51fa\u3059\u5834\u5408\u306f\u305d\u3061\u3089\u306e\u30b5\u30a4\u30ba\u304c\u512a\u5148\u3055\u308c\u307e\u3059\u3002\u307e\u305f\u3001<code>aspect-ratio<\/code> \u306e\u30b9\u30da\u30eb\u30df\u30b9\uff08<code>aspect-racio<\/code> \u306a\u3069\uff09\u3068\u3044\u3046\u521d\u6b69\u7684\u306a\u539f\u56e0\u3082\u3001\u610f\u5916\u3068\u898b\u843d\u3068\u3055\u308c\u307e\u3059\u3002<\/p>\n\n<hr class=\"separator mt-3r\">\n\n<h2 class=\"fz-xl\">CLS\u5bfe\u7b56\u3068\u3057\u3066\u306e aspect-ratio<\/h2>\n<p>\u5bf8\u6cd5\u304c\u52d5\u7684\u3067\u5c5e\u6027\u3092\u51fa\u3057\u306b\u304f\u3044\u5834\u5408\u3084\u3001\u30b3\u30f3\u30c6\u30ca\u5074\u3067\u6bd4\u7387\u3092\u56fa\u5b9a\u3057\u305f\u3044\u5834\u5408\u306f <code>aspect-ratio<\/code> \u304c\u5411\u304d\u307e\u3059\u3002<code>object-fit<\/code> \u3068\u7d44\u307f\u5408\u308f\u305b\u308b\u3068\u3001\u4e88\u7d04\u3057\u305f\u30dc\u30c3\u30af\u30b9\u3078\u753b\u50cf\u3092\u304d\u308c\u3044\u306b\u53ce\u3081\u3089\u308c\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-css\">.media { aspect-ratio: 16 \/ 9; overflow: hidden; }\n.media &gt; img { width: 100%; height: 100%; object-fit: cover; display: block; }<\/code><\/pre>\n\n<hr class=\"separator mt-3r\">\n\n<h2 class=\"fz-xl\">picture \u3067 SP\/PC \u306e\u6bd4\u7387\u304c\u9055\u3046\u3068\u304d\u306e\u7f60<\/h2>\n<p><code>&lt;picture&gt;<\/code> \u306e\u4e2d\u3067\u5b9f\u969b\u306b\u63cf\u753b\u3055\u308c\u308b\u30dc\u30c3\u30af\u30b9\u306f <b class=\"fw-600\"><code>&lt;img&gt;<\/code> \u305f\u30601\u3064<\/b>\u3067\u3059\u3002<code>&lt;source&gt;<\/code> \u306f\u300c\u305d\u306e <code>&lt;img&gt;<\/code> \u304c\u3069\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u3080\u304b\u300d\u3092\u5dee\u3057\u66ff\u3048\u3066\u3044\u308b\u3060\u3051\u3067\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u8981\u7d20\u306f\u5e38\u306b <code>&lt;img&gt;<\/code> 1\u500b\u3002\u3057\u305f\u304c\u3063\u3066 <b class=\"fw-600\"><code>&lt;img&gt;<\/code> \u306b\u4ed8\u3051\u305f\u30a4\u30f3\u30e9\u30a4\u30f3\u306e <code>aspect-ratio<\/code> \u306f\u3001\u3069\u306e <code>&lt;source&gt;<\/code> \u304c\u9078\u3070\u308c\u3066\u3082\u540c\u30581\u3064\u306e\u5024<\/b>\u3068\u3057\u3066\u9069\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-html\">&lt;picture&gt;\n  &lt;source media=\"(max-width: 743.9px)\" srcset=\"cover_sp.jpg\" \/&gt;&lt;!-- 1080\u00d71258 --&gt;\n  &lt;img style=\"aspect-ratio:2880\/1300;\" src=\"cover.jpg\" alt=\"\" \/&gt;&lt;!-- 2880\u00d71300 --&gt;\n&lt;\/picture&gt;<\/code><\/pre>\n<p>\u3053\u306e\u4f8b\u3067 <code>aspect-ratio:2880\/1300<\/code> \u306f\u300cSP\u753b\u50cf\u306b\u52b9\u304f\u300d\u306e\u3067\u306f\u306a\u304f\u3001SP\u3067\u3082PC\u3067\u3082\u540c\u3058\u5024\u3068\u3057\u3066\u52b9\u304d\u307e\u3059\u3002\u7d50\u679c\u3001\u6bd4\u7387\u306e\u7570\u306a\u308bSP\u8868\u793a\u3067\u306f\u4e88\u7d04\u9ad8\u3055\u304c\u30ba\u30ec\u307e\u3059\u3002<\/p>\n<p>\u89e3\u6c7a\u7b56\u306f\u3001\u30d6\u30ec\u30fc\u30af\u30dd\u30a4\u30f3\u30c8\u3054\u3068\u306b\u5225\u3005\u306e\u6bd4\u7387\u3092\u4e0e\u3048\u308b\u3053\u3068\u3067\u3059\u3002<\/p>\n<p>\u8981\u7d20\u306e <code>style<\/code> \u3092\u30d6\u30ec\u30fc\u30af\u30dd\u30a4\u30f3\u30c8\u3067\u66f8\u304d\u63db\u3048\u308b\u4ed5\u7d44\u307f\uff08\u81ea\u4f5c\u306eJS\u3084\u30c7\u30fc\u30bf\u5c5e\u6027\uff09\u3067\u3001SP\/PC\u305d\u308c\u305e\u308c\u306e <code>aspect-ratio<\/code> \u3092\u5dee\u3057\u66ff\u3048\u308b\u65b9\u6cd5\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-javascript\">(function () {\n  \/\/setStyles-breakpoint.js (data-* attributes)\n  \n  const BREAKPOINT = 744;\n\n  \/\/\u8981\u7d20\u306e\u4e8b\u524d\u30ad\u30e3\u30c3\u30b7\u30e5\n  let cachedElements = null;\n  let lastWindowWidth = -1;\n\n  function setStyles() {\n    if (!cachedElements) {\n      cachedElements = &lsqb;...document.querySelectorAll(\"&lsqb;data-style_sp&rsqb;, &lsqb;data-style_pc&rsqb;\")&rsqb;;\n    }\n\n    const windowWidth = window.innerWidth;\n\n    if (lastWindowWidth !== -1) {\n      const lastBreakpoint = lastWindowWidth &lt; BREAKPOINT;\n      const currentBreakpoint = windowWidth &lt; BREAKPOINT;\n\n      if (lastBreakpoint === currentBreakpoint) {\n        return;\n      }\n    }\n\n    lastWindowWidth = windowWidth;\n\n    for (const element of cachedElements) {\n      const isMobile = windowWidth &lt; BREAKPOINT;\n\n      const styleValue = isMobile\n        ? element.dataset.style_sp\n        : element.dataset.style_pc;\n\n      if (!styleValue) continue;\n\n      const currentStyle = element.getAttribute('style') || '';\n      const cleanedStyle = currentStyle.replace(\/(^|&lsqb;;s&rsqb;)s*(?:width|height|aspect-ratio)s*:&lsqb;^;&rsqb;+;?\/g, '$1');\n      const newStyle = cleanedStyle.trim() + (cleanedStyle &amp;&amp; !cleanedStyle.endsWith(';') ? ';' : '') + styleValue;\n\n      element.setAttribute('style', newStyle.trim());\n    }\n  }\n\n  let rafId = null;\n  let rafTicking = false;\n\n  function throttledSetStyles() {\n    if (!rafTicking) {\n      rafTicking = true;\n      rafId = requestAnimationFrame(() =&gt; {\n        setStyles();\n        rafTicking = false;\n      });\n    }\n  }\n\n  const observer = new MutationObserver((mutations) =&gt; {\n    let shouldUpdate = false;\n\n    for (const mutation of mutations) {\n      if (mutation.type === 'childList' &amp;&amp; mutation.addedNodes.length &gt; 0) {\n        for (const node of mutation.addedNodes) {\n          if (node.nodeType === 1) {\n            if (node.dataset?.style_sp || node.dataset?.style_pc) {\n              shouldUpdate = true;\n              break;\n            }\n            if (node.querySelector?.('&lsqb;data-style_sp&rsqb;, &lsqb;data-style_pc&rsqb;')) {\n              shouldUpdate = true;\n              break;\n            }\n          }\n        }\n        if (shouldUpdate) break;\n      }\n    }\n\n    if (shouldUpdate) {\n      cachedElements = null;\n      throttledSetStyles();\n    }\n  });\n\n  function initEventListeners() {\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', setStyles, { once: true });\n    }\n\n    window.addEventListener('load', throttledSetStyles, { once: true, passive: true });\n    window.addEventListener('resize', throttledSetStyles, { passive: true });\n\n    observer.observe(document.body, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  if (document.readyState === 'complete' || document.readyState === 'interactive') {\n    setStyles();\n  }\n\n  initEventListeners();\n  \n  console.log('\ud83d\udfe2 setStyles-breakpoint.js: \u30b9\u30bf\u30a4\u30eb\u9069\u7528\u5b8c\u4e86!, \u5bfe\u8c61\u8981\u7d20\u6570 =', cachedElements.length);\n\n  window.setStylesBreakpoint = {\n    refresh: () =&gt; {\n      cachedElements = null;\n      lastWindowWidth = -1;\n      setStyles();\n    },\n    destroy: () =&gt; {\n      if (rafId) {\n        cancelAnimationFrame(rafId);\n      }\n      observer.disconnect();\n      window.removeEventListener('resize', throttledSetStyles);\n    }\n  };\n})();<\/code><\/pre>\n\n<hr class=\"separator mt-3r\">\n\n<h2 class=\"fz-xl\">\u5b9f\u904b\u7528\uff1a\u7e26\u6a2a\u6bd4\u3092\u81ea\u52d5\u8a08\u7b97\u30fb\u81ea\u52d5\u4ed8\u4e0e\u3057\u3066\u624b\u4f5c\u696d\u30bc\u30ed\u3067\u7dad\u6301\u3059\u308b<\/h2>\n<p>\u3053\u3053\u304b\u3089\u304c\u672c\u984c\u3067\u3059\u3002<code>aspect-ratio<\/code> \u306e\u7406\u5c48\u306f\u5206\u304b\u3063\u3066\u3082\u3001<b class=\"fw-600\">\u73fe\u5834\u3067\u306f\u30c7\u30b6\u30a4\u30ca\u30fc\u304c\u753b\u50cf\u3068\u30b5\u30a4\u30ba\u3092\u983b\u7e41\u306b\u5dee\u3057\u66ff\u3048\u308b<\/b>\u305f\u3081\u3001\u305d\u306e\u305f\u3073\u306b\u624b\u3067\u6bd4\u7387\u3092\u66f8\u304d\u63db\u3048\u308b\u306e\u306f\u6642\u9593\u30b3\u30b9\u30c8\u304c\u9ad8\u3059\u304e\u3066\u7d9a\u304d\u307e\u305b\u3093\u3002\u53e4\u3044\u6bd4\u7387\u304c\u6b8b\u3063\u305f\u307e\u307e\u65b0\u3057\u3044\u753b\u50cf\u304c\u5165\u308a\u3001<b class=\"fw-600\">\u898b\u5207\u308c\uff08\u30af\u30ea\u30c3\u30d4\u30f3\u30b0\uff09\u304c\u591a\u767a\u3059\u308b<\/b>\u2014\u2014\u3053\u308c\u304c\u300c\u7d50\u5c40\u4f7f\u308f\u306a\u3044\u300d\u306b\u76f4\u7d50\u3057\u307e\u3059\u3002<\/p>\n<p class=\"mt-1r\">\u305d\u3053\u3067\u3001\u6bd4\u7387\u306e\u4ed8\u4e0e\u3092\u4eba\u624b\u304b\u3089\u5916\u3057\u3001<b class=\"fw-600\">\u4fdd\u5b58\u6642\u306b\u5b9f\u753b\u50cf\u3092\u5b9f\u6e2c\u3057\u3066\u81ea\u52d5\u3067\u4ed8\u3051\u76f4\u3059\u904b\u7528<\/b>\u306b\u3057\u307e\u3059\u3002<\/p>\n<p>WordPress \u306a\u3089 <code>content_save_pre<\/code> \u30d5\u30a3\u30eb\u30bf\u3067\u3001\u4fdd\u5b58\u3055\u308c\u308b\u30b3\u30f3\u30c6\u30f3\u30c4\u4e2d\u306e <code>&lt;img&gt;<\/code> \u3092\u8d70\u67fb\u3057\u3001\u5bfe\u8c61\u753b\u50cf\u306e\u5b9f\u5bf8\u3092 <code>getimagesize()<\/code> \u3067\u6e2c\u3063\u3066 <code>aspect-ratio<\/code> \u3092\u7d44\u307f\u7acb\u3066\u3001\u65e2\u5b58\u306e\u5024\u3092\u4e0a\u66f8\u304d\u3057\u307e\u3059\u3002<\/p>\n\n<h3 class=\"fz-ml\">\u753b\u50cf\u3092\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3060\u3051\u3067 aspect-ratio \u3092\u81ea\u52d5\u8a08\u7b97<\/h3>\n\n<p class=\"mt-1r\">\u306a\u304a\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b\u76f4\u63a5\u66f8\u304f <code>&lt;img&gt;<\/code> \u3084\u3001\u5358\u767a\u3067HTML\u3092\u7528\u610f\u3057\u305f\u3044\u3068\u304d\u306f\u3001\u753b\u50cf\u3092\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3060\u3051\u3067 width\u30fbheight\u30fbaspect-ratio \u4ed8\u304d\u306e img\u30bf\u30b0\u3092\u4e00\u62ec\u751f\u6210\u3067\u304d\u308b\u30c4\u30fc\u30eb\u306a\u3069\u3092\u4f7f\u3046\u3068\u4fbf\u5229\u3067\u3059\u300240\u301c60\u679a\u7a0b\u5ea6\u306e\u753b\u50cf\u3067\u3082\u4e00\u62ec\u3067\u5373\u51e6\u7406\u3001\u305d\u306e\u307e\u307e\u8cbc\u308a\u4ed8\u3051\u3089\u308c\u308b\u306e\u3067\u3001\u4ee5\u4e0b\u3067\u89e3\u8aac\u3059\u308b\u300c\u4fdd\u5b58\u6642\u306e\u81ea\u52d5\u4ed8\u4e0e\u300d\u3092\u3001\u4fdd\u5b58\u30d5\u30ed\u30fc\u306e\u5916\u3067\u3082\u540c\u3058\u767a\u60f3\u3067\u518d\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n<a href=\"https:\/\/code-plus.jp\/gp\/tools\/imgtag-converter\/\" class=\"linkbox my-1.5r\">\n<h4 class=\"linkbox-title fz-md\">\u753b\u50cf\u2192img\u30bf\u30b0\u5909\u63db\u30c4\u30fc\u30eb | \u753b\u50cf\u30b5\u30a4\u30ba\u30fb\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u81ea\u52d5\u8a08\u7b97\u30b5\u30a4\u30c8<\/h4>\n<picture class=\"linkbox-thumbnail\">\n<img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/0ce8c60500c9fcbb1ad9a7c693bfbb4f.jpg?ver=20261027194230\" alt=\"\u753b\u50cf\u2192img\u30bf\u30b0\u5909\u63db\u30c4\u30fc\u30eb | \u753b\u50cf\u30b5\u30a4\u30ba\u30fb\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u81ea\u52d5\u8a08\u7b97\u30b5\u30a4\u30c8\" loading=\"lazy\" \/>\n<\/picture>\n<span class=\"linkbox-excerpt\">\u753b\u50cf\u3092\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3060\u3051\u3067img\u30bf\u30b0\u3092\u81ea\u52d5\u751f\u6210\u3002width\u30fbheight\u30fbaspect-ratio\u3092\u6b63\u78ba\u306b\u8a2d\u5b9a\u3057\u305fHTML\u30b3\u30fc\u30c9\u3092\u77ac\u6642\u306b\u4f5c\u6210\u3002Web\u5236\u4f5c\u30fb\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u4f5c\u696d\u3092\u52b9\u7387\u5316\u3059\u308b\u30aa\u30f3\u30e9\u30a4\u30f3\u5909\u63db\u30b5\u30a4\u30c8\u3002\n&emsp;<u class=\"linkbox-more\">\u7d9a\u304d\u3092\u8aad\u3080<\/u>\n<\/span>\n<\/a>\n\n<h4 class=\"fz-md\">picture \u306eSP\/PC\u51fa\u3057\u5206\u3051\u3082\u81ea\u52d5\u5316\u3059\u308b<\/h4>\n\n<p class=\"mt-0.5r\">\u524d\u8ff0\u306e <code>&lt;picture&gt;<\/code> \u554f\u984c\u3082\u3001<b class=\"fw-600\">\u4fdd\u5b58\u6642\u306b\u5b9f\u753b\u50cf\u3092\u5b9f\u6e2c\u3057\u3066\u81ea\u52d5\u3067\u4ed8\u3051\u76f4\u3059\u904b\u7528<\/b>\u3067\u51e6\u7406\u3067\u304d\u307e\u3059\u3002<code>&lt;img&gt;<\/code>\uff08PC\u57fa\u6e96\uff09\u3068\u3001<code>media<\/code> \u306b <code>max-width<\/code> \u3092\u542b\u3080 <code>&lt;source&gt;<\/code>\uff08SP\uff09\u306e<b class=\"fw-600\">\u4e21\u65b9\u3092\u5b9f\u6e2c<\/b>\u3057\u3001\u6bd4\u7387\u304c\u7570\u306a\u308b\u3068\u304d\u3060\u3051\u30d6\u30ec\u30fc\u30af\u30dd\u30a4\u30f3\u30c8\u5225\u306e\u30c7\u30fc\u30bf\u5c5e\u6027\uff08\u4f8b\uff1a<code>data-style_sp<\/code> \/ <code>data-style_pc<\/code>\uff09\u3092\u751f\u6210\u3057\u307e\u3059\u3002\u540c\u3058\u6bd4\u7387\u3001\u3042\u308b\u3044\u306fSP\u7528\u30bd\u30fc\u30b9\u304c\u7121\u3044\u5834\u5408\u306f\u5358\u4e00\u306e <code>aspect-ratio<\/code> \u3067\u6e08\u307e\u305b\u307e\u3059\u3002<\/p>\n<p class=\"mt-1r\">\u3053\u306e\u3068\u304d\u3001<code>media=\"(prefers-reduced-motion: reduce)\"<\/code> \u306e\u3088\u3046\u306a <b class=\"fw-600\">max-width\u4ee5\u5916\u306e\u30bd\u30fc\u30b9\u306fSP\u6271\u3044\u3057\u306a\u3044<\/b>\u3001\u3068\u3044\u3046\u5224\u5b9a\u3092\u5165\u308c\u3066\u304a\u304d\u307e\u3059\u3002\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u6291\u5236\u7528\u306e\u9759\u6b62\u753b\u5dee\u3057\u66ff\u3048\u306a\u3069\u3092SP\u3068\u8aa4\u8a8d\u3057\u306a\u3044\u305f\u3081\u3067\u3059\u3002<\/p>\n<p>\u305d\u3057\u3066\u3001\u751f\u6210\u3057\u305f <code>data-style_sp<\/code> \/ <code>data-style_pc<\/code> \u306f\u3001\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u5e45\u306b\u5fdc\u3058\u3066\u8981\u7d20\u306e <code>style<\/code> \u3092\u66f8\u304d\u63db\u3048\u308b\u5c0f\u3055\u306a\u30b9\u30af\u30ea\u30d7\u30c8\u3067\u9069\u7528\u3057\u307e\u3059\u3002\u3053\u3053\u3067 <b class=\"fw-600\">2\u70b9\u3060\u3051\u6ce8\u610f<\/b>\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n<p class=\"mt-1r\"><b class=\"fw-600\">(1) \u521d\u56de\u63cf\u753b\u306e\u4e88\u7d04<\/b>\uff1a\u30c7\u30fc\u30bf\u5c5e\u6027\u306fJS\u304c\u8d70\u308b\u307e\u3067 <code>style<\/code> \u306b\u53cd\u6620\u3055\u308c\u306a\u3044\u305f\u3081\u3001\u521d\u56de\u63cf\u753b\u306b\u308f\u305a\u304b\u306aCLS\u306e\u7a93\u304c\u3067\u304d\u307e\u3059\u3002<code>&lt;img&gt;<\/code> \u306e\u30a4\u30f3\u30e9\u30a4\u30f3 <code>style<\/code> \u306b\u3082PC\u5024\u30921\u3064\u5165\u308c\u3066\u304a\u3051\u3070\u3001JS\u5b9f\u884c\u524d\u3067\u3082\u9ad8\u3055\u304c\u4e88\u7d04\u3055\u308c\u307e\u3059\u3002<\/p>\n<p class=\"mt-1r\"><b class=\"fw-600\">(2) \u5024\u306e\u84c4\u7a4d\u3068\u8a9e\u5883\u754c<\/b>\uff1a\u30d6\u30ec\u30fc\u30af\u30dd\u30a4\u30f3\u30c8\u3092\u8de8\u3050\u305f\u3073\u306b <code>style<\/code> \u3092\u7d44\u307f\u76f4\u3059\u30b9\u30af\u30ea\u30d7\u30c8\u3067\u306f\u3001\u53e4\u3044 <code>width<\/code>\/<code>height<\/code>\/<code>aspect-ratio<\/code> \u3092\u9664\u53bb\u3057\u3066\u304b\u3089\u65b0\u3057\u3044\u5024\u3092\u8db3\u3057\u307e\u3059\u3002\u3053\u306e\u9664\u53bb\u7528\u306e\u6b63\u898f\u8868\u73fe\u306b\u8a9e\u5883\u754c\u304c\u7121\u3044\u3068\u3001<code>min-width<\/code> \u3084 <code>max-width<\/code>\u3001<code>line-height<\/code> \u306e\u4e00\u90e8\u307e\u3067\u5dfb\u304d\u8fbc\u3093\u3067\u58ca\u3059\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u76f4\u524d\u304c\u82f1\u5b57\u30fb\u30cf\u30a4\u30d5\u30f3\u3067\u306a\u3044\u3053\u3068\u3092\u6761\u4ef6\u306b\u3057\u3066\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u540d\u3060\u3051\u3092\u5bfe\u8c61\u306b\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ \u300c\u5148\u982d\u30fb\u30bb\u30df\u30b3\u30ed\u30f3\u30fb\u7a7a\u767d\u306e\u76f4\u5f8c\u300d\u306b\u9650\u5b9a\u3057\u3001min-width \u3084 line-height \u3092\u5dfb\u304d\u8fbc\u307e\u306a\u3044\nconst cleaned = style.replace(\n  \/(^|&lsqb;;s&rsqb;)s*(?:width|height|aspect-ratio)s*:&lsqb;^;&rsqb;+;?\/g,\n  '$1'\n);<\/code><\/pre>\n\n<h3 class=\"fz-ml\">\u6295\u7a3f\u4fdd\u5b58\u6642\u306b &lt;img&gt; \u3078\u5b9f\u753b\u50cf\u306e\u5bf8\u6cd5\u304b\u3089 aspect-ratio \u3092\u4ed8\u4e0e\/\u66f4\u65b0\u3059\u308b<\/h3>\n\n\n<pre><code class=\"language-php\">&lt;?php \/\/\uff08functions.php\uff09\n\/**\n * \u6295\u7a3f\u4fdd\u5b58\u6642\u306b &lt;img&gt; \u3078\u5b9f\u753b\u50cf\u306e\u5bf8\u6cd5\u304b\u3089 aspect-ratio \u3092\u4ed8\u4e0e\/\u66f4\u65b0\u3059\u308b\u3002\n *\n * \u5bfe\u5fdc\u3059\u308b2\u3064\u306e\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u65b9\u5f0f:\n *  (A) &lt;picture&gt; + &lt;source media=\"max-width\u2026\"&gt;  \u2026 data-src0=PC\u57fa\u6e96 \/ source=SP\n *  (B) responsejs \u306e data-src{N}                \u2026 data-src0=SP \/ \u5927\u304d\u3044N\u304cPC\n *      \uff08744\u3092\u5883\u306bSP\/PC\u3092\u5224\u5b9a\uff09\n *\n * - \u6bd4\u7387\u304c\u9055\u3048\u3070 data-style_sp \/ data-style_pc \u3092\u751f\u6210\u3001\u540c\u6bd4\u7387\u306a\u3089\u5358\u4e00 aspect-ratio\u3002\n * - \u65e2\u5b58\u306e aspect-ratio \u306f\u5fc5\u305a\u4e0a\u66f8\u304d\uff08stale \u5bfe\u7b56\uff09\u3002\u89e3\u6c7a\u4e0d\u80fd\uff08\u5916\u90e8URL\u7b49\uff09\u306f\u636e\u3048\u7f6e\u304d\u3002\n * - class \u306b iv-aspect-ignore \u3092\u6301\u3064 &lt;img&gt; \u306f\u300c\u624b\u52d5\u5024\u3092\u5b88\u308b\u300d\u30aa\u30d7\u30c8\u30a2\u30a6\u30c8\u3068\u3057\u3066\u4e00\u5207\u89e6\u3089\u306a\u3044\u3002\n *\/\n\nif (!defined('IV_ASPECT_BREAKPOINT')) define('IV_ASPECT_BREAKPOINT', 744); \/\/ SP\/PC \u5883\u754c\uff08_setStyles-breakpoint.js \u3068\u4e00\u81f4\uff09\n\nfunction iv_add_aspect_on_save($content) {\n  if (defined('DOING_AUTOSAVE') &amp;&amp; DOING_AUTOSAVE) return $content;\n  if (empty($content)) return $content;\n\n  $content = wp_unslash($content);\n\n  \/\/ 1) &lt;picture&gt; \u30d6\u30ed\u30c3\u30af\uff08source \u30d9\u30fc\u30b9\u306e SP\/PC\uff09\u3002\u51e6\u7406\u3057\u305f img \u306b\u306f\u4e00\u6642\u30de\u30fc\u30ab\u30fc\u3092\u4ed8\u4e0e\n  $content = preg_replace_callback('\/&lt;pictureb&lsqb;^&gt;&rsqb;*&gt;.*?&lt;\/picture&gt;\/is', function ($m) {\n    return iv_process_picture($m&lsqb;0&rsqb;);\n  }, $content);\n\n  \/\/ 2) \u6b8b\u308a\u306e\u5358\u72ec &lt;img&gt;\uff08picture \u5185\u306f\u30de\u30fc\u30ab\u30fc\u3067\u30b9\u30ad\u30c3\u30d7\uff09\n  $content = preg_replace_callback('\/&lt;imgb&lsqb;^&gt;&rsqb;*&gt;\/is', function ($m) {\n    if (preg_match('\/bdata-iv-dones*=\/i', $m&lsqb;0&rsqb;)) return $m&lsqb;0&rsqb;; \/\/ picture \u5185\u306f\u51e6\u7406\u6e08\u307f\n    return iv_apply_aspect_to_img($m&lsqb;0&rsqb;);\n  }, $content);\n\n  \/\/ \u4e00\u6642\u30de\u30fc\u30ab\u30fc\u3092\u9664\u53bb\n  $content = preg_replace('\/s*data-iv-dones*=s*(&lsqb;\"'&rsqb;).*?1\/is', '', $content);\n\n  return wp_slash($content);\n}\nadd_filter('content_save_pre', 'iv_add_aspect_on_save', 10, 1);\n\n\/**\n * \u30aa\u30d7\u30c8\u30a2\u30a6\u30c8\u5224\u5b9a\uff1aclass \u306b iv-aspect-ignore \u3092\u542b\u3080\u304b\n * \uff08\u5b9f\u6e2c\u4ed8\u4e0e\u3092\u6b62\u3081\u3001\u624b\u52d5\u306e aspect-ratio \/ data-style \u3092\u5b88\u308b\uff09\n *\/\nfunction iv_is_aspect_ignored($tag) {\n  return preg_match('\/bclasss*=s*(&lsqb;\"'&rsqb;)&lsqb;^\"'&rsqb;*biv-aspect-ignoreb&lsqb;^\"'&rsqb;*1\/is', $tag) === 1;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *  (A) &lt;picture&gt; \u65b9\u5f0f\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction iv_process_picture($picture) {\n  if (!preg_match('\/&lt;imgb&lsqb;^&gt;&rsqb;*&gt;\/is', $picture, $im)) return $picture;\n  $img = $im&lsqb;0&rsqb;;\n\n  \/\/ \u30aa\u30d7\u30c8\u30a2\u30a6\u30c8\uff1a\u3053\u306e\u30d6\u30ed\u30c3\u30af\u306f\u4e38\u3054\u3068\u81ea\u52d5\u4ed8\u4e0e\u306e\u5bfe\u8c61\u5916\uff08\u624b\u52d5\u5024\u3092\u7dad\u6301\uff09\n  if (iv_is_aspect_ignored($img)) return $picture;\n\n  \/\/ PC\uff08\u57fa\u6e96\uff09\uff1d data-src0\uff08\u7121\u3051\u308c\u3070 src\uff09\n  $pc_url  = iv_pick_image_url($img);\n  $pc_dims = $pc_url !== '' ? iv_get_image_dimensions($pc_url) : false;\n\n  \/\/ SP\uff1d media \u306b max-width \u3092\u542b\u3080\u6700\u521d\u306e &lt;source&gt; \u306e srcset \u5148\u982dURL\n  $sp_url = '';\n  if (preg_match_all('\/&lt;sourceb&lsqb;^&gt;&rsqb;*&gt;\/is', $picture, $srcs)) {\n    foreach ($srcs&lsqb;0&rsqb; as $s) {\n      if (preg_match('\/bmedias*=s*(&lsqb;\"'&rsqb;)(.*?)1\/is', $s, $mm)\n          &amp;&amp; stripos($mm&lsqb;2&rsqb;, 'max-width') !== false\n          &amp;&amp; preg_match('\/bsrcsets*=s*(&lsqb;\"'&rsqb;)(.*?)1\/is', $s, $ss)) {\n        $sp_url = iv_first_srcset_url($ss&lsqb;2&rsqb;);\n        break;\n      }\n    }\n  }\n  $sp_dims = $sp_url !== '' ? iv_get_image_dimensions($sp_url) : false;\n\n  $new_img = iv_write_aspect($img, $pc_dims, $sp_dims);\n  $new_img = iv_mark($new_img); \/\/ 2)\u3067\u518d\u51e6\u7406\u3055\u305b\u306a\u3044\u305f\u3081\u306e\u4e00\u6642\u30de\u30fc\u30ab\u30fc\n\n  return str_replace($img, $new_img, $picture);\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *  (B) \u5358\u72ec &lt;img&gt;\uff08responsejs data-src{N} \u65b9\u5f0f \/ \u5358\u4e00\u753b\u50cf\uff09\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction iv_apply_aspect_to_img($tag) {\n  \/\/ \u30aa\u30d7\u30c8\u30a2\u30a6\u30c8\uff1a\u624b\u52d5\u5024\u3092\u5b88\u308b\n  if (iv_is_aspect_ignored($tag)) return $tag;\n\n  $srcs = iv_collect_breakpoint_srcs($tag); \/\/ &lsqb;n =&gt; url&rsqb; \u6607\u9806\uff08data: \u3068\u7a7a\u306f\u9664\u5916\uff09\n\n  if (!empty($srcs)) {\n    $bp = IV_ASPECT_BREAKPOINT;\n    $sp_url = '';  \/\/ bp \u672a\u6e80\u306e\u6700\u5927N\uff08\uff1d\u5883\u754c\u76f4\u4e0b\u3067\u8868\u793a\u3055\u308c\u308b\u753b\u50cf\uff09\n    $pc_url = '';  \/\/ bp \u4ee5\u4e0a\u306e\u6700\u5c0fN\uff08\uff1d\u5883\u754c\u76f4\u4e0a\u3067\u8868\u793a\u3055\u308c\u308b\u753b\u50cf\uff09\n    foreach ($srcs as $n =&gt; $u) {\n      if ($n &lt; $bp)              $sp_url = $u;\n      elseif ($pc_url === '')    $pc_url = $u;\n    }\n\n    $sp_dims = $sp_url !== '' ? iv_get_image_dimensions($sp_url) : false;\n    $pc_dims = $pc_url !== '' ? iv_get_image_dimensions($pc_url) : false;\n\n    if ($sp_dims &amp;&amp; $pc_dims) {\n      return iv_write_aspect($tag, $pc_dims, $sp_dims); \/\/ \u6bd4\u7387\u5dee\u3067 SP\/PC \u51fa\u3057\u5206\u3051 or \u5358\u4e00\n    }\n    \/\/ \u7247\u5074\u3057\u304b\u7121\u3044\/\u6e2c\u308c\u306a\u3044 \u2192 \u6e2c\u308c\u305f\u65b9\u3067\u5358\u4e00\n    $one = $pc_dims ?: $sp_dims;\n    return iv_write_single($tag, $one);\n  }\n\n  \/\/ data-src{N} \u306a\u3057 \u2192 data-src0\uff08\u7121\u3051\u308c\u3070 src\uff09\u3067\u5358\u4e00\n  $url = iv_pick_image_url($tag);\n  if ($url === '') return $tag;\n  return iv_write_single($tag, iv_get_image_dimensions($url));\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *  \u5171\u901a\uff1a\u6bd4\u7387\u306e\u66f8\u304d\u8fbc\u307f\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n\/** PC\/SP \u4e21\u65b9\u306e\u5bf8\u6cd5\u304b\u3089\u3001\u6bd4\u7387\u5dee\u306a\u3089 data-style \u51fa\u3057\u5206\u3051\u3001\u540c\u6bd4\u7387\/\u7247\u5074\u306a\u3089\u5358\u4e00\u3092\u66f8\u304f *\/\nfunction iv_write_aspect($tag, $pc_dims, $sp_dims) {\n  if ($pc_dims &amp;&amp; $sp_dims &amp;&amp; iv_ratio_differs($pc_dims, $sp_dims)) {\n    $ar_pc = $pc_dims&lsqb;0&rsqb; . '\/' . $pc_dims&lsqb;1&rsqb;;\n    $ar_sp = $sp_dims&lsqb;0&rsqb; . '\/' . $sp_dims&lsqb;1&rsqb;;\n    \/\/ inline style \u306b\u3082 PC \u3092\u5165\u308c\u3066\u521d\u56de\u63cf\u753b\u306e\u9ad8\u3055\u3092\u4e88\u7d04\n    $tag = iv_set_prop_in_attr($tag, 'style',         'aspect-ratio', $ar_pc);\n    $tag = iv_set_prop_in_attr($tag, 'data-style_pc', 'aspect-ratio', $ar_pc);\n    $tag = iv_set_prop_in_attr($tag, 'data-style_sp', 'aspect-ratio', $ar_sp);\n    return $tag;\n  }\n  \/\/ \u540c\u6bd4\u7387 or \u7247\u5074\u306e\u307f \u2192 \u5358\u4e00\uff08\u57fa\u6e96\u306f PC \u3092\u512a\u5148\uff09\n  return iv_write_single($tag, $pc_dims ?: $sp_dims);\n}\n\n\/** \u5358\u4e00 aspect-ratio \u3092\u66f8\u304d\u3001\u53e4\u3044 data-style \u306e aspect-ratio \u306f\u6383\u9664\u3002\u6e2c\u308c\u306a\u3051\u308c\u3070\u636e\u3048\u7f6e\u304d *\/\nfunction iv_write_single($tag, $dims) {\n  if (!$dims || $dims&lsqb;0&rsqb; &lt; 1 || $dims&lsqb;1&rsqb; &lt; 1) return $tag;\n  $tag = iv_set_prop_in_attr($tag, 'style', 'aspect-ratio', $dims&lsqb;0&rsqb; . '\/' . $dims&lsqb;1&rsqb;);\n  $tag = iv_remove_prop_in_attr($tag, 'data-style_sp', 'aspect-ratio');\n  $tag = iv_remove_prop_in_attr($tag, 'data-style_pc', 'aspect-ratio');\n  return $tag;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n\/** \u6bd4\u7387\u304c\u7570\u306a\u308b\u304b\uff08\u5916\u7a4d\u3067\u6bd4\u8f03\u3001\u6d6e\u52d5\u5c0f\u6570\u3092\u56de\u907f\uff09 *\/\nfunction iv_ratio_differs($a, $b) {\n  return ($a&lsqb;0&rsqb; * $b&lsqb;1&rsqb;) !== ($a&lsqb;1&rsqb; * $b&lsqb;0&rsqb;);\n}\n\n\/** data-src{N} \u3092 &lsqb;n =&gt; url&rsqb; \u3067\u53ce\u96c6\uff08\u6607\u9806\u30fbdata:\/\u7a7a\u3092\u9664\u5916\uff09 *\/\nfunction iv_collect_breakpoint_srcs($tag) {\n  $out = array();\n  if (preg_match_all('\/bdata-src(d+)s*=s*(&lsqb;\"'&rsqb;)(.*?)2\/is', $tag, $mm, PREG_SET_ORDER)) {\n    foreach ($mm as $m) {\n      $u = trim($m&lsqb;3&rsqb;);\n      if ($u === '' || stripos($u, 'data:') === 0) continue;\n      $out&lsqb;(int) $m&lsqb;1&rsqb;&rsqb; = $u;\n    }\n  }\n  ksort($out);\n  return $out;\n}\n\n\/** \u5bf8\u6cd5\u306e\u5143\u306b\u3059\u308b URL\uff08data: \u9664\u5916\u3001data-src0 \u512a\u5148\uff09 *\/\nfunction iv_pick_image_url($tag) {\n  foreach (&lsqb;'data-src0', 'src'&rsqb; as $attr) {\n    $pat = '\/b' . preg_quote($attr, '\/') . 's*=s*(&lsqb;\"'&rsqb;)(.*?)1\/is';\n    if (preg_match($pat, $tag, $mm)) {\n      $u = trim($mm&lsqb;2&rsqb;);\n      if ($u === '' || stripos($u, 'data:') === 0) continue;\n      return $u;\n    }\n  }\n  return '';\n}\n\n\/** srcset \u306e\u5148\u982dURL\uff08\u8a18\u8ff0\u5b50 1x\/744w \u7b49\u3092\u9664\u53bb\uff09 *\/\nfunction iv_first_srcset_url($srcset) {\n  $first = trim(explode(',', $srcset)&lsqb;0&rsqb;);\n  if ($first === '') return '';\n  $parts = preg_split('\/s+\/', $first, 2);\n  return $parts&lsqb;0&rsqb;;\n}\n\n\/** URL \u2192 \u30ed\u30fc\u30ab\u30eb\u30d1\u30b9 \u2192 getimagesize()\u30021\u30ea\u30af\u30a8\u30b9\u30c8\u5185\u306f\u30e1\u30e2\u5316\u3002 *\/\nfunction iv_get_image_dimensions($url) {\n  static $memo = array();\n\n  $url = preg_replace('\/&lsqb;?#&rsqb;.*$\/', '', $url); \/\/ ?ver= \u7b49\u3092\u9664\u53bb\n  if ($url === '') return false;\n  if (array_key_exists($url, $memo)) return $memo&lsqb;$url&rsqb;;\n\n  $result = false;\n  $path   = iv_url_to_path($url);\n  if ($path !== '' &amp;&amp; is_file($path)) {\n    $info = @getimagesize($path);\n    if ($info &amp;&amp; !empty($info&lsqb;0&rsqb;) &amp;&amp; !empty($info&lsqb;1&rsqb;)) {\n      $result = array((int) $info&lsqb;0&rsqb;, (int) $info&lsqb;1&rsqb;);\n    }\n  }\n\n  $memo&lsqb;$url&rsqb; = $result;\n  return $result;\n}\n\n\/**\n * URL \u3092\u30b5\u30fc\u30d0\u30fc\u4e0a\u306e\u30d5\u30a1\u30a4\u30eb\u30d1\u30b9\u3078\u89e3\u6c7a\u3002\n * images\/... \u306e\u3088\u3046\u306a\u30c6\u30fc\u30de\u76f8\u5bfe\u30d1\u30b9\u306e\u7269\u7406\u4f4d\u7f6e\u306f\u74b0\u5883\u4f9d\u5b58\u3002\u4e0b\u306e\u30d5\u30a3\u30eb\u30bf\u3067\u89e3\u6c7a:\n *\n *   add_filter('iv_aspect_url_to_path', function ($path, $url) {\n *     if (strpos($url, 'images\/') === 0) {\n *       return get_theme_file_path('\/parts\/frnt4itN\/' . $url); \/\/ \u5b9f\u969b\u306e\u683c\u7d0d\u5148\u3078\n *     }\n *     return $path;\n *   }, 10, 2);\n *\/\nfunction iv_url_to_path($url) {\n  $override = apply_filters('iv_aspect_url_to_path', null, $url);\n  if ($override !== null) return $override;\n\n  $host = parse_url(home_url(), PHP_URL_HOST);\n\n  if (preg_match('#^https?:\/\/#i', $url) || strpos($url, '\/\/') === 0) {\n    $u_host = parse_url($url, PHP_URL_HOST);\n    if ($u_host &amp;&amp; $host &amp;&amp; strcasecmp($u_host, $host) !== 0) return '';\n    $p = parse_url($url, PHP_URL_PATH);\n    return $p ? ABSPATH . ltrim($p, '\/') : '';\n  }\n  if (strpos($url, '\/') === 0) {\n    return ABSPATH . ltrim($url, '\/');\n  }\n  $try = get_theme_file_path('\/' . ltrim($url, '\/'));\n  return is_file($try) ? $try : '';\n}\n\n\/** \u6307\u5b9a\u5c5e\u6027\u5024\u3078 1\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u30de\u30fc\u30b8\uff08\u65e2\u5b58\u306e\u540c\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u9664\u53bb\u3057\u3066\u4ed8\u3051\u76f4\u3059\uff0f\u7121\u3051\u308c\u3070\u65b0\u8a2d\uff09 *\/\nfunction iv_set_prop_in_attr($tag, $attr, $prop, $value) {\n  $decl = $prop . ':' . $value . ';';\n  $pat  = '\/b' . preg_quote($attr, '\/') . 's*=s*(&lsqb;\"'&rsqb;)(.*?)1\/is';\n\n  if (preg_match($pat, $tag, $mm)) {\n    $full = $mm&lsqb;0&rsqb;; $q = $mm&lsqb;1&rsqb;; $val = $mm&lsqb;2&rsqb;;\n    $val = preg_replace('\/s*' . preg_quote($prop, '\/') . 's*:&lsqb;^;&rsqb;*;?\/i', '', $val);\n    $val = trim($val);\n    if ($val !== '' &amp;&amp; substr($val, -1) !== ';') $val .= ';';\n    $val = ($val === '') ? $decl : $val . ' ' . $decl;\n    return str_replace($full, $attr . '=' . $q . $val . $q, $tag);\n  }\n  if (preg_match('\/bclasss*=s*(&lsqb;\"'&rsqb;).*?1\/is', $tag, $cm)) {\n    return str_replace($cm&lsqb;0&rsqb;, $cm&lsqb;0&rsqb; . ' ' . $attr . '=\"' . $decl . '\"', $tag);\n  }\n  return preg_replace('\/^&lt;imgb\/i', '&lt;img ' . $attr . '=\"' . $decl . '\"', $tag, 1);\n}\n\n\/** \u6307\u5b9a\u5c5e\u6027\u5024\u304b\u3089 1\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u9664\u53bb\uff08\u7a7a\u306b\u306a\u308c\u3070\u5c5e\u6027\u3054\u3068\u524a\u9664\uff09 *\/\nfunction iv_remove_prop_in_attr($tag, $attr, $prop) {\n  $pat = '\/b' . preg_quote($attr, '\/') . 's*=s*(&lsqb;\"'&rsqb;)(.*?)1\/is';\n  if (!preg_match($pat, $tag, $mm)) return $tag;\n\n  $full = $mm&lsqb;0&rsqb;; $q = $mm&lsqb;1&rsqb;; $val = $mm&lsqb;2&rsqb;;\n  $val = preg_replace('\/s*' . preg_quote($prop, '\/') . 's*:&lsqb;^;&rsqb;*;?\/i', '', $val);\n  $val = trim($val);\n\n  if ($val === '') {\n    return preg_replace('\/s*' . preg_quote($attr, '\/') . 's*=s*(&lsqb;\"'&rsqb;).*?1\/is', '', $tag, 1);\n  }\n  return str_replace($full, $attr . '=' . $q . $val . $q, $tag);\n}\n\n\/** \u4e00\u6642\u30de\u30fc\u30ab\u30fc\u4ed8\u4e0e\uff08picture \u5185 img \u3092 2) \u3067\u518d\u51e6\u7406\u3055\u305b\u306a\u3044\uff09 *\/\nfunction iv_mark($tag) {\n  if (preg_match('\/bdata-iv-dones*=\/i', $tag)) return $tag;\n  return preg_replace('\/^&lt;imgb\/i', '&lt;img', $tag, 1);\n}<\/code><\/pre>\n\n\n<p>\u3053\u308c\u3067\u3001\u300c\u753b\u50cf\u3092\u5dee\u3057\u66ff\u3048\u308b \u2192 \u518d\u4fdd\u5b58\u3059\u308b \u2192 \u5b9f\u6e2c\u304b\u3089\u6bd4\u7387\u304c\u4ed8\u304d\u76f4\u3059\u300d\u3068\u3044\u3046\u3001<b class=\"fw-600\">\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u4e0d\u8981\u306e\u30eb\u30fc\u30d7<\/b>\u304c\u56de\u308a\u59cb\u3081\u307e\u3059\u3002<\/p>\n<p>\u306a\u304a <code>getimagesize()<\/code> \u306fSVG\u306e\u5bf8\u6cd5\u3092\u8fd4\u3055\u306a\u3044\u3053\u3068\u304c\u591a\u3044\u305f\u3081\u3001SVG\u306f\u81ea\u52d5\u4ed8\u4e0e\u306e\u5bfe\u8c61\u5916\uff08\u636e\u3048\u7f6e\u304d\uff09\u306b\u306a\u308a\u307e\u3059\u3002SVG\u3060\u3051\u306f <code>viewBox<\/code> \u304b\u3089\u6bd4\u7387\u3092\u51fa\u3059\u306a\u3069\u3001\u5225\u9014\u5bfe\u5fdc\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n\n<hr class=\"separator mt-3r\">\n\n<h2 class=\"fz-xl\">\u307e\u3068\u3081<\/h2>\n<ul style=\"list-style-type:bullet;\" class=\"my-0.5r\">\n<li><code>aspect-ratio<\/code> \u306f <b class=\"fw-600\">\u5e45\u304b\u9ad8\u3055\u306e\u4e00\u65b9\u304c <code>auto<\/code><\/b> \u306e\u3068\u304d\u3060\u3051\u52b9\u304f\u3002\u4e21\u65b9\u56fa\u5b9a\u30fb<code>stretch<\/code>\u30fb\uff05\u30fbimg\u5c5e\u6027\u6b20\u5982\u304c\u4e3b\u306a\u300c\u52b9\u304b\u306a\u3044\u300d\u539f\u56e0\u3002<\/li>\n<li>\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u6642\u306eCLS\u5bfe\u7b56\u306f\u3001<b class=\"fw-600\">width\/height\u5c5e\u6027<\/b>\u304b <b class=\"fw-600\"><code>aspect-ratio<\/code> + <code>height:auto<\/code><\/b> \u3067\u9ad8\u3055\u3092\u4e88\u7d04\u3059\u308b\u306e\u304c\u57fa\u672c\u3002lazy\u3068\u5bf8\u6cd5\u672a\u6307\u5b9a\u306e\u4f75\u7528\u306f\u6700\u60aa\u624b\u3002<\/li>\n<li><code>&lt;picture&gt;<\/code> \u306e\u30a4\u30f3\u30e9\u30a4\u30f3 <code>aspect-ratio<\/code> \u306f <code>&lt;source&gt;<\/code> \u9078\u629e\u306b\u8ffd\u5f93\u3057\u306a\u3044\u3002SP\/PC\u3067\u6bd4\u7387\u304c\u9055\u3046\u306a\u3089<b class=\"fw-600\">\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea<\/b>\u304b<b class=\"fw-600\">\u30d6\u30ec\u30fc\u30af\u30dd\u30a4\u30f3\u30c8\u5225\u306e\u5207\u308a\u66ff\u3048<\/b>\u3067\u5bfe\u5fdc\u3059\u308b\uff08Firefox\u306e<code>&lt;source&gt;<\/code>\u6319\u52d5\u306b\u3082\u6ce8\u610f\uff09\u3002<\/li>\n<li>\u753b\u50cf\u5dee\u3057\u66ff\u3048\u304c\u591a\u3044\u73fe\u5834\u3067\u306f\u3001<b class=\"fw-600\">\u4fdd\u5b58\u6642\u306b\u5b9f\u6e2c\u3057\u3066\u81ea\u52d5\u4ed8\u4e0e<\/b>\u3057\u3001\u65e2\u5b58\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u66f4\u65b0\u30d5\u30ed\u30fc\u306b\u76f8\u4e57\u308a\u3055\u305b\u308b\u3068\u3001\u624b\u4f5c\u696d\u30bc\u30ed\u3067\u7e26\u6a2a\u6bd4\u3092\u7dad\u6301\u3067\u304d\u308b\u3002<\/li>\n<\/ul>\n<p>\u300c\u9762\u5012\u3060\u304b\u3089\u4f7f\u308f\u306a\u3044\u300d\u3067\u5f8c\u56de\u3057\u306b\u3057\u3066\u3044\u305f <code>aspect-ratio<\/code> \u3082\u3001\u4ed8\u4e0e\u3092\u81ea\u52d5\u5316\u3057\u3066\u3057\u307e\u3048\u3070\u3001CLS\u5bfe\u7b56\u3068\u3057\u3066\u7121\u7406\u306a\u304f\u5e38\u7528\u3067\u304d\u308b\u30ec\u30d9\u30eb\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n<hr class=\"separator mt-3r\">\n\n<h2 class=\"fz-xl\">\u95a2\u9023\u8a18\u4e8b<\/h2>\n\n<a href=\"https:\/\/code-plus.jp\/gp\/wp-image-query-11794\/\" class=\"linkbox my-1.5r\">\n<h4 class=\"linkbox-title fz-md\">\u3010WordPress\u3011\u753b\u50cfURL\u306b\u30af\u30a8\u30ea\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u4fdd\u5b58\u6642\u306b\u81ea\u52d5\u4ed8\u4e0e\uff5c\u30ad\u30e3\u30c3\u30b7\u30e5\u5bfe\u7b56<\/h4>\n<picture class=\"linkbox-thumbnail\">\n<img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/0a7b43ba-86c1-4335-94b9-9df41aa44452.png?ver=20261027194230\" alt=\"\u3010WordPress\u3011\u753b\u50cfURL\u306b\u30af\u30a8\u30ea\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u4fdd\u5b58\u6642\u306b\u81ea\u52d5\u4ed8\u4e0e\uff5c\u30ad\u30e3\u30c3\u30b7\u30e5\u5bfe\u7b56\" loading=\"lazy\" \/>\n<\/picture>\n<i class=\"linkbox-excerpt\">WordPress\u3067\u753b\u50cf\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u5bfe\u7b56\u3068\u3057\u3066`?ver=`\u30af\u30a8\u30ea\u3092\u81ea\u52d5\u4ed8\u4e0e\u3059\u308b\u65b9\u6cd5\u3092\u89e3\u8aac\u3002`the_content`\u30d5\u30a3\u30eb\u30bf\u30fc\u65b9\u5f0f\u306e\u9650\u754c\u3068\u3001`content_save_pre`\u3067DB\u3078\u76f4\u63a5\u66f8\u304d\u8fbc\u3080\u65b0\u65b9\u5f0f\u306e\u5b8c\u5168\u306a\u30b3\u30fc\u30c9\u3001Better Search ...<\/i>\n&emsp;<u class=\"linkbox-more\">\u7d9a\u304d\u3092\u8aad\u3080<\/u>\n<\/a>\n\n<a href=\"https:\/\/code-plus.jp\/gp\/cache-session-storage-8810\/\" class=\"linkbox my-1.5r\">\n<h4 class=\"linkbox-title fz-md\">\u30ad\u30e3\u30c3\u30b7\u30e5\u3068\u30b9\u30c8\u30ec\u30fc\u30b8\u3068\u30bb\u30c3\u30b7\u30e7\u30f3\u306e\u9055\u3044\u3001JavaScript\u3067 \u30af\u30ea\u30a2\u3059\u308b\u65b9\u6cd5<\/h4>\n<picture class=\"linkbox-thumbnail\">\n<img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/c505a5a78c8cb86501491d998df043f8.jpg?ver=20261027194230\" alt=\"\u30ad\u30e3\u30c3\u30b7\u30e5\u3068\u30b9\u30c8\u30ec\u30fc\u30b8\u3068\u30bb\u30c3\u30b7\u30e7\u30f3\u306e\u9055\u3044\u3001JavaScript\u3067 \u30af\u30ea\u30a2\u3059\u308b\u65b9\u6cd5\" loading=\"lazy\" \/>\n<\/picture>\n<i class=\"linkbox-excerpt\">\u30a6\u30a7\u30d6\u958b\u767a\u3092\u3057\u3066\u3044\u308b\u3068\u300c\u30ad\u30e3\u30c3\u30b7\u30e5\u300d\u300c\u30b9\u30c8\u30ec\u30fc\u30b8\u300d\u300c\u30bb\u30c3\u30b7\u30e7\u30f3\u300d\u3068\u3044\u3046\u4f3c\u305f\u3088\u3046\u306a\u8a00\u8449\u304c\u983b\u7e41\u306b\u767b\u5834\u3057\u307e\u3059\u3002\u3053\u308c\u3089\u306f\u3059\u3079\u3066\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\u3059\u308b\u4ed5\u7d44\u307f\u3067\u3059\u304c\u3001\u305d\u308c\u305e\u308c\u7570\u306a\u308b\u7279\u6027\u3068\u7528\u9014\u304c\u3042\u308a\u307e\u3059\u3002\u4eca\u56de\u306f\u3001\u3053\u308c\u3089\u306e\u9055\u3044\u3092\u6574\u7406\u3057\u3001JavaScript\u3067\u30af\u30ea\u30a2\u3059\u308b\u65b9...<\/i>\n&emsp;<u class=\"linkbox-more\">\u7d9a\u304d\u3092\u8aad\u3080<\/u>\n<\/a>","protected":false},"excerpt":{"rendered":"CSS aspect-ratio\u304c\u52b9\u304b\u306a\u3044\u539f\u56e0\u3092\u62bc\u3055\u3048\u3064\u3064\u3001\u6295\u7a3f\u4fdd\u5b58\u6642\u306b\u5b9f\u753b\u50cf\u304b\u3089\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\uff08\u7e26\u6a2a\u6bd4\uff09\u3092\u81ea\u52d5\u8a08\u7b97\u30fb\u81ea\u52d5\u4ed8\u4e0e\u3057\u3001SP\/PC\u306e\u51fa\u3057\u5206\u3051\u307e\u3067\u624b\u4f5c\u696d\u30bc\u30ed\u3067\u7dad\u6301\u3059\u308b\u4ed5\u7d44\u307f\u3001CLS\u5bfe\u7b56\u3068\u3057\u3066\u7121\u7406\u306a\u304f\u904b\u7528\u3059\u308b\u305f\u3081\u306e\u5b9f\u904b\u7528\u3067\u306e\u4f7f\u3044\u65b9\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002","protected":false},"author":1,"featured_media":15661,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7],"tags":[942,936,937,938,939,940,941,934,500,461,460,458,175,108,70],"group":[],"pg":[],"class_list":["post-13691","post","type-post","status-publish","format-standard","has-post-thumbnail","category-html-css","tag-942","tag-aspect-ratio-","tag-picture","tag-aspect-ratio","tag-939","tag-940","tag-941","tag-getimagesize","tag-cls","tag-core-web-vitals","tag-lazy-loading","tag-458","tag-175","tag-108","tag-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/13691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=13691"}],"version-history":[{"count":0,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/13691\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/15661"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=13691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=13691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=13691"},{"taxonomy":"group","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/group?post=13691"},{"taxonomy":"pg","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pg?post=13691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}