<body id="js-variable-box">
<div class="section">
<div class="contents-width">
<p class="title">Viewportの長さ</p>
<p id="js-variable-box_text" class="viewport-width"></p>
</div>
<div class="container">
<picture>
<source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
<source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
<img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
</picture>
</div>
<div class="container">
<picture>
<source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
<source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
<img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
</picture>
</div>
<div class="container">
<picture>
<source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
<source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
<img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
</picture>
</div>
<div class="container">
<picture>
<source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
<source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
<img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
</picture>
</div>
<div class="container">
<picture>
<source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
<source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
<img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
</picture>
</div>
<div class="container">
<picture>
<source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
<source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
<img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
</picture>
</div>
<div class="container">
<picture>
<source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
<source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
<img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
</picture>
</div>
<div class="container">
<picture>
<source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
<source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
<img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
</picture>
</div>
<div class="container">
<picture>
<source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
<source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
<img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
</picture>
</div>
<div class="container">
<picture>
<source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
<source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
<img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
</picture>
</div>
<div class="container">
<picture>
<source data-srcset="https://drive.google.com/uc?export=view&id=1TIThmne6lBQscZHY3K-K7SNjUj1rO_Fx" media="(min-width:800px)" />
<source data-srcset="https://drive.google.com/uc?export=view&id=17f9ftD5E6ve41aXdRjoSIPghShsN0WgC" media="(min-width:600px)" />
<img src="https://drive.google.com/uc?export=view&id=1tXCtO72WcQrcdc_6j_4eH4--oChAVU8p" data-src="https://drive.google.com/uc?export=view&id=1OjvFt0nwGgTz2goP8UBQSK6ZLvwDioms" alt="" class="lazyload" width="400" height="300" />
</picture>
</div>
</div>
</body>
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.section {
max-width: 1240px;
height: 200vh;
margin: 0 auto;
padding: 20px 20px;
}
img {
width: 100%;
height: auto;
vertical-align: top;
}
picture {
margin-bottom: 20px;
}
.container {
margin-bottom: 1rem;
}
.contents-width {
font-size: clamp(1em, 4vw, 3em);
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
}
//Viewportの長さを表示する処理
const eventFanc = () => {
const VariableBoxWidth = document.getElementById("js-variable-box");
const VariableBoxText = document.getElementById("js-variable-box_text");
VariableBoxText.textContent = `${VariableBoxWidth.clientWidth}px`;
};
window.addEventListener("DOMContentLoaded", eventFanc);
window.addEventListener("resize", eventFanc);
This Pen doesn't use any external CSS resources.