https://qwerty.work/categories/css/ Recent content in CSS on qwerty.work Hugo -- gohugo.io ja-JP Sun, 30 Oct 2022 21:29:22 +0900 https://qwerty.work/post/2022/10/css-glowing-button/ Sun, 30 Oct 2022 21:29:22 +0900 https://qwerty.work/post/2022/10/css-glowing-button/ <h2 id="サンプル">サンプル </h2><p>マウスが重なると光るようなアニメーションが表示されます。</p> <p>.btn { display: flex; justify-content: center; align-items: center; background-color: #bdfa3e; width: 28.4rem; height: 11rem; border-radius: 5.5rem; font-size: 3.8rem; font-weight: 900; box-shadow: 0 1rem 1rem rgba(0,0,0,.16); overflow: hidden; position: relative; text-decoration: none; } .btn::before { content: &lsquo;&rsquo;; display: block; width: 5rem; height: 300%; top: 50%; position: absolute; background-color: #fff; transform: translate(-500%,-50%) rotate(-45deg); transition: transform .5s ease; } .btn:hover::before { transform: translate(500%, -50%) rotate(-45deg); }</p> <p><a class="link" href="#" >ボタン</a>  </p> <h3 id="html">HTML </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;a</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;#&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn&#34;</span><span style="color:#f92672">&gt;</span>ボタン<span style="color:#f92672">&lt;/a&gt;</span> </span></span></code></pre></div><h3 id="css">CSS </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">btn</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">flex</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">justify-content</span>: <span style="color:#66d9ef">center</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">align-items</span>: <span style="color:#66d9ef">center</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-color</span>: <span style="color:#ae81ff">#bdfa3e</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">28.4</span><span style="color:#66d9ef">rem</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">11</span><span style="color:#66d9ef">rem</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">5.5</span><span style="color:#66d9ef">rem</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-size</span>: <span style="color:#ae81ff">3.8</span><span style="color:#66d9ef">rem</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-weight</span>: <span style="color:#ae81ff">900</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">box-shadow</span>: <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">1</span><span style="color:#66d9ef">rem</span> <span style="color:#ae81ff">1</span><span style="color:#66d9ef">rem</span> rgba(<span style="color:#ae81ff">0</span>,<span style="color:#ae81ff">0</span>,<span style="color:#ae81ff">0</span>,<span style="color:#ae81ff">.16</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">overflow</span>: <span style="color:#66d9ef">hidden</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">relative</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">text-decoration</span>: <span style="color:#66d9ef">none</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">btn</span>::<span style="color:#a6e22e">before</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">content</span>: <span style="color:#e6db74">&#39;&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">block</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">5</span><span style="color:#66d9ef">rem</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">300</span><span style="color:#66d9ef">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-color</span>: <span style="color:#ae81ff">#fff</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">transform</span>: translate(<span style="color:#ae81ff">-500</span><span style="color:#66d9ef">%</span>,<span style="color:#ae81ff">-50</span><span style="color:#66d9ef">%</span>) rotate(<span style="color:#ae81ff">-45</span><span style="color:#66d9ef">deg</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">transition</span>: <span style="color:#66d9ef">transform</span> <span style="color:#ae81ff">.5</span><span style="color:#66d9ef">s</span> <span style="color:#66d9ef">ease</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">btn</span>:<span style="color:#a6e22e">hover</span>::<span style="color:#a6e22e">before</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">transform</span>: translate(<span style="color:#ae81ff">500</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">-50</span><span style="color:#66d9ef">%</span>) rotate(<span style="color:#ae81ff">-45</span><span style="color:#66d9ef">deg</span>); </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h2 id="その他参考サイト">その他参考サイト </h2> <div class="link-card"> <a href="https://coco-factory.jp/ugokuweb/move01/7-1-40/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coco-factory.jp/ugokuweb/move01/7-1-40/" alt="https://coco-factory.jp/ugokuweb/move01/7-1-40/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coco-factory.jp/ugokuweb/move01/7-1-40/</span> <span class="link-card-url">https://coco-factory.jp/ugokuweb/move01/7-1-40/</span> </div> </a> </div> <div class="link-card"> <a href="https://photopizza.design/shiny_btn_animation/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://photopizza.design/shiny_btn_animation/" alt="https://photopizza.design/shiny_btn_animation/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://photopizza.design/shiny_btn_animation/</span> <span class="link-card-url">https://photopizza.design/shiny_btn_animation/</span> </div> </a> </div> <div class="link-card"> <a href="https://dezanari.com/css-shiny-button/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://dezanari.com/css-shiny-button/" alt="https://dezanari.com/css-shiny-button/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://dezanari.com/css-shiny-button/</span> <span class="link-card-url">https://dezanari.com/css-shiny-button/</span> </div> </a> </div> <div class="link-card"> <a href="https://give-shot.jp/tokyocss/button-shine/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://give-shot.jp/tokyocss/button-shine/" alt="https://give-shot.jp/tokyocss/button-shine/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://give-shot.jp/tokyocss/button-shine/</span> <span class="link-card-url">https://give-shot.jp/tokyocss/button-shine/</span> </div> </a> </div> <div class="link-card"> <a href="https://switch-box.net/shine-button.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://switch-box.net/shine-button.html" alt="https://switch-box.net/shine-button.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://switch-box.net/shine-button.html</span> <span class="link-card-url">https://switch-box.net/shine-button.html</span> </div> </a> </div> https://qwerty.work/post/2022/09/css-js-content-animation/ Wed, 28 Sep 2022 20:04:10 +0900 https://qwerty.work/post/2022/09/css-js-content-animation/ <p>スクロールしてコンテンツが表示領域に入ったら、コンテンツの内容が下からフワ～っとアニメーション効果付きで表示されるやる。</p> <h3 id="waypointsjs--animatecss">Waypoints.js &amp; Animate.css </h3><p><a class="link" href="http://imakewebthings.com/waypoints/" target="_blank" rel="noopener" >Waypoints.js</a>と<a class="link" href="https://daneden.github.io/animate.css/" target="_blank" rel="noopener" >Animate.css</a>を併用して実現します。<a class="link" href="http://imakewebthings.com/waypoints/" target="_blank" rel="noopener" >Waypoints.js</a>はjQueryが必要です。</p> <h3 id="waypointsjs">Waypoints.js </h3><p>指定したHTML要素が画面内へ入った際、あらかじめ指定した関数を呼び出してくれます。</p> <div class="link-card"> <a href="http://imakewebthings.com/waypoints/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://imakewebthings.com/waypoints/" alt="http://imakewebthings.com/waypoints/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://imakewebthings.com/waypoints/</span> <span class="link-card-url">http://imakewebthings.com/waypoints/</span> </div> </a> </div> <p>上記のページのダウンロードボタンからダウンロードZIPを展開し、「libフォルダ」内の<code>jquery.waypoints.js</code>または<code>jquery.waypoints.min.js</code>を読み込んで使用します。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.6.1.min.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;jquery.waypoints.min.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span></code></pre></div><h4 id="リファレンス">リファレンス </h4> <div class="link-card"> <a href="http://imakewebthings.com/waypoints/api/waypoint/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://imakewebthings.com/waypoints/api/waypoint/" alt="http://imakewebthings.com/waypoints/api/waypoint/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://imakewebthings.com/waypoints/api/waypoint/</span> <span class="link-card-url">http://imakewebthings.com/waypoints/api/waypoint/</span> </div> </a> </div> <h3 id="animatecss">Animate.css </h3><p>HTML要素にクラスを指定するだけでアニメーションを付けてくれるCSSライブラリ。</p> <div class="link-card"> <a href="https://animate.style/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://animate.style/" alt="https://animate.style/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://animate.style/</span> <span class="link-card-url">https://animate.style/</span> </div> </a> </div> <p>ダウンロードしたzipファイルを解凍後、<code>animate.css</code>または<code>animate.min.css</code>をHTMLの内で読み込みます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;animate.css&#34;</span>&gt; </span></span></code></pre></div><h4 id="ダウンロードページ">ダウンロードページ </h4> <div class="link-card"> <a href="https://github.com/animate-css/animate.css/releases/tag/3.5.1" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/animate-css/animate.css/releases/tag/3.5.1" alt="https://github.com/animate-css/animate.css/releases/tag/3.5.1" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/animate-css/animate.css/releases/tag/3.5.1</span> <span class="link-card-url">https://github.com/animate-css/animate.css/releases/tag/3.5.1</span> </div> </a> </div> <h3 id="サンプルソース">サンプルソース </h3><h4 id="html部分">HTML部分 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#75715e">&lt;!DOCTYPE html&gt;</span> </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">html</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;ja&#34;</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">head</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;utf-8&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">title</span>&gt;Animate Test&lt;/<span style="color:#f92672">title</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">style</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#f92672">body</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: repeating-linear-gradient(<span style="color:#ae81ff">0</span><span style="color:#66d9ef">deg</span>, </span></span><span style="display:flex;"><span> <span style="color:#ae81ff">#ffffff</span>, </span></span><span style="display:flex;"><span> <span style="color:#ae81ff">#ffffff</span> <span style="color:#ae81ff">40</span><span style="color:#66d9ef">px</span>, </span></span><span style="display:flex;"><span> <span style="color:#ae81ff">#ededed</span> <span style="color:#ae81ff">40</span><span style="color:#66d9ef">px</span>, </span></span><span style="display:flex;"><span> <span style="color:#ae81ff">#dedede</span> <span style="color:#ae81ff">80</span><span style="color:#66d9ef">px</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">boxes</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">80</span><span style="color:#66d9ef">vh</span> <span style="color:#66d9ef">auto</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">box</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border</span>: <span style="color:#ae81ff">3</span><span style="color:#66d9ef">px</span> <span style="color:#66d9ef">solid</span> <span style="color:#ae81ff">#666</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">em</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">4</span><span style="color:#66d9ef">em</span> <span style="color:#66d9ef">auto</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">text-align</span>: <span style="color:#66d9ef">center</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">animated</span> { </span></span><span style="display:flex;"><span> <span style="color:#75715e">/*最初は非表示*/</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">opacity</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">style</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">head</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">body</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;boxes&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 01&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 02&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 03&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 04&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 05&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 06&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 07&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 08&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 09&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;box animated&#34;</span>&gt;box 10&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://code.jquery.com/jquery-3.6.1.min.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;main.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">body</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">html</span>&gt; </span></span></code></pre></div><h4 id="javascript部分">Javascript部分 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// animatedクラスの付いた要素にwaypointを登録 </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.animated&#39;</span>).<span style="color:#a6e22e">waypoint</span>({ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">handler</span>(<span style="color:#a6e22e">direction</span>) { </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 要素が画面中央に来るとここが実行される </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">direction</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;down&#39;</span>) { </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">/* </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> * 下方向のスクロール </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> * イベント発生元の要素にfadeInUpクラスを付けてアニメーションを開始 </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> */</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">element</span>).<span style="color:#a6e22e">addClass</span>(<span style="color:#e6db74">&#39;fadeInUp&#39;</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">/* </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> * waypointを削除することで、この要素に対しては </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> * これ以降handlerが呼ばれなくなる </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> */</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">destroy</span>(); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 要素が画面中央に来たらhandlerを実行 </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">offset</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;50%&#39;</span>, </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div> https://qwerty.work/post/2022/09/css-flexbox-column-gap/ Thu, 22 Sep 2022 10:42:17 +0900 https://qwerty.work/post/2022/09/css-flexbox-column-gap/ <h2 id="margin-rightでもいいけど">margin-rightでもいいけど </h2><p>グローバルメニューなど、横並びのメニューを<code>display: flex;</code>で作ることがあります。その時、メニュー同士の間に余白を設けるために以下のように、<code>margin-left;</code>や<code>margin-right;</code>を使っていました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>#global_navi <span style="color:#f92672">ul</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">list-style</span>: <span style="color:#66d9ef">none</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">flex</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>#global_navi <span style="color:#f92672">li</span>:<span style="color:#a6e22e">not</span><span style="color:#f92672">(</span>:<span style="color:#a6e22e">first-child</span><span style="color:#f92672">)</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin-left</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">または</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>#global_navi <span style="color:#f92672">li</span>:<span style="color:#a6e22e">not</span><span style="color:#f92672">(</span>:<span style="color:#a6e22e">last-child</span><span style="color:#f92672">)</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin-right</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p>これでもできるので問題ないのですが、もっとスマートなやり方がありました。</p> <h2 id="column-gapを使う">column-gapを使う </h2><p>今まで知らなかったののですが、以下のように、<code>column-gap</code>を使うと簡単にメニュー間の隙間を簡単に設定できます。<code>margin-left</code>やmargin-rightと違って、要素の間だけに余白が付くので、最初や最後の<code>li</code>に余白が付いてしまうことを気にしなくて済みます。<code>display: flex;</code>と<code>display: grid;</code>で使えうるみたいです。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>#global_navi <span style="color:#f92672">ul</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">list-style</span>: <span style="color:#66d9ef">none</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">flex</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">column-gap</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h3 id="ブラウザの対応状況">ブラウザの対応状況 </h3> <div class="link-card"> <a href="https://caniuse.com/?search=column-gap" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://caniuse.com/?search=column-gap" alt="https://caniuse.com/?search=column-gap" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://caniuse.com/?search=column-gap</span> <span class="link-card-url">https://caniuse.com/?search=column-gap</span> </div> </a> </div> <h2 id="縦横や縦並びの場合">縦横や縦並びの場合 </h2><h3 id="縦横に並ぶ要素の隙間にはgap">縦横に並ぶ要素の隙間にはgap </h3><p>グリッドレイアウトで縦と横に要素が並ぶ場合は、<code>gap</code>プロパティで縦と横に均等な隙間を設けることができます。</p> <h3 id="縦並びの要素の隙間にはrow-gap">縦並びの要素の隙間にはrow-gap </h3><p><code>column-gap</code>は横並びですが、縦並びは<code>row-gap</code>で指定できます。</p> <h4 id="参考ページ">参考ページ </h4><p><code>gap</code>、<code>column-gap</code>、<code>row-gap</code>については以下のページが参考になりました。</p> <div class="link-card"> <a href="https://ics.media/entry/210628/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://ics.media/entry/210628/" alt="https://ics.media/entry/210628/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://ics.media/entry/210628/</span> <span class="link-card-url">https://ics.media/entry/210628/</span> </div> </a> </div> <p>その他、column関連プロパティのリファレンス</p> <div class="link-card"> <a href="https://www-creators.com/css-prop/column-gap" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www-creators.com/css-prop/column-gap" alt="https://www-creators.com/css-prop/column-gap" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www-creators.com/css-prop/column-gap</span> <span class="link-card-url">https://www-creators.com/css-prop/column-gap</span> </div> </a> </div> <h2 id="column-countについて">column-countについて </h2><p>その他、グリッドレイアウトで横並び1列だけではなく、横2列ずつ縦に多段で並べたいときは<code>column-count</code>で<code>2</code>を指定すれば、<strong>6個</strong>ある要素が<strong>2x3</strong>で並んでくれます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>#global_navi <span style="color:#f92672">ul</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">list-style</span>: <span style="color:#66d9ef">none</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">grid</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">gap</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">column-count</span>: <span style="color:#ae81ff">2</span>; </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p><code>column-gap</code>の使い方をきっかけに勉強になりました。</p> https://qwerty.work/post/2022/09/css-img-bottom-margin/ Thu, 22 Sep 2022 08:59:45 +0900 https://qwerty.work/post/2022/09/css-img-bottom-margin/ <h2 id="vertical-align-bottomで消す">vertical-align: bottom;で消す </h2><p>画像の下にマージンができてしまうことがあります。img要素に対して、<code>vertical-align</code>の値を<code>bottom</code>にすると、下の余白がなくなります。<code>vertical-align</code>は要素の縦方向の配置位置に関するプロパティで、値に<code>bottom</code>（下部）を寄せることで下の余白をなくしています。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#f92672">img</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">vertical-align</span>: <span style="color:#66d9ef">bottom</span>; </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> https://qwerty.work/post/2022/08/css-text-indent-100-white-space-nowrap-overflow-hidden/ Tue, 23 Aug 2022 14:57:27 +0900 https://qwerty.work/post/2022/08/css-text-indent-100-white-space-nowrap-overflow-hidden/ <h2 id="text-indent-9999pxの代替手法">text-indent:-9999px;の代替手法 </h2><p>サイトのロゴのH1やトップに戻るボタンなど、テキストを表示させずに画像のみを表示させたときがあります。でも、SEO対策のチェックを受けたりすると、**「aタグに有効なテキストがありません」**みたいに指摘されることがあります。</p> <p>ちょっと古いやり方だと、<code>text-indent:-9999px;</code>を使って視覚エリアの外に文字を配置して、事実上みえなくする手法が取られていましたが、最近は以下の方法が流行っているみたいです。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#f92672">text-indent</span><span style="color:#f92672">:</span> <span style="color:#f92672">100</span><span style="color:#f92672">%;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">white-space</span><span style="color:#f92672">:</span> <span style="color:#f92672">nowrap</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">overflow</span><span style="color:#f92672">:</span> <span style="color:#f92672">hidden</span><span style="color:#f92672">;</span> </span></span></code></pre></div><p>説明としたら、文字列を折り返さず、コンテンツの幅100%までずらし、はみ出ている部分は非表示にするといった感じです。ややこしいやり方ですが、でもこれでペナルティは回避できるので気にって使っています。</p> https://qwerty.work/post/2022/08/jquery-link-pause/ Sat, 06 Aug 2022 23:19:46 +0900 https://qwerty.work/post/2022/08/jquery-link-pause/ <h2 id="メガメニューを閉じるときのタップで裏側のリンクが開いてしまう">メガメニューを閉じるときのタップで裏側のリンクが開いてしまう </h2><p>アコーディオンやメガメニューに設定したリンクや閉じるボタンが、コンテンツのリンクと重なっていて、スマホやタブレットでメニューを閉じるときにiPhoneやiPadのSafari上でタップすると、メニューを閉じた後に下のリンクが開いてしまいました。これをどうにか解消するために、良い方法がないかな？と探してみました。</p> <p><code>setTimeout</code>を使って一定時間、マウスポインターを無効にすることで解決できる方法があったのでメモ。</p> <div class="link-card"> <a href="https://dezanari.com/jquery-disable-click-certain-time/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://dezanari.com/jquery-disable-click-certain-time/" alt="https://dezanari.com/jquery-disable-click-certain-time/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://dezanari.com/jquery-disable-click-certain-time/</span> <span class="link-card-url">https://dezanari.com/jquery-disable-click-certain-time/</span> </div> </a> </div> <h3 id="解決できたソース例">解決できたソース例 </h3><p>上記にあったサンプルでは、スライダーでの利用を想定していますが、私の場合、メガメニューの裏側にあるスライダー（slick-silder）のリンクがボタン裏にあり、それが開いてしまうことを想定しています。「閉じる」ボタンが押されたら、CSSの<code>pointer-events:none;</code>を対象の要素に追加して、スライダーのリンク（aタグ）をクリックできないよう、マウスポインターを2秒間無効にして元に戻すという内容です。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;.button&#39;</span>).<span style="color:#a6e22e">click</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#39;slick-slide a&#39;</span>).<span style="color:#a6e22e">css</span>(<span style="color:#e6db74">&#39;pointer-events&#39;</span>, <span style="color:#e6db74">&#39;none&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">setTimeout</span>(<span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> (<span style="color:#e6db74">&#39;slick-slide a&#39;</span>).<span style="color:#a6e22e">css</span>(<span style="color:#e6db74">&#39;pointer-events&#39;</span>, <span style="color:#e6db74">&#39;&#39;</span>); </span></span><span style="display:flex;"><span> }, <span style="color:#ae81ff">2000</span>); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span>}); </span></span></code></pre></div><p>これでうまくいきました。待機時間は0.25～0.5秒（250～500」）くらいでも大丈夫でした。</p> https://qwerty.work/post/2022/08/css-border--adius-9999px/ Fri, 05 Aug 2022 09:45:17 +0900 https://qwerty.work/post/2022/08/css-border--adius-9999px/ <h2 id="両サイドだけ丸いボタンを作りたい">両サイドだけ丸いボタンを作りたい </h2><p>スタイルシートで横長のボンタンを作成するとき、簡単に両サイドだけが丸くしたいときに関電できる方法を見つけたのでメモ</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">button</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">9999</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p><code>width</code>で幅を指定して、<code>border-radius: 9999px;</code>を加えるだけで、とても簡単です。 以下の方法でも可能です。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">button</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">200</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">200</span><span style="color:#66d9ef">px</span>; </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p>他にも、以下のページでは<code>border-radius: 100vh;</code>といったやり方もあるようです。</p> <p>コツとしては幅よりも<code>border-radius</code>大きい値を指定すればいいみたいですね。</p> https://qwerty.work/post/2022/07/ie11-bugs-hack/ Thu, 28 Jul 2022 17:59:02 +0900 https://qwerty.work/post/2022/07/ie11-bugs-hack/ <h2 id="特定のブラウザのみ対応する方法">特定のブラウザのみ対応する方法 </h2><p>IE11、Chrome、Firefox、Safariのそれぞれ単独でスタイルを適用させたいときに使えます。</p> <div class="link-card"> <a href="https://www.softel.co.jp/blogs/tech/archives/6095" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.softel.co.jp/blogs/tech/archives/6095" alt="https://www.softel.co.jp/blogs/tech/archives/6095" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.softel.co.jp/blogs/tech/archives/6095</span> <span class="link-card-url">https://www.softel.co.jp/blogs/tech/archives/6095</span> </div> </a> </div> <h2 id="ie11のバグ対応">IE11のバグ対応 </h2> <div class="link-card"> <a href="https://kiomiru.co.jp/blog/coding/ie11-bugs/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://kiomiru.co.jp/blog/coding/ie11-bugs/" alt="https://kiomiru.co.jp/blog/coding/ie11-bugs/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://kiomiru.co.jp/blog/coding/ie11-bugs/</span> <span class="link-card-url">https://kiomiru.co.jp/blog/coding/ie11-bugs/</span> </div> </a> </div> https://qwerty.work/post/2022/07/css-position-absolute-center/ Tue, 05 Jul 2022 09:00:08 +0900 https://qwerty.work/post/2022/07/css-position-absolute-center/ <p>とりあえずメモ。対象の要素を<code>position:absolute;</code>で左右中央や、上下中央、または上下左右中央に配置する最近のやり方。</p> <h2 id="positionabsoluteとtransformを使用">position:absolute;とtransformを使用 </h2><h3 id="参考ページ">参考ページ </h3> <div class="link-card"> <a href="https://cotodama.co/position-absolute-center/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://cotodama.co/position-absolute-center/" alt="https://cotodama.co/position-absolute-center/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://cotodama.co/position-absolute-center/</span> <span class="link-card-url">https://cotodama.co/position-absolute-center/</span> </div> </a> </div> <div class="link-card"> <a href="https://arts-factory.net/position/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://arts-factory.net/position/" alt="https://arts-factory.net/position/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://arts-factory.net/position/</span> <span class="link-card-url">https://arts-factory.net/position/</span> </div> </a> </div> <h2 id="positionabsolute以外で中央配置する方法">position:absolute;以外で中央配置する方法 </h2><h3 id="参考ページ-1">参考ページ </h3> <div class="link-card"> <a href="https://www.esz.co.jp/blog/2847.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.esz.co.jp/blog/2847.html" alt="https://www.esz.co.jp/blog/2847.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.esz.co.jp/blog/2847.html</span> <span class="link-card-url">https://www.esz.co.jp/blog/2847.html</span> </div> </a> </div> https://qwerty.work/post/2022/04/svg-aspect-ratio/ Mon, 25 Apr 2022 12:44:23 +0900 https://qwerty.work/post/2022/04/svg-aspect-ratio/ <h2 id="preserveaspectrationoneの追加でok">preserveAspectRatio=&ldquo;none&quot;の追加でOK </h2><p>SVGをレスポンシブで表示させる時にどうしても縦横比（アスペクト比）が固定されてしまい困り果てましたが、解決する方法が分かったのでメモ。</p> <h3 id="ソース例">ソース例 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;svg</span> <span style="color:#a6e22e">preserveAspectRatio=</span><span style="color:#e6db74">&#34;none&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/svg&gt;</span> </span></span></code></pre></div><p>たったこれだけでOKでした。あとはなどでSVGを囲んでCSSで調整するのみで解決できました。</p> <h2 id="参考ページ">参考ページ </h2> <div class="link-card"> <a href="https://aya404.com/blog/develop/337_svg-aspect/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://aya404.com/blog/develop/337_svg-aspect/" alt="https://aya404.com/blog/develop/337_svg-aspect/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://aya404.com/blog/develop/337_svg-aspect/</span> <span class="link-card-url">https://aya404.com/blog/develop/337_svg-aspect/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.design-memo.com/coding/object-fit-property" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.design-memo.com/coding/object-fit-property" alt="https://www.design-memo.com/coding/object-fit-property" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.design-memo.com/coding/object-fit-property</span> <span class="link-card-url">https://www.design-memo.com/coding/object-fit-property</span> </div> </a> </div> https://qwerty.work/post/2022/04/css-cleanup/ Mon, 11 Apr 2022 14:23:31 +0900 https://qwerty.work/post/2022/04/css-cleanup/ <h2 id="余計なスタイルシートのルールは削除したい">余計なスタイルシートのルールは削除したい </h2><p>WEBサイトを複製して制作した際に、過去の不要なCSSが残骸として残ってしまいますが、どれを残して、どれを削除すればよいか分からなくなり、そのまま残してしまうことがあります。使用しないルールをそのまま溜め込むと、ファイル容量が大きくなるので、どうにか簡単にお掃除できないかな？と探してみると、方法が見つかったのでメモ。</p> <h2 id="ブラウザのデベロッパーツールを使う方法">ブラウザのデベロッパーツールを使う方法 </h2><p>詳しい方法は以下のサイトが参考になります。</p> <div class="link-card"> <a href="https://thesaibase.com/unused-css/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://thesaibase.com/unused-css/" alt="https://thesaibase.com/unused-css/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://thesaibase.com/unused-css/</span> <span class="link-card-url">https://thesaibase.com/unused-css/</span> </div> </a> </div> <h3 id="chromeの場合">Chromeの場合 </h3><p>ChromeのデベロッパーツールF12を開き、[**]-[more tool]-[Coverrage]から使用されていないルールを確認できます。</p> <h3 id="edgeの場合">Edgeの場合 </h3><p>Edgeでも同様に開発者ツールF12を開き、[**]-[そのツール]-[カバレッジ]から確認することができます。</p> <p>ここで不要なルールがわかったとしても、手動で削除いしていくしかなさそうです。必要なルールだけを書き出す方法は見当たりませんでした。（やり方があるのかもしれませんが、わかりませんでした。）</p> <h2 id="その他のツールは">その他のツールは？ </h2><p>もっと簡単にDreamweaverの「HTMLのクリーンアップ」みたいに、Dreamweaver上でできないかな？と探してみましたが、見当たりませんでした。</p> https://qwerty.work/post/2022/02/css-vertical-align-center/ Thu, 17 Feb 2022 08:58:23 +0900 https://qwerty.work/post/2022/02/css-vertical-align-center/ <h2 id="縦中央に配置したいけどできない">縦中央に配置したいけどできない </h2><p><code>の中のに入れた</code>とか``を上下左右中央に配置したくて、横中央の配置は<code>text-align:center;</code>や<code>margin-left:auto;</code>＆<code>margin-right:auto;</code>でできたのですが、縦中央の配置が<code>vertical-align:center;</code>でできませんでした。そこで解決方法が見つかったのメモ。</p> <h3 id="参考になったページ">参考になったページ </h3><p>以下のサイトを参考に解決できました。</p> <div class="link-card"> <a href="https://haniwaman.com/vertical-align/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://haniwaman.com/vertical-align/" alt="https://haniwaman.com/vertical-align/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://haniwaman.com/vertical-align/</span> <span class="link-card-url">https://haniwaman.com/vertical-align/</span> </div> </a> </div> <h2 id="displayflexで解決">display:flex;で解決 </h2><p>結局、<code>vertical-align:center;</code>は使わず、上記の参考ページもあった<code>display:flex;</code>で解決できました。</p> <h3 id="参考ソース">参考ソース </h3><p><code>display:flex;</code>と<code>align-items: center;</code>と<code>justify-content: center;</code>をセットで使います。これを上下左右中央に配置したい物を囲っているタグに割り当てればOKでした。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">box</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">flex</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">align-items</span>: <span style="color:#66d9ef">center</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">justify-content</span>: <span style="color:#66d9ef">center</span>; </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> https://qwerty.work/post/2022/02/safari-fixed-sticky-problem/ Sun, 13 Feb 2022 20:37:29 +0900 https://qwerty.work/post/2022/02/safari-fixed-sticky-problem/ <h2 id="positionfixedが効かない">position:fixed;が効かない </h2><p>これはiPhoneに限ったことかもしれませんが、<code>position:fixed;</code>で**『TOPに戻る』ボタン**を画面スクロールに合わせて追従するように、ブラウザの右下に固定しようとしました。ところが、Windows PCのChromeではちゃんと固定されているのですが、iPhoneのSafariやChromeアプリでは固定されませんでした。そこで解決策メモ。<code>position:sticky;</code>でも同様みたいです。</p> <h2 id="ベンダープレフィックスが必要だった">ベンダープレフィックスが必要だった </h2><p>解決策は<code>position: -webkit-fixed;</code>の追加で解決できました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">ScrollTop</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">fixed</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">fixed</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">bottom</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">flex</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">100</span>; </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p>あと、ヒントになった以下のページよると、<code>や</code>タグでは、<code>display: flex;</code>または<code>display: block;</code>も必要みたいです。</p> <div class="link-card"> <a href="https://zenn.dev/tigerr/articles/82fc091cfe69bd" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://zenn.dev/tigerr/articles/82fc091cfe69bd" alt="https://zenn.dev/tigerr/articles/82fc091cfe69bd" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://zenn.dev/tigerr/articles/82fc091cfe69bd</span> <span class="link-card-url">https://zenn.dev/tigerr/articles/82fc091cfe69bd</span> </div> </a> </div> <div class="link-card"> <a href="https://ecmemo.net/safari-sticky-problem" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://ecmemo.net/safari-sticky-problem" alt="https://ecmemo.net/safari-sticky-problem" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://ecmemo.net/safari-sticky-problem</span> <span class="link-card-url">https://ecmemo.net/safari-sticky-problem</span> </div> </a> </div> <h2 id="ちなみにお世話になったトップに戻るボタンのサンプル">ちなみにお世話になった『トップに戻る』ボタンのサンプル </h2><p>以下のページを参考に、一定のスクロール後に**『TOPに戻る』ボタン**を作成したところ、iPhoneのSafariでボタンが固定されませんでした。このソースに<code>position: -webkit-fixed;</code>の追加することで解決できました。</p> <div class="link-card"> <a href="https://yuyauver98.me/scroll-show-hide-btn/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://yuyauver98.me/scroll-show-hide-btn/" alt="https://yuyauver98.me/scroll-show-hide-btn/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://yuyauver98.me/scroll-show-hide-btn/</span> <span class="link-card-url">https://yuyauver98.me/scroll-show-hide-btn/</span> </div> </a> </div> <div class="link-card"> <a href="https://recooord.org/scroll-to-top/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://recooord.org/scroll-to-top/" alt="https://recooord.org/scroll-to-top/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://recooord.org/scroll-to-top/</span> <span class="link-card-url">https://recooord.org/scroll-to-top/</span> </div> </a> </div> https://qwerty.work/post/2022/02/csss-svg-animation-sample/ Thu, 10 Feb 2022 09:31:06 +0900 https://qwerty.work/post/2022/02/csss-svg-animation-sample/ <h2 id="こういう背景ってどうやって作るんだろう">こういう背景ってどうやって作るんだろう？ </h2><p>以下のホームページに使われていた背景の動くバブルがいいな～と思いました。あと、フッターの波のような動きも。</p> <div class="link-card"> <a href="https://fukurou-labo.co.jp/recruit/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://fukurou-labo.co.jp/recruit/" alt="https://fukurou-labo.co.jp/recruit/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://fukurou-labo.co.jp/recruit/</span> <span class="link-card-url">https://fukurou-labo.co.jp/recruit/</span> </div> </a> </div> <p>「どうやってやってるのかな？」と、チャレンジしたくなり、方法を探したときにいろいろ見つけたのでメモ。</p> <h2 id="参考ページ">参考ページ </h2><h3 id="動くバブルみたいなやつはこれっぽい">動くバブルみたいなやつはこれっぽい？ </h3> <div class="link-card"> <a href="https://coco-factory.jp/ugokuweb/move02/5-3/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coco-factory.jp/ugokuweb/move02/5-3/" alt="https://coco-factory.jp/ugokuweb/move02/5-3/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coco-factory.jp/ugokuweb/move02/5-3/</span> <span class="link-card-url">https://coco-factory.jp/ugokuweb/move02/5-3/</span> </div> </a> </div> <h3 id="動く波はこれっぽい">動く波はこれっぽい？ </h3> <div class="link-card"> <a href="https://coco-factory.jp/ugokuweb/move02/5-13/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coco-factory.jp/ugokuweb/move02/5-13/" alt="https://coco-factory.jp/ugokuweb/move02/5-13/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coco-factory.jp/ugokuweb/move02/5-13/</span> <span class="link-card-url">https://coco-factory.jp/ugokuweb/move02/5-13/</span> </div> </a> </div> <div class="link-card"> <a href="http://kachibito.net/css/simple-css-waves-with-svg" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://kachibito.net/css/simple-css-waves-with-svg" alt="http://kachibito.net/css/simple-css-waves-with-svg" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://kachibito.net/css/simple-css-waves-with-svg</span> <span class="link-card-url">http://kachibito.net/css/simple-css-waves-with-svg</span> </div> </a> </div> <h4 id="静的ウェーブをオンラインで簡単に作れるサイト">静的ウェーブをオンラインで簡単に作れるサイト </h4> <div class="link-card"> <a href="https://www.shapedivider.app/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.shapedivider.app/" alt="https://www.shapedivider.app/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.shapedivider.app/</span> <span class="link-card-url">https://www.shapedivider.app/</span> </div> </a> </div> <h3 id="その他">その他 </h3> <div class="link-card"> <a href="https://deshinon.com/2019/03/06/koseiteki-haikei-css/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://deshinon.com/2019/03/06/koseiteki-haikei-css/" alt="https://deshinon.com/2019/03/06/koseiteki-haikei-css/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://deshinon.com/2019/03/06/koseiteki-haikei-css/</span> <span class="link-card-url">https://deshinon.com/2019/03/06/koseiteki-haikei-css/</span> </div> </a> </div> <div class="link-card"> <a href="https://webdesignfacts.net/entry/css-background-animation/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://webdesignfacts.net/entry/css-background-animation/" alt="https://webdesignfacts.net/entry/css-background-animation/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://webdesignfacts.net/entry/css-background-animation/</span> <span class="link-card-url">https://webdesignfacts.net/entry/css-background-animation/</span> </div> </a> </div> <div class="link-card"> <a href="https://web-navigator.blog/background-anime/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://web-navigator.blog/background-anime/" alt="https://web-navigator.blog/background-anime/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://web-navigator.blog/background-anime/</span> <span class="link-card-url">https://web-navigator.blog/background-anime/</span> </div> </a> </div> <div class="link-card"> <a href="https://goworkship.com/magazine/blob-animated-backgrounds/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://goworkship.com/magazine/blob-animated-backgrounds/" alt="https://goworkship.com/magazine/blob-animated-backgrounds/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://goworkship.com/magazine/blob-animated-backgrounds/</span> <span class="link-card-url">https://goworkship.com/magazine/blob-animated-backgrounds/</span> </div> </a> </div> <div class="link-card"> <a href="https://goworkship.com/magazine/liquid-effect-web/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://goworkship.com/magazine/liquid-effect-web/" alt="https://goworkship.com/magazine/liquid-effect-web/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://goworkship.com/magazine/liquid-effect-web/</span> <span class="link-card-url">https://goworkship.com/magazine/liquid-effect-web/</span> </div> </a> </div> <div class="link-card"> <a href="https://goworkship.com/magazine/glsl-shader-effect/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://goworkship.com/magazine/glsl-shader-effect/" alt="https://goworkship.com/magazine/glsl-shader-effect/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://goworkship.com/magazine/glsl-shader-effect/</span> <span class="link-card-url">https://goworkship.com/magazine/glsl-shader-effect/</span> </div> </a> </div> <h3 id="svgアニメーション">SVGアニメーション </h3> <div class="link-card"> <a href="https://b-risk.jp/blog/2017/06/svg-animation/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://b-risk.jp/blog/2017/06/svg-animation/" alt="https://b-risk.jp/blog/2017/06/svg-animation/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://b-risk.jp/blog/2017/06/svg-animation/</span> <span class="link-card-url">https://b-risk.jp/blog/2017/06/svg-animation/</span> </div> </a> </div> <h3 id="cssでマスクやアニメーションの参考">CSSでマスクやアニメーションの参考 </h3> <div class="link-card"> <a href="https://ics.media/entry/210701/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://ics.media/entry/210701/" alt="https://ics.media/entry/210701/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://ics.media/entry/210701/</span> <span class="link-card-url">https://ics.media/entry/210701/</span> </div> </a> </div> <h3 id="svgのストライプなどのパターンを作るサイト">SVGのストライプなどのパターンを作るサイト </h3> <div class="link-card"> <a href="https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration" alt="https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration</span> <span class="link-card-url">https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration</span> </div> </a> </div> <div class="link-card"> <a href="https://svg-pattern-maker.netlify.app/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://svg-pattern-maker.netlify.app/" alt="https://svg-pattern-maker.netlify.app/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://svg-pattern-maker.netlify.app/</span> <span class="link-card-url">https://svg-pattern-maker.netlify.app/</span> </div> </a> </div> <div class="link-card"> <a href="https://patterns.helloyes.dev/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://patterns.helloyes.dev/" alt="https://patterns.helloyes.dev/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://patterns.helloyes.dev/</span> <span class="link-card-url">https://patterns.helloyes.dev/</span> </div> </a> </div> https://qwerty.work/post/2021/12/css-async-perfomance/ Mon, 13 Dec 2021 11:20:48 +0900 https://qwerty.work/post/2021/12/css-async-perfomance/ <h2 id="cssを非同期で読み込んで高速化">CSSを非同期で読み込んで高速化 </h2><p>Lighthouseのパフォーマンススコアの**「レンダリングをブロックするリソースを排除する」**に対応するための対策方法をメモ。</p> <h3 id="mediaprint-onloadthismediaallをつける方法">media=&ldquo;print&rdquo; onload=&ldquo;this.media=&lsquo;all&rsquo;&ldquo;をつける方法 </h3><p>もっとも簡単な方法です。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;/path/to/my.css&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span></code></pre></div><p>これに、<code>media=&quot;print&quot; onload=&quot;this.media='all'&quot;</code>を加えて以下のようにします。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;/path/to/my.css&#34;</span> <span style="color:#a6e22e">media=</span><span style="color:#e6db74">&#34;print&#34;</span> <span style="color:#a6e22e">onload=</span><span style="color:#e6db74">&#34;this.media=&#39;all&#39;&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span></code></pre></div><p> </p> <h3 id="preloadを併用する方法">Preloadを併用する方法 </h3><p>Preloadは対応していないブラウザがあるので、併用が必要。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;preload&#34;</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;/path/to/my.css&#34;</span> <span style="color:#a6e22e">as=</span><span style="color:#e6db74">&#34;style&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;/path/to/my.css&#34;</span> <span style="color:#a6e22e">media=</span><span style="color:#e6db74">&#34;print&#34;</span> <span style="color:#a6e22e">onload=</span><span style="color:#e6db74">&#34;this.media=&#39;all&#39;&#34;</span><span style="color:#f92672">&gt;</span> </span></span></code></pre></div><p> </p> <h3 id="javascriptを使用する方法">Javascriptを使用する方法 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// make a stylesheet link </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">myCSS</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>( <span style="color:#e6db74">&#34;link&#34;</span> ); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">myCSS</span>.<span style="color:#a6e22e">rel</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;stylesheet&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">myCSS</span>.<span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;mystyles.css&#34;</span>; </span></span><span style="display:flex;"><span><span style="color:#75715e">// insert it at the end of the head in a legacy-friendly manner </span></span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">head</span>.<span style="color:#a6e22e">insertBefore</span>( <span style="color:#a6e22e">myCSS</span>, document.<span style="color:#a6e22e">head</span>.<span style="color:#a6e22e">childNodes</span>[ document.<span style="color:#a6e22e">head</span>.<span style="color:#a6e22e">childNodes</span>.<span style="color:#a6e22e">length</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">1</span> ].<span style="color:#a6e22e">nextSibling</span> ); </span></span></code></pre></div><p> </p> <p>または、</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">delaycss</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">createElement</span>(<span style="color:#e6db74">&#39;link&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">delaycss</span>.<span style="color:#a6e22e">rel</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;stylesheet&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">delaycss</span>.<span style="color:#a6e22e">href</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;/path/to/delaystyle.css&#39;</span>; </span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">head</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">delaycss</span>); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span></code></pre></div><p> </p> <h3 id="loadcssjsを使う方法">loadCSS.jsを使う方法 </h3><p>大抵のブラウザで使えるらしい。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;preload&#34;</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;index.css&#34;</span> <span style="color:#a6e22e">as=</span><span style="color:#e6db74">&#34;style&#34;</span> <span style="color:#a6e22e">onload=</span><span style="color:#e6db74">&#34;this.onload=null;this.rel=&#39;stylesheet&#39;&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;noscript&gt;&lt;link</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;index.css”&gt;&lt;/noscript&gt; </span></span></span><span style="display:flex;"><span><span style="color:#e6db74">&lt;script src=&#34;</span><span style="color:#960050;background-color:#1e0010">loadCSS.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script&gt;</span> </span></span><span style="display:flex;"><span> loadCSS( &#34;path/to/mystylesheet.css&#34; ); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/script&gt;</span> </span></span></code></pre></div><p> </p> <p>以下を参考にする。</p> <div class="link-card"> <a href="https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/#loadcss%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/#loadcss%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" alt="https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/#loadcss%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/#loadcss%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9</span> <span class="link-card-url">https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/#loadcss%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/filamentgroup/loadCSS" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/filamentgroup/loadCSS" alt="https://github.com/filamentgroup/loadCSS" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/filamentgroup/loadCSS</span> <span class="link-card-url">https://github.com/filamentgroup/loadCSS</span> </div> </a> </div> <h3 id="jqueryでcssを遅延読み込みする方法">jQueryでCSSを遅延読み込みする方法 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;lazyCss&#34;</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;lazy.css&#34;</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;subresource&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script&gt;</span> </span></span><span style="display:flex;"><span>$(function(){ </span></span><span style="display:flex;"><span> // CSS遅延読み込み </span></span><span style="display:flex;"><span> $(&#39;#lazyCss&#39;).attr(&#39;rel&#39;, &#39;stylesheet&#39;); </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/script&gt;</span> </span></span></code></pre></div><p> </p> <p>以下では複数のCSSとJSをまとめて非同期で読み込むスクリプト例を掲載しています。</p> <ul> <li><a class="link" href="https://qwerty.work/blog/2019/02/js-css-async-javascript.php" target="_blank" rel="noopener" >複数のJSとCSSをまとめて非同期で読み込むJavascriptのメモ - QWERTY.WORK</a></li> <li><a class="link" href="https://pgmemo.tokyo/data/archives/517.html" target="_blank" rel="noopener" >外部JavaScriptやcssファイルを動的に読み込み（遅延読み込み）HTMLページ描画を高速にする</a></li> </ul> <h2 id="気になること">気になること </h2><p>CSSを非同期で読み込んでも、そのCCSに実際には使用しないスタイルが含まれていることがあります。その場合、Lighthouseの「未使用のCSSを減らす」に警告が残ります。これを防ぐためには、不要なスタイルを削除したり、分割したりする必要がありますが、それに手間をかけれないので、これは放置するしかないでしょう。</p> <h2 id="参考サイト">参考サイト </h2> <div class="link-card"> <a href="https://www.filamentgroup.com/lab/async-css.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.filamentgroup.com/lab/async-css.html" alt="https://www.filamentgroup.com/lab/async-css.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.filamentgroup.com/lab/async-css.html</span> <span class="link-card-url">https://www.filamentgroup.com/lab/async-css.html</span> </div> </a> </div> <div class="link-card"> <a href="https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657" alt="https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657</span> <span class="link-card-url">https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657</span> </div> </a> </div> <div class="link-card"> <a href="https://neco913.kirara.st/post-7832/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://neco913.kirara.st/post-7832/" alt="https://neco913.kirara.st/post-7832/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://neco913.kirara.st/post-7832/</span> <span class="link-card-url">https://neco913.kirara.st/post-7832/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.nishishi.com/css/css-file-delay-load.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.nishishi.com/css/css-file-delay-load.html" alt="https://www.nishishi.com/css/css-file-delay-load.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.nishishi.com/css/css-file-delay-load.html</span> <span class="link-card-url">https://www.nishishi.com/css/css-file-delay-load.html</span> </div> </a> </div> <div class="link-card"> <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=ja" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=ja" alt="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=ja" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=ja</span> <span class="link-card-url">https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=ja</span> </div> </a> </div> <div class="link-card"> <a href="https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/" alt="https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/</span> <span class="link-card-url">https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/</span> </div> </a> </div> <div class="link-card"> <a href="http://www.02320.net/link-rel-subresource-and-lazy-load/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.02320.net/link-rel-subresource-and-lazy-load/" alt="http://www.02320.net/link-rel-subresource-and-lazy-load/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.02320.net/link-rel-subresource-and-lazy-load/</span> <span class="link-card-url">http://www.02320.net/link-rel-subresource-and-lazy-load/</span> </div> </a> </div> https://qwerty.work/post/2021/12/video-controls-z-index/ Mon, 06 Dec 2021 21:44:57 +0900 https://qwerty.work/post/2021/12/video-controls-z-index/ <h2 id="mp4ビデオの再生ボタンがクリックできない">MP4ビデオの再生ボタンがクリックできない </h2><p>WEBサイトにMP4の動画を設置しました。<strong>再生／停止</strong>や<strong>全画面再生</strong>などのメニューを表示させるため、****タグに<code>controls</code>を加えました</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;video</span> <span style="color:#960050;background-color:#1e0010">controls</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;sample.mp4&#34;</span><span style="color:#f92672">&gt;</span> </span></span></code></pre></div><p>しかし、以下のように再生ボタンにカーソルを重ねても指のマークに変わらず、クリックできません。</p> <p><img alt="再生ボタンをクリックできない" class="gallery-image" data-flex-basis="1182px" data-flex-grow="492" height="81" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2021/12/video-controls-z-index/images/No-02.jpg" width="399"></p> <h2 id="z-indexで解決">z-indexで解決 </h2><p>原因はヘッダーをページ上部に固定していたせいかもしれませんが、<code>controls</code>で表示されるメニューのレイヤーが前面になっていなかったせいのようです。これを解決するのが**スタイルシート（CSS）**で前面・背面のレイヤーを操作する<code>z-index</code>。</p> <h4 id="例">例 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#f92672">video</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>:<span style="color:#ae81ff">2</span>; </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p>数字が大きくなるほど前面（手前）に位置することを示します。絶対的に前面にするなら、<strong>1000</strong>とか極端な値を設定すれば良いかと思います。逆に、よく見かける<code>z-index:1;</code>は最背面で、前後でいう一番奥を指定していることを表しています。</p> <p>この、<code>z-index</code>で動画を最前面にすることで再生ボタンをクリックすることができました。</p> <p><img alt="再生ボタンをくりっくできるようになった" class="gallery-image" data-flex-basis="1182px" data-flex-grow="492" height="81" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2021/12/video-controls-z-index/images/No-03.jpg" width="399"></p> <h2 id="z-indexについての参考ページ">z-indexについての参考ページ </h2> <div class="link-card"> <a href="https://developer.mozilla.org/ja/docs/Web/CSS/z-index" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://developer.mozilla.org/ja/docs/Web/CSS/z-index" alt="https://developer.mozilla.org/ja/docs/Web/CSS/z-index" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://developer.mozilla.org/ja/docs/Web/CSS/z-index</span> <span class="link-card-url">https://developer.mozilla.org/ja/docs/Web/CSS/z-index</span> </div> </a> </div> https://qwerty.work/post/2021/11/bootstrap5-modal-sample/ Wed, 10 Nov 2021 13:01:12 +0900 https://qwerty.work/post/2021/11/bootstrap5-modal-sample/ <h2 id="bootstrapだけでモーダルウィンドウが使える">Bootstrapだけでモーダルウィンドウが使える </h2><p>CSSフレームワークとして<strong>Bootstrap5.0</strong>を使ったサイトを制作していて、**『簡単に設置できるモーダルウィンドウがないかな？』**と探していたところ、特殊なJavascriptやjQueryを使わなくても、Bootstrapの標準機能としてモーダルウィンドウが使えるのを知りました。</p> <p>ちなみに、モーダルウィンドウとは画像などをポップアップで表示してくれる<a class="link" href="https://lokeshdhakar.com/projects/lightbox2/" target="_blank" rel="noopener" >Lightboox2</a>や<a class="link" href="https://www.digitalia.be/software/slimbox2/" target="_blank" rel="noopener" >Slimbox2</a>みたいに、テキストやHTMLをページ全面にポップアップで表示してくれるものです。</p> <p><strong>Bootstrap5.0</strong>以前のバージョンである<strong>Bootstrap4.5</strong>でもModalは使えるみたいなのですが、4.5はjQueryと少しJavascriptを使わないと実現できません。しかし、Bootstrap5.0の場合はほぼコピペでいける程、設置がめっちゃ簡単です。</p> <div class="link-card"> <a href="https://getbootstrap.jp/docs/5.0/components/modal/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://getbootstrap.jp/docs/5.0/components/modal/" alt="https://getbootstrap.jp/docs/5.0/components/modal/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://getbootstrap.jp/docs/5.0/components/modal/</span> <span class="link-card-url">https://getbootstrap.jp/docs/5.0/components/modal/</span> </div> </a> </div> <h3 id="必要なjsとcss">必要なJSとCSS </h3><p>事前準備として必要なものはBootstrap5の以下の2点です。5.0以下のバージョンの物ではダメです。</p> <ul> <li>bootstrap.css</li> <li>bootstrap.js</li> </ul> <h4 id="cdnから読み込む場合">CDNから読み込む場合 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css&#34;</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span></code></pre></div><h2 id="サンプル">サンプル </h2><h3 id="スタンダードな例">スタンダードな例 </h3><p>ページの上からスライドダウンしてフェードインする例。</p> <p>Launch demo modal</p> <pre><code> Modal title Modal body text goes here. Close Save changes </code></pre> <h4 id="ソース">ソース </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css&#34;</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span> <span style="color:#a6e22e">data-bs-toggle=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">data-bs-target=</span><span style="color:#e6db74">&#34;#exampleModal-1&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> Launch demo modal </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- Modal --&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal fade&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;exampleModal&#34;</span> <span style="color:#a6e22e">tabindex=</span><span style="color:#e6db74">&#34;-1&#34;</span> <span style="color:#a6e22e">aria-labelledby=</span><span style="color:#e6db74">&#34;exampleModalLabel&#34;</span> <span style="color:#a6e22e">aria-hidden=</span><span style="color:#e6db74">&#34;true&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-dialog&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-content&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-header&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;h5</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-title&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;exampleModalLabel&#34;</span><span style="color:#f92672">&gt;</span>Modal title<span style="color:#f92672">&lt;/h5&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn-close&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">aria-label=</span><span style="color:#e6db74">&#34;Close&#34;</span><span style="color:#f92672">&gt;&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-body&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> Modal body text goes here. </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-footer&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-secondary&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span><span style="color:#f92672">&gt;</span>Close<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span><span style="color:#f92672">&gt;</span>Save changes<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span></code></pre></div><p> </p> <h3 id="static-backdrop">Static backdrop </h3><p>モーダルの外側の背景をクリックしてもモーダルが閉じない例。</p> <p>Launch static backdrop modal</p> <pre><code> Modal title Modal body text goes here. Close Understood </code></pre> <h4 id="ソース-1">ソース </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css&#34;</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- Button trigger modal --&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span> <span style="color:#a6e22e">data-bs-toggle=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">data-bs-target=</span><span style="color:#e6db74">&#34;#staticBackdrop&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> Launch static backdrop modal </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- Modal --&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal fade&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;staticBackdrop&#34;</span> <span style="color:#a6e22e">data-bs-backdrop=</span><span style="color:#e6db74">&#34;static&#34;</span> <span style="color:#a6e22e">data-bs-keyboard=</span><span style="color:#e6db74">&#34;false&#34;</span> <span style="color:#a6e22e">tabindex=</span><span style="color:#e6db74">&#34;-1&#34;</span> <span style="color:#a6e22e">aria-labelledby=</span><span style="color:#e6db74">&#34;staticBackdropLabel&#34;</span> <span style="color:#a6e22e">aria-hidden=</span><span style="color:#e6db74">&#34;true&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-dialog&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-content&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-header&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;h5</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-title&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;staticBackdropLabel&#34;</span><span style="color:#f92672">&gt;</span>Modal title<span style="color:#f92672">&lt;/h5&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn-close&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">aria-label=</span><span style="color:#e6db74">&#34;Close&#34;</span><span style="color:#f92672">&gt;&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-body&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> Modal body text goes here. </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-footer&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-secondary&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span><span style="color:#f92672">&gt;</span>Close<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span><span style="color:#f92672">&gt;</span>Understood<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/div&gt;</span> </span></span></code></pre></div><p> </p> <h3 id="scrolling-long-content">Scrolling long content </h3><p>モーダルがユーザーのビューポートやデバイスに対して長すぎると、ページ自体から独立してスクロールできる例。</p> <pre><code> Modal title What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It's in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic. We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby. Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground. Just own the night like the 4th of July! I'm gon' put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I'm gon' put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure. I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by? Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time. We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure. Close Save changes </code></pre> <p>Launch demo modal</p> <h4 id="ソース-2">ソース </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css&#34;</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- Modal --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal fade&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;exampleModalLong&#34;</span> <span style="color:#a6e22e">tabindex=</span><span style="color:#e6db74">&#34;-1&#34;</span> <span style="color:#a6e22e">aria-labelledby=</span><span style="color:#e6db74">&#34;exampleModalLongTitle&#34;</span> <span style="color:#a6e22e">aria-hidden=</span><span style="color:#e6db74">&#34;true&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-dialog&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-content&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-header&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;h5</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-title&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;exampleModalLongTitle&#34;</span><span style="color:#f92672">&gt;</span>Modal title<span style="color:#f92672">&lt;/h5&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn-close&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">aria-label=</span><span style="color:#e6db74">&#34;Close&#34;</span><span style="color:#f92672">&gt;&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-body&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It&#39;s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I&#39;ll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It&#39;s time to bring out the big balloons. You could&#39;ve been the greatest. Passport stamps, she&#39;s cosmopolitan. Your kiss is cosmic, every move is magic.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>We&#39;re living the life. We&#39;re doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl&#39;s a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She&#39;s got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. &#39;Cause, baby, you&#39;re a firework. Like thunder gonna shake the ground.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>Just own the night like the 4th of July! I&#39;m gon&#39; put her in a coma. What you&#39;re waiting for, it&#39;s time for you to show it off. Can&#39;t replace you with a million rings. You open my eyes and I&#39;m ready to go, lead me into the light. And here you are. I&#39;m gon&#39; put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>I can&#39;t sleep let&#39;s run away and don&#39;t ever look back, don&#39;t ever look back. I can&#39;t sleep let&#39;s run away and don&#39;t ever look back, don&#39;t ever look back. Yes, we make angels cry, raining down on earth from up above. I&#39;m walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make &#39;em go, &#39;Aah, aah, aah&#39; as you shoot across the sky-y-y! Why don&#39;t you let me stop by?<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>Boom, boom, boom. Never made me blink one time. Yeah, you&#39;re lucky if you&#39;re on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You&#39;re original, cannot be replaced. The girl&#39;s a freak, she drive a jeep in Laguna Beach. It&#39;s no big deal, it&#39;s no big deal, it&#39;s no big deal. In another life I would make you stay. I&#39;m ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>We&#39;d keep all our promises be us against the world. If you get the chance you better keep her. It&#39;s time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don&#39;t let the greatness get you down, oh, oh yeah. Yeah, she&#39;s footloose and so fancy free. I want the jaw droppin&#39;, eye poppin&#39;, head turnin&#39;, body shockin&#39;. End of the rainbow looking treasure.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-footer&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-secondary&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span><span style="color:#f92672">&gt;</span>Close<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span><span style="color:#f92672">&gt;</span>Save changes<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- Button trigger modal --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;bd-example&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span> <span style="color:#a6e22e">data-bs-toggle=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">data-bs-target=</span><span style="color:#e6db74">&#34;#exampleModalLong&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span>Launch demo modal </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span></code></pre></div><p>モーダル本体をスクロールできるスクロール可能にする例。</p> <p>上記のソース内にある<code>を</code>となるように、<code>.modal-dialog</code>に<code>.modal-dialog-scrollable</code>を追加するだけです。</p> <pre><code> Modal title What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure. I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by? Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time. We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds. Sipping on Rosé, Silver Lake sun, coming up all lazy. It's in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic. We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby. Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground. Just own the night like the 4th of July! I'm gon' put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I'm gon' put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool. Close Save changes </code></pre> <p>Launch demo modal</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css&#34;</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js&#34;</span> <span style="color:#a6e22e">integrity=</span><span style="color:#e6db74">&#34;sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj&#34;</span> <span style="color:#a6e22e">crossorigin=</span><span style="color:#e6db74">&#34;anonymous&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- Modal --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal fade&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;exampleModalScrollable&#34;</span> <span style="color:#a6e22e">tabindex=</span><span style="color:#e6db74">&#34;-1&#34;</span> <span style="color:#a6e22e">aria-labelledby=</span><span style="color:#e6db74">&#34;exampleModalScrollableTitle&#34;</span> <span style="color:#a6e22e">aria-hidden=</span><span style="color:#e6db74">&#34;true&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-dialog modal-dialog-scrollable&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-content&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-header&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;h5</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-title&#34;</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;exampleModalScrollableTitle&#34;</span><span style="color:#f92672">&gt;</span>Modal title<span style="color:#f92672">&lt;/h5&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn-close&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">aria-label=</span><span style="color:#e6db74">&#34;Close&#34;</span><span style="color:#f92672">&gt;&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-body&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>I can&#39;t sleep let&#39;s run away and don&#39;t ever look back, don&#39;t ever look back. I can&#39;t sleep let&#39;s run away and don&#39;t ever look back, don&#39;t ever look back. Yes, we make angels cry, raining down on earth from up above. I&#39;m walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make &#39;em go, &#39;Aah, aah, aah&#39; as you shoot across the sky-y-y! Why don&#39;t you let me stop by?<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>Boom, boom, boom. Never made me blink one time. Yeah, you&#39;re lucky if you&#39;re on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You&#39;re original, cannot be replaced. The girl&#39;s a freak, she drive a jeep in Laguna Beach. It&#39;s no big deal, it&#39;s no big deal, it&#39;s no big deal. In another life I would make you stay. I&#39;m ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>We&#39;d keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. &#39;Cause she&#39;s the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>Sipping on Rosé, Silver Lake sun, coming up all lazy. It&#39;s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I&#39;ll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It&#39;s time to bring out the big balloons. You could&#39;ve been the greatest. Passport stamps, she&#39;s cosmopolitan. Your kiss is cosmic, every move is magic.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>We&#39;re living the life. We&#39;re doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl&#39;s a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She&#39;s got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. &#39;Cause, baby, you&#39;re a firework. Like thunder gonna shake the ground.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;p&gt;</span>Just own the night like the 4th of July! I&#39;m gon&#39; put her in a coma. What you&#39;re waiting for, it&#39;s time for you to show it off. Can&#39;t replace you with a million rings. You open my eyes and I&#39;m ready to go, lead me into the light. And here you are. I&#39;m gon&#39; put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.<span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;modal-footer&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-secondary&#34;</span> <span style="color:#a6e22e">data-bs-dismiss=</span><span style="color:#e6db74">&#34;modal&#34;</span><span style="color:#f92672">&gt;</span>Close<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span><span style="color:#f92672">&gt;</span>Save changes<span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- Button trigger modal --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;bd-example&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;button</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;btn btn-primary&#34;</span> <span style="color:#a6e22e">data-bs-toggle=</span><span style="color:#e6db74">&#34;modal&#34;</span> <span style="color:#a6e22e">data-bs-target=</span><span style="color:#e6db74">&#34;#exampleModalScrollable&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span>Launch demo modal </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/button&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span></code></pre></div><h2 id="その他サンプル">その他サンプル </h2><p>以下の公式ページに他のサンプルや使用例が掲載されています。基本的には使い方は同じです。</p> <h4 id="公式リファレンス">公式リファレンス </h4> <div class="link-card"> <a href="https://getbootstrap.jp/docs/5.0/components/modal/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://getbootstrap.jp/docs/5.0/components/modal/" alt="https://getbootstrap.jp/docs/5.0/components/modal/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://getbootstrap.jp/docs/5.0/components/modal/</span> <span class="link-card-url">https://getbootstrap.jp/docs/5.0/components/modal/</span> </div> </a> </div> <div class="link-card"> <a href="https://getbootstrap.com/docs/5.0/components/modal/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://getbootstrap.com/docs/5.0/components/modal/" alt="https://getbootstrap.com/docs/5.0/components/modal/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://getbootstrap.com/docs/5.0/components/modal/</span> <span class="link-card-url">https://getbootstrap.com/docs/5.0/components/modal/</span> </div> </a> </div> https://qwerty.work/post/2021/02/lazy-js-css/ Wed, 17 Feb 2021 19:20:57 +0900 https://qwerty.work/post/2021/02/lazy-js-css/ <h3 id="特定の要素のみを遅延表示させる">特定の要素のみを遅延表示させる </h3><h4 id="参考サイト">参考サイト </h4> <div class="link-card"> <a href="https://teratail.com/questions/113891" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://teratail.com/questions/113891" alt="https://teratail.com/questions/113891" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://teratail.com/questions/113891</span> <span class="link-card-url">https://teratail.com/questions/113891</span> </div> </a> </div> <div class="link-card"> <a href="https://makibishi.ninja/lazysizes/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://makibishi.ninja/lazysizes/" alt="https://makibishi.ninja/lazysizes/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://makibishi.ninja/lazysizes/</span> <span class="link-card-url">https://makibishi.ninja/lazysizes/</span> </div> </a> </div> <div class="link-card"> <a href="https://techacademy.jp/magazine/25636" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://techacademy.jp/magazine/25636" alt="https://techacademy.jp/magazine/25636" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://techacademy.jp/magazine/25636</span> <span class="link-card-url">https://techacademy.jp/magazine/25636</span> </div> </a> </div> <div class="link-card"> <a href="https://zxcvbnmnbvcxz.com/specified-time-or-more/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://zxcvbnmnbvcxz.com/specified-time-or-more/" alt="https://zxcvbnmnbvcxz.com/specified-time-or-more/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://zxcvbnmnbvcxz.com/specified-time-or-more/</span> <span class="link-card-url">https://zxcvbnmnbvcxz.com/specified-time-or-more/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.marukin-ad.co.jp/marulog/?p=1891" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.marukin-ad.co.jp/marulog/?p=1891" alt="https://www.marukin-ad.co.jp/marulog/?p=1891" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.marukin-ad.co.jp/marulog/?p=1891</span> <span class="link-card-url">https://www.marukin-ad.co.jp/marulog/?p=1891</span> </div> </a> </div> <h3 id="逆に遅延非表示にする場合">逆に遅延非表示にする場合 </h3><h4 id="参考サイト-1">参考サイト </h4> <div class="link-card"> <a href="http://kachibito.net/snippets/settimeout-fadeout" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://kachibito.net/snippets/settimeout-fadeout" alt="http://kachibito.net/snippets/settimeout-fadeout" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://kachibito.net/snippets/settimeout-fadeout</span> <span class="link-card-url">http://kachibito.net/snippets/settimeout-fadeout</span> </div> </a> </div> https://qwerty.work/post/2020/06/position-sticky-jquery-stiky-js/ Mon, 15 Jun 2020 21:16:42 +0900 https://qwerty.work/post/2020/06/position-sticky-jquery-stiky-js/ <p>前置きはともかく方法を真っ先にしりたい方は → <a class="link" href="#koko" ><strong>ここ</strong></a> から見てください。</p> <p>ページをスクロールしても同じところに表示され続けるサイドバーのアドセンス広告を実装する方法をメモ。CCSで簡単に実現するつもりが失敗。代わりにjQueryで実現した方法。</p> <h2 id="発端は超低いアドセンス広告のクリック率">発端は超低いアドセンス広告のクリック率 </h2><p>このブログにはAdSense広告を貼っていますが、悲しいことにクリック率が**平均0.15％**くらいしかありません。1万PVでやっと1.5クリックです。いろいろなアフィリエイトやAdSenseのブログ記事を見ると、クリック率は1～2％が普通みたいで、それから比べる10分の1くらい少ないです。</p> <p>悲しくなってきたので、**クリック率を上げるにはどうしたらいいか？**検索して調べてみると、以下のような問題があるのではないか？というのを沢山見ました。</p> <ul> <li>広告の配置が悪い</li> <li>広告の数が多い</li> <li>広告の種類が悪い</li> </ul> <p>そこで、アドセンス広告の配置を見直すことにしました。このブログは主に**『パソコンの困りごとをどうやって解決したか』<strong>という内容の記事がメインで、検索して訪問される方は</strong>『調べる』**ということを目的に閲覧していると思います。その調べものがメインで来ているのに、広告がいきなりガチャガチャで出てくると印象が悪いと思います。そこがクリック率の低さに繋がっているのではないかと思いました。</p> <p>そこで、印象をよく思っていただいた後にアドセンス広告を出すようしたいと思います。仮に、このブログに訪問者にとって価値がある情報があったとして、以下のように思っていただけたところに広告をだしたいと考えました。</p> <ul> <li>このページに来てある程度目的が達成できた</li> <li>調べたいヒントがここにあった</li> <li>知りたい内容がドンピシャだった</li> </ul> <p>と思ってもらえることが大事で、<strong>『広告収入はおまけの位置づけ』<strong>のはずが、いつの間にか</strong>広告の方がメインになっていた</strong>気がします。</p> <ul> <li>このページを読むことを邪魔しない程度にしながらグイグイと広告を出す</li> <li>読み終わってホッとしたところで広告を見せる</li> </ul> <p>こういったところから、**『サイドバーの一番下にアドセンスの追尾広告を出したい！』**ということを思いつきました。</p> <h2 id="cssによる追尾広告の設置に失敗して困った">CSSによる追尾広告の設置に失敗して困った </h2><p>サイドバーの一番下にAdSenseの**『関連コンテンツ広告』**を設置して、スクロールしてもずっと追いかけて表示できるように、一番簡単そうなCSSに<code>position: sticky</code>と書いて追従表示する方法をとりました。<code>position: sticky</code>を使おうと思った理由が、ほぼすべてのブラウザが対応していて、簡単でシンプルだからです。</p> <h3 id="position-stickyをサポートしているブラウザ">position: sticky;をサポートしているブラウザ </h3><p>以下のページでは<code>position: sticky</code>に対応しているブラウザのバージョンがわかります。</p> <div class="link-card"> <a href="https://caniuse.com/#feat=css-sticky" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://caniuse.com/#feat=css-sticky" alt="https://caniuse.com/#feat=css-sticky" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://caniuse.com/#feat=css-sticky</span> <span class="link-card-url">https://caniuse.com/#feat=css-sticky</span> </div> </a> </div> <h3 id="コード例">コード例 </h3><p>たったこれだけす。簡単ですね。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">style</span>&gt; </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sticky</span> { </span></span><span style="display:flex;"><span> postion: <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">sticky</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">sticky</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">style</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;sticky&#34;</span>&gt; </span></span><span style="display:flex;"><span> 〜追従表示させたい要素〜 </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><h3 id="試したところピクリとも動かなったその原因">試したところピクリとも動かなったその原因 </h3><p>上記のコードを参考にテストしてみたところ、ページをスクロールしても<strong>ピクリとも動きません</strong>でした。コードの書き方が悪かったかな？を思いながら試行錯誤してもダメでした。いろいろ検索して調べたら<code>position: sticky</code>が効かない条件がありました。</p> <h4 id="先祖要素にoverflowが指定されていると動かない">先祖要素にoverflowが指定されていると動かない </h4><p>親要素に<code>overflow</code>を指定して<code>float</code>を解除している場合、<code>position: sticky</code>が効かないみたいです。これは、直近の親要素だけに限らず、先祖要素に一つでも<code>overflow</code>が指定されているとダメみたいです。また、<code>float</code>を使ったグリッドシステムも<code>position: sticky</code>を使えない可能性が高いみたいで注意が必要です。</p> <ul> <li> <p><code>overflow: hidden</code>、<code>overflow: auto</code>を使っていると<code>sticky</code>が効かない</p> </li> <li> <p><code>overflow: scroll</code>で高さの指定がないと<code>sticky</code>が効かない</p> </li> <li> <p><code>overflow: scroll</code>で高さの指定があれば、そのブロック内で<code>sticky</code>が効く</p> <p>この場合、先祖要素に<code>overflow: hidden</code>が指定されていても関係ありません。</p> </li> <li> <p><code>overflow: visible</code>であれば<code>sticky</code>は効く</p> </li> </ul> <h4 id="safariに限ってはinline-block要素で効かない">Safariに限ってはinline-block要素で効かない </h4><p>Firefox、Chrome、Edgeでは問題ないみたいですが、SafariとiOS Safariでは、スティックさせたい要素に<code>display: inline-block</code>を指定していると<code>position: sticky</code>が効かなくなるそうです。</p> <h3 id="原因がわかったところで対処できず">原因がわかったところで対処できず </h3><p><code>position: sticky</code>が使えない（効かない）原因がわかったところで、ページのソースコードに<code>overflow: hidden</code>や<code>float</code>があるが検索をしてみたら**多用していました。<strong>自分で作ったレイアウトではなく、テンプレートを使用しているので、<code>position: sticky</code>が効くようにするために<code>overflow: hidden</code>や<code>float</code>を取り除くとなると、もはや別のレイアウトを作ることになり、最悪は現在のレイアウトが総崩れで修復困難になる恐ろしいリスクも出てきて、手間や時間がかかりすぎるので、</strong>『追尾広告はあきらめようかな』**と、心が折れかけました。</p> <h2 id="jqueryで実現する方法を見つけた">jQueryで実現する方法を見つけた！ </h2><p>ページの読み込みが重たくなるので、なるべくJavascriptやjQueryの追加はしたくないのですが、**『クリック率は高めたい！あきらめるな！』<strong>という心の声で、もうひと踏ん張りして</strong>『別の方法で実現できないか？』**と探してみたところ、方法を見つけました！</p> <p>Javascriptで実現する方法があったのですが、サンプルのソースは行数が多く、自分用にカスタマイズしようにも理解できない感じでした。jQueryと使った方は実装方法がとてもシンプルで、既にj他のことでjQueryを導入していたので、jQueryを使った方法を試すことにしました。</p> <h3 id="jquerystikyjsでうまくいった">jQuery.stiky.jsでうまくいった！ </h3><p>以下のページから <a class="link" href="https://github.com/garand/sticky/blob/master/jquery.sticky.js" target="_blank" rel="noopener" >jquery.sticky.js</a> をダウンロードして使います。やってみたらちょっても簡単でした。CSSの<code>position: sticky</code>とは違い、<code>overflow: hidden</code>があっても効きました。</p> <div class="link-card"> <a href="https://github.com/garand/sticky" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/garand/sticky" alt="https://github.com/garand/sticky" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/garand/sticky</span> <span class="link-card-url">https://github.com/garand/sticky</span> </div> </a> </div> <h4 id="サンプルコード">サンプルコード </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">defer</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;jquery.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">defer</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;jquery.sticky.js&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">defer</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(document).<span style="color:#a6e22e">ready</span>(<span style="color:#66d9ef">function</span>(){ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(<span style="color:#e6db74">&#34;#sticker&#34;</span>).<span style="color:#a6e22e">sticky</span>({ <span style="color:#a6e22e">topSpacing</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">10</span> , <span style="color:#a6e22e">bottomSpacing</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">10</span> }); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#66d9ef">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;sidebar&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stikcker&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">AdSenseのコード</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span> </span></span></code></pre></div><p>ページの読み込みを速くするために<code>Defer</code>で順番に遅延読み込みするようにしています。<code>sticky</code>というidが付いたの部分がスクロールしても追随して表示されます。</p> <p>ただ、この <a class="link" href="https://github.com/garand/sticky/blob/master/jquery.sticky.js" target="_blank" rel="noopener" >jquery.sticky.js</a>　はIEでは動きませんでした。ChromeとEdge（Chromium）では大丈夫でした。</p> <h2 id="position-stickyを補助するjsもあった">position: sticky;を補助するJSもあった </h2><p>今回は使いませんでしたが、position: sticky;が効かないときに補助してくれるjQueryプラグインも存在していました。特にIEに対応させたいときに使えそうです。</p> <div class="link-card"> <a href="https://www.miso.blog/css-position-sticky/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.miso.blog/css-position-sticky/" alt="https://www.miso.blog/css-position-sticky/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.miso.blog/css-position-sticky/</span> <span class="link-card-url">https://www.miso.blog/css-position-sticky/</span> </div> </a> </div> <div class="link-card"> <a href="https://arakaze.ready.jp/archives/4153" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://arakaze.ready.jp/archives/4153" alt="https://arakaze.ready.jp/archives/4153" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://arakaze.ready.jp/archives/4153</span> <span class="link-card-url">https://arakaze.ready.jp/archives/4153</span> </div> </a> </div> https://qwerty.work/post/2020/05/adsnse-css-background-transparent/ Sat, 23 May 2020 15:02:46 +0900 https://qwerty.work/post/2020/05/adsnse-css-background-transparent/ <h2 id="余計な黄色の背景や余白を消す">余計な黄色の背景や余白を消す </h2><p>AdSense広告を設置したページを開くと、広告が表示される部分に広告は表示されていないけど、全面に黄色い背景が表示されていたり、広告は表示されているけど、黄色い部分が一部表示されていたります。</p> <p><img class="gallery-image" data-flex-basis="954px" data-flex-grow="397" height="176" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/adsnse-css-background-transparent/images/No-05.jpg" width="700"></p> <p>これをそうにかできないかな？と方法を探したところ、消すというよりCSS（スタイルシート）で透過せることで解決できることがわかりました。</p> <h2 id="cssスタイルシート例">CSS（スタイルシート）例 </h2><p>以下の1行を既存のスタイルシートか、AdSenseの広告コードに加えるだけです。このコードは**『透明』**を意味するスタイルシートのコードです。これでAdSense広告の背景を透過させることができます。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#f92672">background</span><span style="color:#f92672">:</span> <span style="color:#f92672">transparent</span><span style="color:#f92672">;</span> </span></span></code></pre></div><h3 id="adsenseの広告コードに加えた例">AdSenseの広告コードに加えた例 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">async</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">ins</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;adsbygoogle&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;display:block; text-align:center; &lt;span class=&#34;</span><span style="color:#a6e22e">brush:css</span><span style="color:#960050;background-color:#1e0010">;&#34;</span>&gt;background: transparent;&lt;/<span style="color:#f92672">span</span>&gt;&#34; </span></span><span style="display:flex;"><span> data-ad-layout=&#34;in-article&#34; </span></span><span style="display:flex;"><span> data-ad-format=&#34;fluid&#34; </span></span><span style="display:flex;"><span> data-ad-client=&#34;ca-pub-XXXXXXXXXXXXXXXXX&#34; </span></span><span style="display:flex;"><span> data-ad-slot=&#34;XXXXXXXXXXX&#34;&gt;&lt;/<span style="color:#f92672">ins</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span>&gt; </span></span><span style="display:flex;"><span> (<span style="color:#a6e22e">adsbygoogle</span> <span style="color:#f92672">=</span> window.<span style="color:#a6e22e">adsbygoogle</span> <span style="color:#f92672">||</span> []).<span style="color:#a6e22e">push</span>({}); </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">script</span>&gt; </span></span></code></pre></div><h3 id="スタイルシートに加えた例">スタイルシートに加えた例 </h3><p>複数のAdSense広告があり、全部ページに共通のCSSで適用する場合は、以下の1行を加えればOKです。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">adsbygoogle</span> { <span style="color:#66d9ef">background</span>: <span style="color:#66d9ef">transparent</span>;} </span></span></code></pre></div><h2 id="黄色の部分が消えた">黄色の部分が消えた！ </h2><p>これで黄色い背景部分が消えました。ただ、背景を透明（透過）にするだけなので、広告部分を縮める訳ではないので余白部分ができます。</p> <p><img class="gallery-image" data-flex-basis="954px" data-flex-grow="397" height="176" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2020/05/adsnse-css-background-transparent/images/No-06.jpg" width="700"></p> https://qwerty.work/post/2020/05/youtube-responsive/ Sat, 23 May 2020 13:56:06 +0900 https://qwerty.work/post/2020/05/youtube-responsive/ <h2 id="モバイルページではyoutubeの画面がはみ出る">モバイルページではYouTubeの画面がはみ出る </h2><p>最近はページにYouTubeの動画を埋め込むことが増えてきました。スマホでそのページを見たときに動画の画面がはみ出ていたので自動的に幅に合わせて表示を変えてくれるレスポンシブに対応する方法を探しました。CSS（スタイルシート）で簡単にできることがわかったのでメモ。</p> <h2 id="まずは埋め込みタグをで囲む">まずは埋め込みタグをで囲む </h2><p>YouTubeの埋め込みタグを以下のように``で囲みます。</p> <p>ついでに<code>loading=&quot;lazy&quot;</code>を加えて遅延表示対応しています。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;youtube&#34;</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">iframe</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;560&#34;</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;315&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;//www.youtube.com/embed/j1fyn12NH5s&#34;</span> <span style="color:#a6e22e">frameborder</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;0&#34;</span> <span style="color:#a6e22e">allowfullscreen</span> <span style="color:#a6e22e">loading</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;lazy&#34;</span>&gt;&lt;/<span style="color:#f92672">iframe</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt; </span></span></code></pre></div><p>ちなみに以下の動画は随分前の森永ミルクキャラメルのCMで最後に小さな女の子の笑顔がたまらなく可愛くて、こちらまで幸せな気分になってしまうお気に入りの動画です。</p> <div class="video-wrapper"> <iframe loading="lazy" src="https://www.youtube.com/embed/j1fyn12NH5s" allowfullscreen title="YouTube Video" > </iframe> </div> <p>予備動画 <a class="link" href="https://www.nicovideo.jp/watch/sm17960932" target="_blank" rel="noopener" >1</a> <a class="link" href="https://www.nicovideo.jp/watch/sm17960921" target="_blank" rel="noopener" >2</a></p> <h2 id="レスポンシブ対応するcss">レスポンシブ対応するCSS </h2><h3 id="最近のaspect-ratioを使用する方法">最近のaspect-ratioを使用する方法 </h3><p>以前は<code>padding-top: 56.25%;</code>を使って16:9の縦横比（アスペクト比）に合わせてレスポンシブ対応していましたが、ここ最近では<code>aspect-ratio</code>がほとんどのモダンブラウズで使えるようになり、簡単にできるようになったみたいです。</p> <h4 id="ソース例">ソース例 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">youtube</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">aspect-ratio</span>: <span style="color:#ae81ff">16</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">9</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">youtube</span> <span style="color:#f92672">iframe</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span>; </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p>または</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#f92672">iframe</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">aspect-ratio</span>: <span style="color:#ae81ff">16</span><span style="color:#f92672">/</span><span style="color:#ae81ff">9</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span>; </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p>後述の従来の<code>position: relative;</code>と<code>position: absolute;</code>と<code>padding-top: 56.25%;</code>を組合せて使うより簡単でいいですね。</p> <h4 id="参考サイト">参考サイト </h4><p><code>aspect-ratio</code>と<code>object-fit: cover;</code>について、以下のページが参考になりました。</p> <div class="link-card"> <a href="https://moshashugyo.com/media/aspect-ratio" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://moshashugyo.com/media/aspect-ratio" alt="https://moshashugyo.com/media/aspect-ratio" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://moshashugyo.com/media/aspect-ratio</span> <span class="link-card-url">https://moshashugyo.com/media/aspect-ratio</span> </div> </a> </div> <div class="link-card"> <a href="https://coliss.com/articles/build-websites/operation/css/about-aspect-ratio-in-css.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coliss.com/articles/build-websites/operation/css/about-aspect-ratio-in-css.html" alt="https://coliss.com/articles/build-websites/operation/css/about-aspect-ratio-in-css.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coliss.com/articles/build-websites/operation/css/about-aspect-ratio-in-css.html</span> <span class="link-card-url">https://coliss.com/articles/build-websites/operation/css/about-aspect-ratio-in-css.html</span> </div> </a> </div> <h4 id="ブラウザの対応状況">ブラウザの対応状況 </h4> <div class="link-card"> <a href="https://caniuse.com/mdn-css_properties_aspect-ratio" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://caniuse.com/mdn-css_properties_aspect-ratio" alt="https://caniuse.com/mdn-css_properties_aspect-ratio" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://caniuse.com/mdn-css_properties_aspect-ratio</span> <span class="link-card-url">https://caniuse.com/mdn-css_properties_aspect-ratio</span> </div> </a> </div> <div class="link-card"> <a href="https://caniuse.com/?search=object-fit" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://caniuse.com/?search=object-fit" alt="https://caniuse.com/?search=object-fit" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://caniuse.com/?search=object-fit</span> <span class="link-card-url">https://caniuse.com/?search=object-fit</span> </div> </a> </div> <p> </p> <h3 id="従来のpadding-top-5625を使用する方法">従来のpadding-top: 56.25%;を使用する方法 </h3><p>You-Tubeの埋め込みのサイズでよくある<code>width=&quot;560&quot; height=&quot;315&quot;</code>の指定があってもページ幅最大に動画を表示する<code>aspect-ratio</code>を使わない従来の方法。PCの場合、サイトの作りによっては幅いっぱいに大きく表示されるようになります。スマホなどは適度な大きさで画面幅に合わせたレスポンシブ表示されます。<code>aspect-ratio</code>を使用するより、コードが多いのですが、IEなど古いブラウザ対応が必要な場合はこちらを使うことが必要になります。</p> <h4 id="ソース例-1">ソース例 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">youtube</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">relative</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding-top</span>: <span style="color:#ae81ff">56.25</span><span style="color:#66d9ef">%</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">youtube</span> <span style="color:#f92672">iframe</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span> <span style="color:#75715e">!important</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span> <span style="color:#75715e">!important</span>; </span></span><span style="display:flex;"><span> } </span></span></code></pre></div><ul> <li>4:3の場合 padding-bottom: 75%;</li> <li>16:9の場合 padding-bottom: 56.25%;</li> <li>padding-bottomはpadding-topでも可。</li> </ul> <p><code>padding-bottom: 56.25%;</code>は16:9の幅16を100％にしたときの高さ9がナンバーセントの比率かを意味するかを意味しています。以下のページが参考になります。これを入れないと<code>width: 100%;</code>だけだと高さは変わらず、横だけがレスポンシブになってしまいます。これを入れることにより、縦横比を維持した状態でレスポンシブ表示する対応方法となっています。</p> <h4 id="参考ページ">参考ページ </h4> <div class="link-card"> <a href="https://h2ham.net/youtube-responsive/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://h2ham.net/youtube-responsive/" alt="https://h2ham.net/youtube-responsive/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://h2ham.net/youtube-responsive/</span> <span class="link-card-url">https://h2ham.net/youtube-responsive/</span> </div> </a> </div> <h3 id="従来の方法でスマホ用にちょっと手を加えた例">従来の方法でスマホ用にちょっと手を加えた例 </h3><p>スマホなどのモバイルページではレスポンシブ表示して、PCなどは大きくなりすぎないように、埋め込みコードの指定通り<code>width=&quot;560&quot; height=&quot;315&quot;</code>で表示する場合の例です。私の場合、埋め込みコードの幅560ピクセルに合わせて、最大559ピクセルまでの解像度でアクセスした場合はレスポンシブ表示するようにしました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>@<span style="color:#66d9ef">media</span> <span style="color:#f92672">screen</span> <span style="color:#f92672">and</span> <span style="color:#f92672">(</span><span style="color:#f92672">max-width</span>:<span style="color:#a6e22e">559px</span><span style="color:#f92672">)</span>{ </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">youtube</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">relative</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding-top</span>: <span style="color:#ae81ff">56.25</span><span style="color:#66d9ef">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">0.5</span><span style="color:#66d9ef">em</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">1</span><span style="color:#66d9ef">em</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">youtube</span> <span style="color:#f92672">iframe</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span> <span style="color:#75715e">!important</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span> <span style="color:#75715e">!important</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><p>動画を連続して埋め込んだときのために<code>margin: 0.5em 0 1em;</code>を加えて、上下に余白を入れて動画同士の間に隙間を作るようにしました。</p> <p>試しにこのページを560px以下の解像度のスマホで見ていただければYouTube動画が幅いっぱいに収まっているはずです。</p> <h2 id="その他参考ページ">その他参考ページ </h2> <div class="link-card"> <a href="https://design.webclips.jp/youtube-movie-size/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://design.webclips.jp/youtube-movie-size/" alt="https://design.webclips.jp/youtube-movie-size/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://design.webclips.jp/youtube-movie-size/</span> <span class="link-card-url">https://design.webclips.jp/youtube-movie-size/</span> </div> </a> </div> <div class="link-card"> <a href="https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c" alt="https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c</span> <span class="link-card-url">https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c</span> </div> </a> </div> https://qwerty.work/post/2019/03/fontawesome-pagespeedinsights-font-face/ Sun, 03 Mar 2019 22:06:49 +0900 https://qwerty.work/post/2019/03/fontawesome-pagespeedinsights-font-face/ <h3 id="pagespeed-insightsでフォントの代替表示を求められた">Pagespeed Insightsでフォントの代替表示を求められた </h3><p>ページ装飾のアクセントにアイコンフォントとして<a class="link" href="https://fontawesome.com/" target="_blank" rel="noopener" >Font-Awesome 5</a> のフォントをCDN経由で読み込んで使用しているのですが、<a class="link" href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener" >Pagespeed Insights</a>でページの分析をした際、以下のような改善案が表示されました。</p> <p>ウェブフォント読み込み中の全テキストの表示</p> <p>フォント表示の CSS 機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください。 この改善案に対して、どうのような対策を採ればいいのか調べたとことCSSに**@font-face**の設定を加えればいいみたいなので、やってみたことをメモ。</p> <h3 id="３つのフォントファイルに対して対策が必要">３つのフォントファイルに対して対策が必要 </h3><p><a class="link" href="https://fontawesome.com/" target="_blank" rel="noopener" >Font-Awesome 5（Free）</a>を以下のコードで読み込んでいるのですが、ページを表示する際に以下の3つのフォントファイルが<a class="link" href="https://fontawesome.com/" target="_blank" rel="noopener" >Font-Awesome 5</a>のスタイルシートから読み込まれます。その３つのフォントに対して代替表示の対策をしなければなりません。</p> <h4 id="font-awesome-5freeの読み込みコード">Font-Awesome 5（Free）の読み込みコード </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css&#34;</span>&gt; </span></span></code></pre></div><h4 id="上記のスタイルシートから読み込まれるフォントファイル">上記のスタイルシートから読み込まれるフォントファイル </h4><p>この３つに対して対策が必要。</p> <ul> <li>fa-brands-400.woff2</li> <li>fa-regular-400.woff2</li> <li>fa-solid-900.woff2</li> </ul> <h3 id="スタイルシートにfont-faceを追加して解決">スタイルシートに@font-faceを追加して解決 </h3><p>ページのスタイルシートに以下のコードを追記することで解決できました。<strong>@font-face</strong>に３つのフォントファイルを指定。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>@<span style="color:#66d9ef">font-face</span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-family</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Font Awesome 5 Brands&#39;</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-style</span><span style="color:#f92672">:</span> <span style="color:#f92672">normal</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-weight</span><span style="color:#f92672">:</span> <span style="color:#f92672">400</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">src</span><span style="color:#f92672">:</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff2&#34;</span><span style="color:#f92672">);</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-display</span><span style="color:#f92672">:</span> <span style="color:#f92672">swap</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> @<span style="color:#66d9ef">font-face</span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-family</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Font Awesome 5 Free&#39;</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-style</span><span style="color:#f92672">:</span> <span style="color:#f92672">normal</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-weight</span><span style="color:#f92672">:</span> <span style="color:#f92672">900</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">src</span>:<span style="color:#a6e22e">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff2&#34;</span><span style="color:#f92672">),</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff2&#34;</span><span style="color:#f92672">);</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-display</span><span style="color:#f92672">:</span> <span style="color:#f92672">swap</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> } </span></span></code></pre></div><h3 id="診断に合格">診断に合格 </h3><p>スタイルシートに**@font-face<strong>を加えた後に、再度<a class="link" href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener" >Pagespeed Insights</a>でページを分析したら無事合格しました。</strong>「診断」<strong>の欄から</strong>「合格した監査」**の欄に移動していました。</p> <p><a class="link" href="https://qwerty.work/blog/2019/03/03/No-02.jpg" ><img class="gallery-image" data-flex-basis="1541px" data-flex-grow="642" height="109" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/03/fontawesome-pagespeedinsights-font-face/images/No-02s.jpg" width="700"></a></p> <h3 id="font-faceでfont-awesome-5を指定するときはfont-weightに注意">@font-faceでFont-Awesome 5を指定するときはfont-weightに注意 </h3><p><a class="link" href="https://fontawesome.com/" target="_blank" rel="noopener" >FontAwesome5</a>を使うときは必ず <strong>font-weight:400;</strong> または <strong>font-weight:900;</strong> を指定しないとうまくいきません。<strong>font-weight:normal;とか使うとダメ</strong>です。</p> <p><a class="link" href="https://qwerty.work/blog/2019/03/03/No-03.jpg" ><img class="gallery-image" data-flex-basis="835px" data-flex-grow="348" height="201" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/03/fontawesome-pagespeedinsights-font-face/images/No-03s.jpg" width="700"></a></p> <p>また、ブラウザによっては**@font-face**に対応していないブラウザがあります。</p> <div class="link-card"> <a href="https://caniuse.com/#search=font-display" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://caniuse.com/#search=font-display" alt="https://caniuse.com/#search=font-display" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://caniuse.com/#search=font-display</span> <span class="link-card-url">https://caniuse.com/#search=font-display</span> </div> </a> </div> <h3 id="ついでにpreloadやprefetchで高速化">ついでに「Preload」や「Prefetch」で高速化 </h3><p>対策ついでに以下のコードを～間に入れておくことでページを読み込む間（レンダリングが開始される前）にWEBフォントを事前に読み込んでおくことができます。多少の高速化が図れます。</p> <p><strong>Preload</strong>だけでもいいのですが、<strong>Preload</strong>は一部のブラウザが対応していないので、幅広く対応している<strong>Prefetch</strong>と併用しています。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;preload prefetch&#34;</span> <span style="color:#a6e22e">as</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;font&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;font/woff2&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2&#34;</span> <span style="color:#a6e22e">crossorigin</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;preload prefetch&#34;</span> <span style="color:#a6e22e">as</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;font&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;font/woff2&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2&#34;</span> <span style="color:#a6e22e">crossorigin</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;preload prefetch&#34;</span> <span style="color:#a6e22e">as</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;font&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;font/woff2&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2&#34;</span> <span style="color:#a6e22e">crossorigin</span>&gt; </span></span></code></pre></div><h3 id="参考にしたページ">参考にしたページ </h3> <div class="link-card"> <a href="https://pavelmakhov.com/2018/04/font-awesome-5-in-gwt/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://pavelmakhov.com/2018/04/font-awesome-5-in-gwt/" alt="https://pavelmakhov.com/2018/04/font-awesome-5-in-gwt/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://pavelmakhov.com/2018/04/font-awesome-5-in-gwt/</span> <span class="link-card-url">https://pavelmakhov.com/2018/04/font-awesome-5-in-gwt/</span> </div> </a> </div> <div class="link-card"> <a href="https://coliss.com/articles/build-websites/operation/css/about-font-display.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coliss.com/articles/build-websites/operation/css/about-font-display.html" alt="https://coliss.com/articles/build-websites/operation/css/about-font-display.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coliss.com/articles/build-websites/operation/css/about-font-display.html</span> <span class="link-card-url">https://coliss.com/articles/build-websites/operation/css/about-font-display.html</span> </div> </a> </div> <div class="link-card"> <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja" alt="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja</span> <span class="link-card-url">https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja</span> </div> </a> </div> <div class="link-card"> <a href="https://qiita.com/oreo/items/2e82bfeb42e351557c3c" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/oreo/items/2e82bfeb42e351557c3c" alt="https://qiita.com/oreo/items/2e82bfeb42e351557c3c" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/oreo/items/2e82bfeb42e351557c3c</span> <span class="link-card-url">https://qiita.com/oreo/items/2e82bfeb42e351557c3c</span> </div> </a> </div> <h3 id="後日再発">後日再発 </h3><p>解決したつもりが後日またPageSpeed Insightsで「ウェブフォント読み込み中の全テキストの表示」について警告が出ました。</p> <h4 id="allcssを改造して読込">all.cssを改造して読込 </h4><p>Font-Awesome 5 の** all.css** をCDNからの読み込みではなくローカルに置き、一部を以下のように変更しました。all.cssの最下位部分にあります。2パターンで試したところ、どちらでも警告が出ないようになりました。</p> <p>パターン1 <strong>font-display: Auto;<strong>を</strong>swap</strong>に変更し**、意味はわかりませんがlocal(&quot;@&quot;)**を挿入し、<strong>url</strong>はCDNのパスに変更してしています。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>@<span style="color:#66d9ef">font-face</span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-family</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Font Awesome 5 Brands&#39;</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-style</span><span style="color:#f92672">:</span> <span style="color:#f92672">normal</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-weight</span><span style="color:#f92672">:</span> <span style="color:#f92672">normal</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-display</span><span style="color:#f92672">:</span> <span style="color:#f92672">swap</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">src</span><span style="color:#f92672">:</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot&#34;</span><span style="color:#f92672">);</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">src</span><span style="color:#f92672">:</span> <span style="color:#f92672">local</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;@&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot?#iefix&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;embedded-opentype&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff2&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff2&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.ttf&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;truetype&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.svg#fontawesome&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;svg&#34;</span><span style="color:#f92672">);</span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">fab</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#e6db74">&#39;Font Awesome 5 Brands&#39;</span>; } </span></span><span style="display:flex;"><span> @<span style="color:#66d9ef">font-face</span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-family</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Font Awesome 5 Free&#39;</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-style</span><span style="color:#f92672">:</span> <span style="color:#f92672">normal</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-weight</span><span style="color:#f92672">:</span> <span style="color:#f92672">400</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-display</span><span style="color:#f92672">:</span> <span style="color:#f92672">swap</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">src</span><span style="color:#f92672">:</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot&#34;</span><span style="color:#f92672">);</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">src</span><span style="color:#f92672">:</span> <span style="color:#f92672">local</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;@&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot?#iefix&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;embedded-opentype&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff2&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff2&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.ttf&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;truetype&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.svg#fontawesome&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;svg&#34;</span><span style="color:#f92672">);</span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">far</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#e6db74">&#39;Font Awesome 5 Free&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-weight</span>: <span style="color:#ae81ff">400</span>; } </span></span><span style="display:flex;"><span> @<span style="color:#66d9ef">font-face</span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-family</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Font Awesome 5 Free&#39;</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-style</span><span style="color:#f92672">:</span> <span style="color:#f92672">normal</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-weight</span><span style="color:#f92672">:</span> <span style="color:#f92672">900</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-display</span><span style="color:#f92672">:</span> <span style="color:#f92672">swap</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">src</span><span style="color:#f92672">:</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot&#34;</span><span style="color:#f92672">);</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">src</span><span style="color:#f92672">:</span> <span style="color:#f92672">local</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;@&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot?#iefix&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;embedded-opentype&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff2&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff2&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.ttf&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;truetype&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.svg#fontawesome&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;svg&#34;</span><span style="color:#f92672">);</span> } </span></span></code></pre></div><p>パターン2 パターン1との違いは<strong>local</strong>のパスの部分です。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>@<span style="color:#66d9ef">font-face</span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-family</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Font Awesome 5 Brands&#39;</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-style</span><span style="color:#f92672">:</span> <span style="color:#f92672">normal</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-weight</span><span style="color:#f92672">:</span> <span style="color:#f92672">normal</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-display</span><span style="color:#f92672">:</span> <span style="color:#f92672">swap</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">src</span><span style="color:#f92672">:</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot&#34;</span><span style="color:#f92672">);</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">src</span><span style="color:#f92672">:</span> <span style="color:#f92672">local</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;/webfont/fontawesome-free-5.11.2/package/webfonts/fa-brands-400.woff2&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">,</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot?#iefix&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;embedded-opentype&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff2&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff2&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.ttf&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;truetype&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.svg#fontawesome&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;svg&#34;</span><span style="color:#f92672">);</span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">fab</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#e6db74">&#39;Font Awesome 5 Brands&#39;</span>; } </span></span><span style="display:flex;"><span> @<span style="color:#66d9ef">font-face</span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-family</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Font Awesome 5 Free&#39;</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-style</span><span style="color:#f92672">:</span> <span style="color:#f92672">normal</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-weight</span><span style="color:#f92672">:</span> <span style="color:#f92672">400</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-display</span><span style="color:#f92672">:</span> <span style="color:#f92672">swap</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">src</span><span style="color:#f92672">:</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot&#34;</span><span style="color:#f92672">);</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">src</span><span style="color:#f92672">:</span> <span style="color:#f92672">local</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;/webfont/fontawesome-free-5.11.2/package/webfonts/fa-regular-400.woff2&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot?#iefix&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;embedded-opentype&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff2&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff2&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.ttf&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;truetype&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.svg#fontawesome&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;svg&#34;</span><span style="color:#f92672">);</span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">far</span> { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#e6db74">&#39;Font Awesome 5 Free&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-weight</span>: <span style="color:#ae81ff">400</span>; } </span></span><span style="display:flex;"><span> @<span style="color:#66d9ef">font-face</span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-family</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Font Awesome 5 Free&#39;</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-style</span><span style="color:#f92672">:</span> <span style="color:#f92672">normal</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-weight</span><span style="color:#f92672">:</span> <span style="color:#f92672">900</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">font-display</span><span style="color:#f92672">:</span> <span style="color:#f92672">swap</span><span style="color:#f92672">;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">src</span><span style="color:#f92672">:</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot&#34;</span><span style="color:#f92672">);</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">src</span><span style="color:#f92672">:</span> <span style="color:#f92672">local</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;/webfont/fontawesome-free-5.11.2/package/webfonts/fa-solid-900.woff2&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot?#iefix&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;embedded-opentype&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff2&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff2&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;woff&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.ttf&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;truetype&#34;</span><span style="color:#f92672">),</span> <span style="color:#f92672">url</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.svg#fontawesome&#34;</span><span style="color:#f92672">)</span> <span style="color:#f92672">format</span><span style="color:#f92672">(</span><span style="color:#e6db74">&#34;svg&#34;</span><span style="color:#f92672">);</span> } </span></span></code></pre></div> https://qwerty.work/post/2017/02/particlesjs-particleground/ Sun, 26 Feb 2017 00:41:09 +0900 https://qwerty.work/post/2017/02/particlesjs-particleground/ <p>ドメインの所有者を調べるWhoisサイトの<a class="link" href="http://whois.domaintools.com/" target="_blank" rel="noopener" >domaintools.com</a>を見て気になったマウスカーソルに合わせて動くワイヤーフレームのような幾何学模様のアニメーションについて調べてわかったことをメモ。</p> <p><img class="gallery-image" data-flex-basis="324px" data-flex-grow="135" height="444" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2017/02/particlesjs-particleground/images/No-00.jpg" width="600"></p> <p>「<a class="link" href="https://github.com/VincentGarreau/particles.js/" target="_blank" rel="noopener" >particles.js</a>」というやつらしいです。</p> <p>jQweryやCSSでできるやつかと思って蜘蛛の巣とか、ラインアートとか、ワイヤーフレームとかポリゴンとか組み合わせてかなり検索しましたが見当たらず、<a class="link" href="http://whois.domaintools.com/" target="_blank" rel="noopener" >domaintools.com</a>のソースを見ていると以下のソースが気になりました。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;canvas</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">&#34;spiders&#34;</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;hidden-xs&#34;</span><span style="color:#f92672">&gt;&lt;/canvas&gt;</span> </span></span></code></pre></div><p>そこで<strong>spiders</strong>を検索すると同じように探している方がいるようで海外の質問サイトのページがヒットしました。</p> <div class="link-card"> <a href="http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor" alt="http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor</span> <span class="link-card-url">http://stackoverflow.com/questions/28567642/how-to-create-shapes-around-mouse-cursor</span> </div> </a> </div> <p>ここで<strong>particles.js</strong>ということがわかりました。</p> <h3 id="particlesjs">particles.js </h3> <div class="link-card"> <a href="http://vincentgarreau.com/particles.js/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://vincentgarreau.com/particles.js/" alt="http://vincentgarreau.com/particles.js/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://vincentgarreau.com/particles.js/</span> <span class="link-card-url">http://vincentgarreau.com/particles.js/</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/VincentGarreau/particles.js/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/VincentGarreau/particles.js/" alt="https://github.com/VincentGarreau/particles.js/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/VincentGarreau/particles.js/</span> <span class="link-card-url">https://github.com/VincentGarreau/particles.js/</span> </div> </a> </div> <div class="link-card"> <a href="http://codepen.io/VincentGarreau/pen/pnlso" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://codepen.io/VincentGarreau/pen/pnlso" alt="http://codepen.io/VincentGarreau/pen/pnlso" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://codepen.io/VincentGarreau/pen/pnlso</span> <span class="link-card-url">http://codepen.io/VincentGarreau/pen/pnlso</span> </div> </a> </div> <p><a class="link" href="http://whois.domaintools.com/" target="_blank" rel="noopener" >domaintools.com</a>は少し違う動きをしていますが、多分カスタマイズしているんだと思います。</p> <h4 id="カスタマイズの参考">カスタマイズの参考 </h4> <div class="link-card"> <a href="https://liginc.co.jp/191958" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://liginc.co.jp/191958" alt="https://liginc.co.jp/191958" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://liginc.co.jp/191958</span> <span class="link-card-url">https://liginc.co.jp/191958</span> </div> </a> </div> <div class="link-card"> <a href="https://qiita.com/sapisapi/items/17a1ee6fc539fb104397" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/sapisapi/items/17a1ee6fc539fb104397" alt="https://qiita.com/sapisapi/items/17a1ee6fc539fb104397" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/sapisapi/items/17a1ee6fc539fb104397</span> <span class="link-card-url">https://qiita.com/sapisapi/items/17a1ee6fc539fb104397</span> </div> </a> </div> <h3 id="particleground">Particleground </h3><p><strong>particles.js</strong>と同じような<strong>Particleground</strong>というのも見つけました。</p> <div class="link-card"> <a href="http://jnicol.github.io/particleground/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://jnicol.github.io/particleground/" alt="http://jnicol.github.io/particleground/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://jnicol.github.io/particleground/</span> <span class="link-card-url">http://jnicol.github.io/particleground/</span> </div> </a> </div> <h4 id="カスタマイズの参考-1">カスタマイズの参考 </h4> <div class="link-card"> <a href="https://blog.mismithportfolio.com/web/20150129particleground" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://blog.mismithportfolio.com/web/20150129particleground" alt="https://blog.mismithportfolio.com/web/20150129particleground" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://blog.mismithportfolio.com/web/20150129particleground</span> <span class="link-card-url">https://blog.mismithportfolio.com/web/20150129particleground</span> </div> </a> </div> <h3 id="他にも気になるスクリプトのまとめ">他にも気になるスクリプトのまとめ </h3> <div class="link-card"> <a href="http://www.nxworld.net/tips/background-custom-and-effect-scripts.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://www.nxworld.net/tips/background-custom-and-effect-scripts.html" alt="http://www.nxworld.net/tips/background-custom-and-effect-scripts.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://www.nxworld.net/tips/background-custom-and-effect-scripts.html</span> <span class="link-card-url">http://www.nxworld.net/tips/background-custom-and-effect-scripts.html</span> </div> </a> </div> <div class="link-card"> <a href="http://qiita.com/syui/items/f0baae5cdb4bfd193e35" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://qiita.com/syui/items/f0baae5cdb4bfd193e35" alt="http://qiita.com/syui/items/f0baae5cdb4bfd193e35" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://qiita.com/syui/items/f0baae5cdb4bfd193e35</span> <span class="link-card-url">http://qiita.com/syui/items/f0baae5cdb4bfd193e35</span> </div> </a> </div> <div class="link-card"> <a href="https://ics.media/entry/11172/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://ics.media/entry/11172/" alt="https://ics.media/entry/11172/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://ics.media/entry/11172/</span> <span class="link-card-url">https://ics.media/entry/11172/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.webcreatorbox.com/tech/javascript-particles" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.webcreatorbox.com/tech/javascript-particles" alt="https://www.webcreatorbox.com/tech/javascript-particles" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.webcreatorbox.com/tech/javascript-particles</span> <span class="link-card-url">https://www.webcreatorbox.com/tech/javascript-particles</span> </div> </a> </div> <h4 id="水面に波紋が広がるようなもの">水面に波紋が広がるようなもの </h4><p><a class="link" href="https://jquery.com/" target="_blank" rel="noopener" >jQuery</a>のファイルと<a class="link" href="http://sirxemic.github.io/jquery.ripples/" target="_blank" rel="noopener" >jQuery Ripples</a>のファイルを読み込めばOK。</p> <div class="link-card"> <a href="http://sirxemic.github.io/jquery.ripples/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://sirxemic.github.io/jquery.ripples/" alt="http://sirxemic.github.io/jquery.ripples/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://sirxemic.github.io/jquery.ripples/</span> <span class="link-card-url">http://sirxemic.github.io/jquery.ripples/</span> </div> </a> </div> https://qwerty.work/post/2010/11/syntaxhighlighter/ Mon, 29 Nov 2010 14:49:12 +0900 https://qwerty.work/post/2010/11/syntaxhighlighter/ <h3 id="ソースコードをハイライトしてくれるsyntaxhighlighter">ソースコードをハイライトしてくれる『SyntaxHighlighter』 </h3><p>最近のサイトでよく見るソースコードをきれい装飾して見せるJavascript。自分のホームページにも導入したいと思っていろいろ探して**『SyntaxHighlighter』**というのを見つけました。</p> <h4 id="サンプル">サンプル </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">pre</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;brush:php&#39;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;?</span><span style="color:#a6e22e">php</span> </span></span><span style="display:flex;"><span> $p <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;サンプル&#34;</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">echo</span> $p; </span></span><span style="display:flex;"><span> <span style="color:#75715e">?&gt;</span><span style="color:#960050;background-color:#1e0010"> </span></span></span></code></pre></div><h4 id="作者のページ">作者のページ </h4> <div class="link-card"> <a href="http://alexgorbatchev.com/SyntaxHighlighter/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://alexgorbatchev.com/SyntaxHighlighter/" alt="http://alexgorbatchev.com/SyntaxHighlighter/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://alexgorbatchev.com/SyntaxHighlighter/</span> <span class="link-card-url">http://alexgorbatchev.com/SyntaxHighlighter/</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/syntaxhighlighter" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/syntaxhighlighter" alt="https://github.com/syntaxhighlighter" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/syntaxhighlighter</span> <span class="link-card-url">https://github.com/syntaxhighlighter</span> </div> </a> </div> <h3 id="使い方">使い方 </h3><p>まず<a class="link" href="http://alexgorbatchev.com/SyntaxHighlighter/download/" target="_blank" rel="noopener" ><strong>ダウンロード</strong></a>して適当な場所に保存して解凍します。現在の最新は「<a class="link" href="http://alexgorbatchev.com/SyntaxHighlighter/" target="_blank" rel="noopener" ><strong>SyntaxHighlighter</strong></a>** 3.0.83**」のようです。</p> <h4 id="ダウンロードリンク">ダウンロードリンク </h4><ul> <li><a class="link" href="http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current" target="_blank" rel="noopener" >http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current</a></li> </ul> <p>仮に**「ルートディレクトリ/js/SyntaxHighlighter」**に保存した場合。</p> <p><code>～</code>内に以下を追加</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#75715e">&lt;!--SyntaxHighlighter--&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/css&#34;</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/styles/shCore.css&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- 以下は好きなテーマによって変更する --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;link</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/css&#34;</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/styles/shThemeDefault.css&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shCore.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shAutoloader.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- 以下は装飾したい言語を追加 --&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shBrushCss.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shBrushJScript.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shBrushPhp.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shBrushPlain.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shBrushSql.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shBrushVb.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;/js/SyntaxHighlighter/scripts/shBrushXml.js&#34;</span><span style="color:#f92672">&gt;&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;script</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span>// <span style="color:#75715e">&lt;![CDATA[ </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> SyntaxHighlighter.all(); </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> // ]]&gt;</span><span style="color:#f92672">&lt;/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--SyntaxHighlighter--&gt;</span> </span></span></code></pre></div><p>意外にカンタン&hellip;。</p> <p>その他、</p> <ul> <li><a class="link" href="http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/" target="_blank" rel="noopener" >テーマ</a></li> <li><a class="link" href="http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/" target="_blank" rel="noopener" >言語</a></li> <li><a class="link" href="http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/" target="_blank" rel="noopener" >オプション</a></li> </ul> <p>を指定できるようです。</p> <p>英語の説明ページですが、なんとなくでも理解できました。</p> <p>なんかウレシイ。</p> <h3 id="syntaxhighlighter以外の参考ページ">SyntaxHighlighter以外の参考ページ </h3> <div class="link-card"> <a href="https://qiita.com/ko-he-8/items/b068e431f23b38608fb7" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/ko-he-8/items/b068e431f23b38608fb7" alt="https://qiita.com/ko-he-8/items/b068e431f23b38608fb7" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/ko-he-8/items/b068e431f23b38608fb7</span> <span class="link-card-url">https://qiita.com/ko-he-8/items/b068e431f23b38608fb7</span> </div> </a> </div> https://qwerty.work/post/2009/07/mozshotcss/ Sat, 04 Jul 2009 22:31:24 +0900 https://qwerty.work/post/2009/07/mozshotcss/ <h2 id="サムネイルの周りに文字を回り込ませたい">サムネイルの周りに文字を回り込ませたい </h2><p>指定したURLのサムネイルを簡単に表示できる「<a class="link" href="http://mozshot.nemui.org" target="_blank" rel="noopener" >Mozshot</a>」とCSSを組み合わせて、サイトのサムネイル画像の周りに文字を回り込ませて配置する方法をメモ。リンク集のページなどに便利です。</p> <h3 id="ソース例">ソース例 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;style</span> <span style="color:#a6e22e">type=</span><span style="color:#e6db74">&#34;text/css&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> .imgLeft { float : left ; } /*画像の回り込みの設定*/ </span></span><span style="display:flex;"><span> .clrLeft { clear : both ; } /*文字の回り込みの解除*/ </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/style&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;div</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;clrLeft&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;p</span> <span style="color:#a6e22e">class=</span><span style="color:#e6db74">&#34;imgLeft&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;img</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">&#34;https://image.thum.io/get/width/300/crop/200/http://qwerty.work&#34;</span> <span style="color:#a6e22e">alt=</span><span style="color:#e6db74">&#34;QWERTY.WORK&#34;</span> <span style="color:#f92672">/&gt;</span> </span></span><span style="display:flex;"><span> QWERTY.WORK </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;/p&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/div&gt;</span> </span></span></code></pre></div><h4 id="表示例">表示例 </h4><p>↓↓上記でこうなる↓↓</p> <p>/<em>画像の回り込みの設定</em>/ .imgLeft { float : left ; } /<em>文字の回り込みの解除</em>/ .clrLeft { clear : both ; }</p> <p><img class="gallery-image" data-flex-basis="1440px" data-flex-grow="600" height="50" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://image.thum.io/get/width/300/crop/200/http://qwerty.work" width="300">QWERTY.WORK</p> <h2 id="mozshotはblinkyに変わっていた">MozshotはBlinkyに変わっていた </h2><p>2022/3/22現在、久々に<a class="link" href="http://mozshot.nemui.org" target="_blank" rel="noopener" >Mozshot</a>の公式サイトにアクセスしてみると、<a class="link" href="https://blinky.nemui.org/" target="_blank" rel="noopener" >Blinky</a>という後継サービスに変わっていました。</p> <div class="link-card"> <a href="https://blinky.nemui.org/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://blinky.nemui.org/" alt="https://blinky.nemui.org/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://blinky.nemui.org/</span> <span class="link-card-url">https://blinky.nemui.org/</span> </div> </a> </div> <p>使用方法はほぼ同じです。</p> <div class="link-card"> <a href="https://blinky.nemui.org/usage" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://blinky.nemui.org/usage" alt="https://blinky.nemui.org/usage" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://blinky.nemui.org/usage</span> <span class="link-card-url">https://blinky.nemui.org/usage</span> </div> </a> </div>