HTML入門

同じ要素の並びになっているデザインで左右交互のレイアウトをよく見かけますよね。
方法は色々ありますが今回はHTMLをなるべく汚さないように、 
CSS（Sass）の<code>flexbox</code>と<code>nth-child</code>を使ってかんたんに作る方法をご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E7%B5%90%E6%9E%9C">実装した結果</a>
</li>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
</li>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%A7%A3%E8%AA%AC">実装について解説</a>
<ul>
<li><a href="#flex-direction--row-reverse">flex-direction / row-reverse</a></li>
<li><a href="#nth-child">:nth-child</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実装した結果">実装した結果</h2>
<iframe width="100%" height="300" src="//jsfiddle.net/sandygift/yo9hqkjb/2/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<h2 id="実際のコード">実際のコード</h2>
<pre><code class="hljs language-html">&#x3C;div class="wrap">
 &#x3C;div class="card">
 &#x3C;div class="card-thumbnail">&#x3C;img src="https://placehold.jp/48/eeeeee/212121/300x300.png?text=SAMPLE" alt="SAMPLE" class="card-img">&#x3C;/div>
 &#x3C;p class="card-caption">説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。&#x3C;/p>
 &#x3C;/div>
 &#x3C;div class="card">
 &#x3C;div class="card-thumbnail">&#x3C;img src="https://placehold.jp/48/eeeeee/212121/300x300.png?text=SAMPLE" alt="SAMPLE" class="card-img">&#x3C;/div>
 &#x3C;p class="card-caption">説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。&#x3C;/p>
 &#x3C;/div>
 &#x3C;div class="card">
 &#x3C;div class="card-thumbnail">&#x3C;img src="https://placehold.jp/48/eeeeee/212121/300x300.png?text=SAMPLE" alt="SAMPLE" class="card-img">&#x3C;/div>
 &#x3C;p class="card-caption">説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。&#x3C;/p>
 &#x3C;/div>
&#x3C;/div></code></pre>
<pre><code class="hljs language-scss">.card {
 &#x26; {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 600px;
 margin: 0 auto 32px;
 &#x26;:nth-child(even) {
 flex-direction: row-reverse;
 }
 }
 &#x26;-thumbnail {
 width: 150px;
 }
 &#x26;-img {
 width: 100%;
 display: block;
 }
 &#x26;-caption {
 width: 430px;
 font-size: 16px;
 line-height: 1.5;
 }
}</code></pre>
Sassを使わずにCSSで記述する場合は以下のとおりです。
<pre><code class="hljs language-css">.card {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 600px;
 margin: 0 auto 32px;
}

.card-thumbnail {
 width: 150px;
}

.card-img {
 width: 100%;
 display: block;
}

.card-caption {
 width: 430px;
 font-size: 16px;
 line-height: 1.5;
}


/* 偶数番目に登場する.cardは右から左に要素が配置されるようにする */

.card:nth-child(even) {
 flex-direction: row-reverse;
}</code></pre>
<h2 id="実装について解説">実装について解説</h2>
<h3 id="flex-direction--row-reverse">flex-direction / row-reverse</h3>
CSSで<code>display:flex</code>を指定した要素はflexコンテナーとなり 
子要素に対してレイアウト位置を指定するプロパティが利用可能になります。
そのうちのひとつが<code>flex-direction</code>です。
通常、HTMLの要素は左上を基点として左から右へ、 
上から下へ並べられていく仕様になってますよね。
この<code>flex-direction</code>に<code>row-reverse</code>という値を指定すると 
反対の流れ、つまり右からスタートして左へ順番に配置されていきます
<h3 id="nth-child">:nth-child</h3>
CSSの指定を行う場合は一般的にclassを付与して、 
そこに対してプロパティと値をセットしていきます。
例えば同じHTMLの構造を持つ要素のうち2番目に登場するものだけ 
見た目を変更したいケースであれば、専用のclassを付与する方法でも実現可能です。
ですが、HTML側の記述が増えることは可読性の低下にも繋がりますので 
なるべくそれを避ける方法として今回<code>nth-child</code>という疑似要素を利用しました。
これによって兄弟要素の中で何番目という指定が可能になります。 
単純ではないケースもありますが基本は以下の考え方です。
<pre><code class="hljs language-html">&#x3C;div class="card">
 &#x3C;p>私は長男です。&#x3C;/p>&#x3C;!-- p:nth-child(1) or p:first-child -->
 &#x3C;p>私は次男です。&#x3C;/p>&#x3C;!-- p:nth-child(2) -->
 &#x3C;p>私は三男です。&#x3C;/p>&#x3C;!-- p:nth-child(3) or p:last-child -->
&#x3C;/div></code></pre>
今回のサンプルコードでは数値で指定せずに<code>even</code>とすることで 
偶数番目のものにすべて適用という指定の方法をとっています。
ちなみに奇数の場合は<code>odd</code>になります。
<h2 id="最後に">最後に</h2>
製品や説明において画像と組み合わせたデザインとして 
よく使われるレイアウトの実装方法をご紹介しました。
<code>flexbox</code>は奥が深いですが、使い慣れるとレイアウトが非常にかんたんになります。 
今回のコードが参考になれば幸いです。

左右交互のレイアウトをCSS（flexbox）を使ってかんたんに作る方法

HTML5でWebページを作る場合の基本テンプレート【2020年版】

執筆時点でのiOSのバージョン（13.4.1）では、 
キャッシュを無視したスーパーリロードをパソコンのように行うことはできません。
ただし、Apple標準アプリであるショートカットアプリとJavaScriptを使えば、 
iPhoneでも強制的にスーパーリロードを行うことが可能です。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#iphone%E3%81%A7%E3%82%B9%E3%83%BC%E3%83%91%E3%83%BC%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89%E3%82%92%E8%A1%8C%E3%81%86%E3%81%9F%E3%82%81%E3%81%AE%E6%BA%96%E5%82%99">iPhoneでスーパーリロードを行うための準備</a>
<ul>
<li><a href="#%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E8%B5%B7%E5%8B%95">ショートカットアプリを起動</a></li>
<li><a href="#%E3%80%90%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%80%91%E3%82%92%E3%82%BF%E3%83%83%E3%83%97">【ショートカットを作成】をタップ</a></li>
<li><a href="#%E3%80%90%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%80%91%E3%82%92%E3%82%BF%E3%83%83%E3%83%97">【アクションを追加】をタップ</a></li>
<li><a href="#%E3%80%90web%E3%80%91%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E3%82%BF%E3%83%83%E3%83%97">【Web】のアイコンをタップ</a></li>
<li><a href="#%E3%80%90web%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%A7javascript%E3%82%92%E5%AE%9F%E8%A1%8C%E3%80%91%E3%82%92%E3%82%BF%E3%83%83%E3%83%97">【WebページでJavaScriptを実行】をタップ</a></li>
<li><a href="#javascript%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89%E3%82%92%E5%AE%9F%E8%A3%85">JavaScriptでページのリロードを実装</a></li>
<li><a href="#%E5%8F%B3%E4%B8%8A%E3%81%AE%E4%B8%89%E7%82%B9%E3%83%AA%E3%83%BC%E3%83%80%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E3%82%BF%E3%83%83%E3%83%97">右上の三点リーダボタンをタップ</a></li>
<li><a href="#%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E5%90%8D%E5%89%8D%E3%80%81%E3%80%90%E5%85%B1%E6%9C%89%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%80%91%E3%82%92%E3%82%AA%E3%83%B3%E3%81%AB%E5%A4%89%E6%9B%B4%E3%80%81%E5%85%B1%E6%9C%89%E3%82%B7%E3%83%BC%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%82%92%E3%80%90safari%E3%81%AEweb%E3%83%9A%E3%83%BC%E3%82%B8%E3%80%91%E3%81%A8%E3%81%99%E3%82%8B">アクションの名前、【共有シートに表示】をオンに変更、共有シートタイプを【SafariのWebページ】とする</a></li>
</ul>
</li>
<li>
<a href="#iphone%E3%81%A7%E5%AE%9F%E9%9A%9B%E3%81%AB%E3%82%B9%E3%83%BC%E3%83%91%E3%83%BC%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89%E3%82%92%E8%A1%8C%E3%81%86">iPhoneで実際にスーパーリロードを行う</a>
<ul>
<li><a href="#%E5%AF%BE%E8%B1%A1%E3%81%A8%E3%81%AA%E3%82%8Bweb%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92safari%E3%81%A7%E9%96%8B%E3%81%84%E3%81%A6%E3%81%84%E3%82%8B%E7%8A%B6%E6%85%8B%E3%81%A7%E3%80%81%E7%94%BB%E9%9D%A2%E4%B8%8B%E9%83%A8%E3%81%AE%E5%85%B1%E6%9C%89%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E3%82%BF%E3%83%83%E3%83%97">対象となるWebページをSafariで開いている状態で、画面下部の共有ボタンをタップ</a></li>
<li><a href="#%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%B8%AD%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%80%90%E3%82%B9%E3%83%BC%E3%83%91%E3%83%BC%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89%E3%80%91%E3%82%92%E3%82%BF%E3%83%83%E3%83%97">アクションの中に追加されている【スーパーリロード】をタップ</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="iphoneでスーパーリロードを行うための準備">iPhoneでスーパーリロードを行うための準備</h2>
<h3 id="ショートカットアプリを起動">ショートカットアプリを起動</h3>
<img src="/img/snippet/post/super-reload-step1.png" alt="iPhoneのショートカットアプリアイコン">
<h3 id="【ショートカットを作成】をタップ">【ショートカットを作成】をタップ</h3>
<img src="/img/snippet/post/super-reload-step2.png" alt="iPhoneのショートカットアプリアイコン">
<h3 id="【アクションを追加】をタップ">【アクションを追加】をタップ</h3>
<img src="/img/snippet/post/super-reload-step3.png" alt="iPhoneのショートカットアプリアイコン">
<h3 id="【web】のアイコンをタップ">【Web】のアイコンをタップ</h3>
<img src="/img/snippet/post/super-reload-step4.png" alt="iPhoneのショートカットアプリアイコン">
<h3 id="【webページでjavascriptを実行】をタップ">【WebページでJavaScriptを実行】をタップ</h3>
<img src="/img/snippet/post/super-reload-step5.png" alt="iPhoneのショートカットアプリアイコン">
<h3 id="javascriptでページのリロードを実装">JavaScriptでページのリロードを実装</h3>
<img src="/img/snippet/post/super-reload-step6.png" alt="iPhoneのショートカットアプリアイコン">
<h3 id="右上の三点リーダボタンをタップ">右上の三点リーダボタンをタップ</h3>
<img src="/img/snippet/post/super-reload-step7.png" alt="iPhoneのショートカットアプリアイコン">
<h3 id="アクションの名前、【共有シートに表示】をオンに変更、共有シートタイプを【safariのwebページ】とする">アクションの名前、【共有シートに表示】をオンに変更、共有シートタイプを【SafariのWebページ】とする</h3>
<img src="/img/snippet/post/super-reload-step8.png" alt="iPhoneのショートカットアプリアイコン">
ここまでの手順でiPhoneのSafariを使ってスーパーリロードを行うための準備が整います。
<h2 id="iphoneで実際にスーパーリロードを行う">iPhoneで実際にスーパーリロードを行う</h2>
<h3 id="対象となるwebページをsafariで開いている状態で、画面下部の共有ボタンをタップ">対象となるWebページをSafariで開いている状態で、画面下部の共有ボタンをタップ</h3>
<img src="/img/snippet/post/super-reload-step9.png" alt="iPhoneのショートカットアプリアイコン">
<h3 id="アクションの中に追加されている【スーパーリロード】をタップ">アクションの中に追加されている【スーパーリロード】をタップ</h3>
<img src="/img/snippet/post/super-reload-step10.jpg" alt="iPhoneのショートカットアプリアイコン">
初めて開いたページの場合は、そのWebページに対してアクションがアクセスすることを 
許可するかどうか確認が表示しますので、許可をタップすることで実行されます。
<h2 id="最後に">最後に</h2>
特にWebの開発業務に関わっていると開発中はキャッシュの更新が意外と手間になりますので、 
そういった場合には重宝するかと思います。
ブックマークレットでも同様の対応が可能と思いますが、 
今回はショートカットアプリでの実装をご紹介しました。
参考になれば幸いです。

iPhoneでスーパーリロードを可能にするショートカット

三角形や斜めの背景デザインなどの多角形をCSSで再現する場合は 
<code>border</code>や疑似要素を使った方法が一般的で、<a href="/snippet/css-border-slanted-design/">こちらの記事</a>でもご紹介しております。
時代は流れて、最近ではIE11のサポート終了に伴いモダンブラウザを対象とした 
CSSのプロパティを採用することができるようになってきました。
今回は要素を任意の形で手軽に切り抜ける<code>clip-path</code>を使って、 
三角形および斜めの背景デザインを手軽に再現する方法をご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E7%B5%90%E6%9E%9C">実装した結果</a>
<ul>
<li><a href="#%E4%B8%89%E8%A7%92%E5%BD%A2">三角形</a></li>
<li><a href="#%E6%9E%A0%E7%B7%9A%E4%BB%98%E3%81%8D%E3%81%AE%E4%B8%89%E8%A7%92%E5%BD%A2">枠線付きの三角形</a></li>
<li><a href="#%E8%83%8C%E6%99%AF%E8%A6%81%E7%B4%A0%E3%82%92%E6%96%9C%E3%82%81%E3%81%AB%E5%88%87%E3%82%8A%E6%8A%9C%E3%81%84%E3%81%9F%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">背景要素を斜めに切り抜いたデザイン</a></li>
</ul>
</li>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A8%E8%A7%A3%E8%AA%AC">実際のコードと解説</a>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#clip-path-polygon%E3%81%AE%E8%80%83%E3%81%88%E6%96%B9">clip-path: polygonの考え方</a></li>
<li><a href="#%E6%9E%A0%E7%B7%9A%EF%BC%88border%EF%BC%89%E3%81%AF%E6%8C%87%E5%AE%9A%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84">枠線（border）は指定できない</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実装した結果">実装した結果</h2>
<h3 id="三角形">三角形</h3>
<iframe width="100%" height="300" src="//jsfiddle.net/sandygift/9mc830L7/6/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<h3 id="枠線付きの三角形">枠線付きの三角形</h3>
<iframe width="100%" height="300" src="//jsfiddle.net/sandygift/zkoyrxqn/159/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<h3 id="背景要素を斜めに切り抜いたデザイン">背景要素を斜めに切り抜いたデザイン</h3>
<iframe width="100%" height="300" src="//jsfiddle.net/sandygift/u4k8cqas/15/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<h2 id="実際のコードと解説">実際のコードと解説</h2>
HTMLおよびCSSそれぞれのコードは以下のとおりです。
<h3 id="html">HTML</h3>
サンプルでは単一の要素に対してCSSを設定していますので、 
それぞれひとつの<code>div</code>のみで構成しています。
<pre><code class="hljs language-html">&#x3C;div class="triangle">&#x3C;/div>
&#x3C;div class="border-triangle">&#x3C;/div>
&#x3C;div class="slanted">&#x3C;/div></code></pre>
<h3 id="css">CSS</h3>
Sassの環境がない方も利用できるようにCSSでご紹介します。
<pre><code class="hljs language-css">/* 通常の三角形
-----------------------------------------*/
.triangle {
 width: 200px;// 三角形の横幅
 height: 200px;// 三角形の高さ
 background: #fff;// 三角形の色
 -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);// ベンダープレフィックス
 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);// 切り抜く形（三角形）
}

/* 枠線付きの三角形
-----------------------------------------*/
.border-triangle {
 width: 200px;// 枠線含めた三角形の横幅
 height: 200px;//枠線含めた三角形の高さ
 position: relative;
 background: #fff;// 枠線の色
 -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);// 切り抜く形（三角形）
}
.border-triangle:after {
 content: "";
 width: 100%;
 height: 100%;
 display: block;
 position: absolute;
 bottom: -3.8933333333px;// 枠線サイズふまえた縮小率に対する位置の調整
 background: #ff0000;
 transform:scale(0.9473777778);// 枠線サイズふまえた縮小率
 -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);// 切り抜く形（三角形）
}

/* 背景を斜めに切り抜いたデザイン
-----------------------------------------*/
.slanted {
 height: 200px;
 background: #ccc;
 -webkit-clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%);
 clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%);// 切り抜く形（平行四辺形）
}</code></pre>
<h3 id="clip-path-polygonの考え方">clip-path: polygonの考え方</h3>
今回切り抜きに利用した<code>clip-path:polygon()</code>については、 
x軸とy軸のセットでポイントの位置を指定する考え方になっています。
<pre><code class="hljs language-css">.triangle {
 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 // polygon( ポイント1のx軸 y軸, ポイント2のx軸 y軸, ポイント3のx軸 y軸 )
 // ポイントのスタート地点(0, 0)は左上
 // x軸の値を増やすと右に移動し、y軸の値を増やすと下に移動する
 // 「三」角形なのでx軸とy軸を指定するポイントは3つ
}</code></pre>
この仕様をふまえて三角形の向きを変えたいくつかのパターンを以下にご紹介します。
<pre><code class="hljs language-css">.triangle-top {
 clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.triangle-top-right {
 clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.triangle-right {
 clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.triangle-bottom-right {
 clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.triangle-bottom {
 clip-path: polygon(100% 0, 50% 100%, 0 0);
}
.triangle-bottom-left {
 clip-path: polygon(100% 100%, 0 100%, 0 0);
}
.triangle-left {
 clip-path: polygon(100% 100%, 0 50%, 100% 0);
}
.triangle-top-left {
 clip-path: polygon(0 100%, 0 0, 100% 0);
}</code></pre>
今回は三角形を例にご紹介しましたが、四角形であればポイントを4つ指定、 
五角形であればポイントを5つ指定という考え方でCSSのみを使った自由な切り抜きが可能です。
<h3 id="枠線（border）は指定できない">枠線（border）は指定できない</h3>
切り抜いた要素に対してその形に沿った枠線（<code>border</code>）を指定することはできず、 
その場合はひとまわり小さい要素を重ねるなどの工夫が必要となります。
サンプルで示した枠線付きの三角形は<code>after</code>要素でひとまわり小さい三角形の中身を作成し、 
重ね合わせることで枠線を再現しています。
計算式が少し複雑で希望する<code>border-width</code>に応じた縮小率を指定するのは効率が悪いため、 
Sassを導入できる方は以下のような<code>mixin</code>を用意しておくことをオススメいたします。
<pre><code class="hljs language-scss">/* 枠線付き三角形を作るためのmixin
-----------------------------------------*/
@mixin borderTriangle($bgColor: #fff, $borderColor: #000, $w: 200, $h: 200, $borderSize: 12) {
 $scale: (($w - ($borderSize * 2)) * ($h - ($borderSize * 2)) / 2) / ($w * $h / 2);// 縮小率
 $bottom: ($h - ($h * $scale)) / 2 - $borderSize;// 縮小率をもとにした位置の調整
 &#x26; {
 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 width: #{$w}px;
 height: #{$h}px;
 background: $borderColor;
 position: relative;
 }
 &#x26;:after {
 content: "";
 display: block;
 position: absolute;
 bottom: -#{$bottom}px;
 width: 100%;
 height: 100%;
 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 background: $bgColor;
 transform:scale($scale);
 }
}

/* 実際に利用する
-----------------------------------------*/
.border-triangle {
 @include borderTriangle($bgColor: #ff0000, $borderColor: #fff, $w: 200, $h: 200, $borderSize: 4);
 // 背景色、枠線色、横幅、高さ、枠線のサイズ
}</code></pre>
<h2 id="最後に">最後に</h2>
フロントエンドでWEBサイトの制作をしているとクロスブラウザの観点で、 
プロジェクト毎にどのCSSプロパティを採用できるかという選定が変わってきます。
モダンブラウザに向けた比較的新しいCSSプロパティは様々なデザインを 
手軽に再現できる便利なものも多いです。
CSSで一般的な図形を再現できると色やサイズの調整も手軽に行えるため、 
今回ご紹介した<code>clip-path</code>プロパティが採用できると制作効率は上がると思います。
是非参考になれば幸いです。

【CSS】三角形や斜めの背景デザインをCSSのclip-pathプロパティで手軽に再現する

WEBサイトを制作する際、CSSについては外部ファイルとして参照することが一般的です。
その場合はブラウザ側でキャッシュが働いてくれるのですが、 
CSSを更新したのに反映しないという開発中には不便な状況に陥ることが多いです。
都度スーパーリロードを行いキャッシュをクリアすることもできるのですが、 
クライアントからご依頼をいただいている場合などは毎回その点を説明し、 
お手数をおかけするのもメリットが無いですよね。
同じ参照ファイルであることがキャッシュのフックになっていますので、 
一般的な対策として参照するCSSファイル名にクエリを付ける方法があります。
今回はWordPressを想定して基本的にはキャッシュを活かしたまま、 
CSSファイルを更新した場合に限りファイルの更新日がクエリとして付与されるコードを 
ご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A8%E8%A7%A3%E8%AA%AC">実際のコードと解説</a>
<ul>
<li><a href="#functionsphp">functions.php</a></li>
<li><a href="#filemtime">filemtime</a></li>
<li><a href="#wp_enqueue_style">wp_enqueue_style</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実際のコードと解説">実際のコードと解説</h2>
<h3 id="functionsphp">functions.php</h3>
テーマによってCSSの読み込み方法が異なりますが、 
一般的には<code>functions.php</code>で<code>wp_enqueue_style</code>を利用して 
テーマのスタイルシートを読み込む方法が推奨されます。
オリジナルテーマで開発中の場合は以下のコードを流用いただき、 
<code>style.css</code>を読み込むようにしていただければ問題ありません。
<pre><code class="hljs language-php">/* ファイルの更新日を取得
-------------------------------------------------------------------*/
if ( !function_exists( 'get_file_date' ) ):
	function get_file_date($file_name){
		if (file_exists($file_name)) {
			return date('Y-m-d-His', filemtime($file_name));
		}
	}
endif;

/* テーマにstyle.cssを追加
-----------------------------------------*/
if ( !function_exists( 'add_theme_style_sheet' ) ):
	function add_theme_style_sheet(){
 wp_enqueue_style('style',get_stylesheet_uri(), array(), get_file_date(get_stylesheet_directory().'/style.css'));
	}
endif;
add_action('wp_enqueue_scripts', 'add_theme_style_sheet');</code></pre>
<h3 id="filemtime">filemtime</h3>
PHPの関数である<a href="https://www.php.net/manual/ja/function.filemtime.php" target="_blank" rel="nofollow noopener noreferrer">filemtime</a>を利用して<code>style.css</code>の更新日を取得しています。
今回のサンプルでは<code>style.css</code>以外のファイルでも流用できるように、 
オリジナルの関数として<code>get_file_date</code>を定義し、日付の形式で返すようにしています。
また、ファイルの有無を<a href="https://www.php.net/manual/ja/function.file-exists.php" target="_blank" rel="nofollow noopener noreferrer">file_exists</a>で確認し、 
ファイルが存在する場合のみ値を返すようにしました。
<h3 id="wp_enqueue_style">wp_enqueue_style</h3>
WordPressでは外部のCSSファイルやJavaScriptファイルを読み込むための関数として、 
<a href="https://developer.wordpress.org/reference/functions/wp_enqueue_style/" target="_blank" rel="nofollow noopener noreferrer">wp_enqueue_style</a>や<a href="https://developer.wordpress.org/reference/functions/wp_enqueue_script/" target="_blank" rel="nofollow noopener noreferrer">wp_enqueue_script</a>が用意されています。
これらの関数を利用することで複数のファイルを読み込む場合にも依存関係を整理し 
安全にサイトに外部ファイルを追加することができます。
最終的にこれらの関数を利用してサイトに追加するには 
<a href="https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/" target="_blank" rel="nofollow noopener noreferrer">wp_enqueue_scripts</a>のフック（イベントに対するトリガー）に関数を登録します。 
<h2 id="最後に">最後に</h2>
サイトの高速化に対してキャッシュは重要なものですが、 
更新と同時にキャッシュもクリアされていることが理想ですよね。
今回はWordPressを前提としてサンプルをご紹介しましたが、 
単純な静的サイトでもクエリを付与すれば理屈は同じですので参考になれば幸いです。

【WordPress】【CSS】テーマのCSSを更新した際に古いキャッシュを参照せずページを表示するテクニック

サイトパフォーマンス（速度）を改善することは 
UX（サイトを訪れるユーザーの体験）の観点からも重要な対応となります。
そのサイトパフォーマンスを計測するためのツールとしては様々ありますが、 
代表的なものにGoogleが提供する<a href="https://developers.google.com/speed/pagespeed/insights/?hl=ja" target="_blank" rel="nofollow noopener noreferrer">PageSpeed Insights</a>があります。
ユーザーへの最適化という意味ではコンテンツが最も重要ではあるものの、 
PageSpeed Insightsのスコアもサイト運営者にとって気になる指標のひとつです。
ただ、サイトのコンテンツのひとつとして、 
TwitterやFacebookなどSNSの埋め込みプラグインをしている場合、 
特にモバイルにおいてはこのスコアは大幅に低くなる傾向があります。
今回はTwitterとFacebookの埋め込みエリアが可視範囲に入った時に初めて読み込みを行うことで、 
サイトパフォーマンスとスコアを改善する方法をご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A8%E8%A7%A3%E8%AA%AC">実際のコードと解説</a>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#javascript">JavaScript</a></li>
<li><a href="#facebook-%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3">Facebook ページプラグイン</a></li>
<li><a href="#twitter-publish">Twitter Publish</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実際のコードと解説">実際のコードと解説</h2>
<h3 id="html">HTML</h3>
サンプルとなるHTMLのコードはコンテンツの配置場所としての役割を持っています。 
埋め込む内容はあとから呼び出されますので初期状態の中身は空です。
<pre><code class="hljs language-html">&#x3C;div id="js-sns">
	&#x3C;div class="load-twitter">&#x3C;/div>
	&#x3C;div class="load-facebook">&#x3C;/div>
&#x3C;/div></code></pre>
<h3 id="javascript">JavaScript</h3>
サンプルで用意したHTMLの要素に対して 
JavaScriptで動的にコンテンツを呼び出す処理をします。
<pre><code class="hljs language-js">// Facebook ページプラグインページのコード取得 ステップ2からscriptタグを削除し貼り付け および ステップ3のHTML。以下は例。
const fbHTML = '&#x3C;div id="fb-root">&#x3C;/div>&#x3C;div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">&#x3C;blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore">&#x3C;a href="https://www.facebook.com/facebook">Facebook&#x3C;/a>&#x3C;/blockquote>&#x3C;/div>';

// Twitter Publishで作成したコードからscriptタグを削除。以下は例。
const twHTML = '&#x3C;a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev&#x3C;/a>';

// Facebook ページプラグインのコード取得 ステップ2のscriptタグからsrc属性の値を入力
const fbJs = document.createElement('script');
fbJs.src = "https://connect.facebook.net/〜〜〜";
fbJs.crossorigin = "anonymous";

// Twitter Script
const twJs = document.createElement('script');
twJs.src = "https://platform.twitter.com/widgets.js";
twJs.charset = "utf-8";

// 埋め込み先の要素を取得
const fb = document.querySelector(".load-facebook");
const tw = document.querySelector(".load-twitter");

// 重複して呼び出し処理をしないようにフラグで管理
let loaded = false;

if (window.matchMedia( "(min-width: 768px)" ).matches) {
	// ウィンドウの幅が768px以上の場合はすぐにロード（PCの場合は遅延読み込みをしない）
	fb.insertAdjacentHTML("beforebegin" ,fbHTML);
	tw.insertAdjacentHTML("beforebegin" ,twHTML);
	fb.appendChild(fbJs);
	tw.appendChild(twJs);
	loaded = true;
} else {
	// ウィンドウの幅が768px未満の場合はスクロール監視 | 可視範囲に入ったらロード（SPの場合は遅延読み込みをする）
	const loadTarget = document.querySelector("#js-sns");
	const loadOption = {
		root: null,
		rootMargin: "0px",
		threshold: 0
	};
	const targets = (entries) => {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				if(!loaded) {
					fb.insertAdjacentHTML("beforebegin" ,fbHTML);
					tw.insertAdjacentHTML("beforebegin" ,twHTML);
					fb.appendChild(fbJs);
					tw.appendChild(twJs);
					loaded = true;	
				}
			}
		});
	};
	const loadObserver = new IntersectionObserver(targets, loadOption);
	loadObserver.observe(loadTarget);
}</code></pre>
<h3 id="facebook-ページプラグイン">Facebook ページプラグイン</h3>
Facebookの埋め込み用コードを取得するには<a href="https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP" target="_blank" rel="nofollow noopener noreferrer">Facebookページプラグイン</a>を利用します。
ここで取得したコードをHTMLとしてそのまま貼り付けるのではなく、 
JavaScriptで動的に挿入することで遅延読み込みを実現しています。
<img src="/img/snippet/post/lazy-load-sns-facebook.png" alt="Facebook ページプラグインのコード取得画面">
取得したコードのステップ2内にある<code>&#x3C;div id="fb-root">&#x3C;/div></code>と 
ステップ3内にある<code>&#x3C;div class="fb-page"〜〜〜</code>のHTML部分、 
および<code>&#x3C;script></code>タグの<code>src</code>属性で指定された部分をそれぞれ分割しています。
<h3 id="twitter-publish">Twitter Publish</h3>
Twitterの埋め込み用コードは<a href="https://publish.twitter.com/#" target="_blank" rel="nofollow noopener noreferrer">Twitter Publish</a>を利用します。 
Facebookと同様の考え方で取得したコードから<code>script</code>タグとHTMLタグを分割しています。
<img src="/img/snippet/post/lazy-load-sns-twitter.png" alt="Twitter Publishのコード取得画面">
<h2 id="最後に">最後に</h2>
PageSpeed Insightsのスコアはサイトにとってのすべてではなく、 
あくまでもUX改善やSEO対策におけるひとつの要素でしかありません。
サイトにとって重要なコンテンツ作成に注力できず今回のような事例でもしお困りでしたら、 
ご紹介したコードがお役に立てば幸いです。

【JavaScript】TwitterやFacebookの埋め込みを遅延読み込みしPageSpeed Insightsのスコアを改善する

スマホのハンバーガーメニューなど特にスマホ向けのデザインで 
ボタンをクリックすることで表示するメニューのご紹介です。
ポイントとなるのはボタンをクリックするとメニューが表示することに加えて、 
ボタン以外をクリックした場合にはメニューが非表示になるという仕様です。
JavaScriptでこれを実現する場合、<code>closest</code>メソッドを利用することで 
比較的かんたんに実現できます。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E7%B5%90%E6%9E%9C">実装した結果</a>
</li>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A8%E8%A7%A3%E8%AA%AC">実際のコードと解説</a>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#javascript">JavaScript</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実装した結果">実装した結果</h2>
<iframe width="100%" height="300" src="//jsfiddle.net/sandygift/zehmstca/1/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<h2 id="実際のコードと解説">実際のコードと解説</h2>
HTMLとCSSはサンプルとなりますので、適宜調整していただく想定です。
<h3 id="html">HTML</h3>
<pre><code class="hljs language-html">&#x3C;button type="button" class="btn">ボタン&#x3C;/button>
&#x3C;nav class="nav">
	&#x3C;ul>
		&#x3C;li>&#x3C;a href="#1">MENU1&#x3C;/a>&#x3C;/li>
		&#x3C;li>&#x3C;a href="#2">MENU2&#x3C;/a>&#x3C;/li>
		&#x3C;li>&#x3C;a href="#3">MENU3&#x3C;/a>&#x3C;/li>
	&#x3C;/ul>
&#x3C;/nav></code></pre>
<h3 id="css">CSS</h3>
<pre><code class="hljs language-css">/* 最初は非表示、activeクラス付与でフェードイン
-----------------------------------------*/
.nav {
	opacity: 0;
	pointer-events: none;
	transition : all .5s ease 0s;
}
.nav.active {
	opacity: 1;
	pointer-events: auto;
}
.btn {
	cursor: pointer;
}</code></pre>
<h3 id="javascript">JavaScript</h3>
仕様は以下のとおりです。
<ul>
<li>ボタンをクリックするとメニューへ<code>active</code>クラスを付与</li>
<li>ボタン以外をクリックするとメニューから<code>active</code>クラスを削除</li>
<li>ボタンをクリックした際に<code>active</code>がある場合もクラスを削除</li>
</ul>
<pre><code class="hljs language-js">const nav = document.querySelector(".nav");
document.addEventListener("click", (e) => {
	if(e.target.closest(".btn")) {
		nav.classList.contains("active") ? nav.classList.remove("active") : nav.classList.add("active");
	} else {
		nav.classList.remove("active");
	}
});</code></pre>
<h4 id="closest">closest</h4>
その名の通り指定したセレクターに対して最も近いノードを探すメソッドが<code>closest</code>です。
クリックのイベント範囲を<code>document</code>とし、クリックイベントが発生した際に、 
ターゲット内にボタンとなる要素があるかで処理を分岐しています。
また、クラスの操作については<code>classList</code>を利用することで、 
クラスの付与（<code>add</code>）、クラスの削除（<code>remove</code>）、 
クラスを持っているかの判定（<code>contains</code>）を行っています。
<h2 id="最後に">最後に</h2>
スマホのように横幅の小さな端末ではメニューをすべて表示することが難しく 
スライドメニューやハンバーガーメニュー、オーバーレイなどを実装することが多いです。
サンプルとなるためHTMLとCSSは単純なものとしましたが、 
JavaScriptのサンプルコードを参考にご自身のプロジェクトにあわせて 
適宜調整いただければ幸いです。

【JavaScript】ボタンをクリックしたら表示し、ボタン以外の箇所をクリックすると非表示になるメニュー

動きのあるWEBデザインのアニメーションとして、 
該当の要素まで「スクロールすると発火するイベント」はよく利用されます。
また、パフォーマンスの観点で画像の遅延読み込み（lazy-load）を行う場合も同様です。
今回はGooglebotも認識ができGoogle検索で推奨しているIntersection Observer APIを利用して 
スクロールで発火するイベント（コンテンツの遅延読み込み）を実装する方法をご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E7%B5%90%E6%9E%9C">実装した結果</a>
</li>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A8%E8%A7%A3%E8%AA%AC">実際のコードと解説</a>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#javascript">JavaScript</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実装した結果">実装した結果</h2>
<iframe width="100%" height="300" src="//jsfiddle.net/sandygift/1m0qo2a4/4/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<h2 id="実際のコードと解説">実際のコードと解説</h2>
HTML、CSS、およびJavaScriptのそれぞれのコードは以下のとおりです。
<h3 id="html">HTML</h3>
フェードインのためのサンプル要素になります。 
監視対象の目印として<code>animation-fade</code>という名称でクラスを付与しています。
<pre><code class="hljs language-html">&#x3C;div class="box animation-fade">
 &#x3C;p>フェードイン&#x3C;/p>
&#x3C;/div>
&#x3C;div class="box animation-fade">
 &#x3C;p>フェードイン&#x3C;/p>
&#x3C;/div>
&#x3C;div class="box animation-fade">
 &#x3C;p>フェードイン&#x3C;/p>
&#x3C;/div>
&#x3C;div class="box animation-fade">
 &#x3C;p>フェードイン&#x3C;/p>
&#x3C;/div></code></pre>
<h3 id="css">CSS</h3>
Sassの環境がない方も利用できるようにCSSでご紹介します。
サンプルのための標準スタイルとアニメーションはCSSで定義しています。 
スクロールして条件が整った場合にはJavaScriptで<code>active</code>クラスを付与し、 
フェードインするアニメーションが実行されるようにしています。
<pre><code class="hljs language-css">/* サンプルのための標準のスタイル
-----------------------------------------*/
.box {
 height: 500px;
 padding: 1em;
 margin: 0;
 background-color: #f7f7f7;
}
.box:nth-of-type(even) {
 background-color: #212121;
 color: #fff;
}
p {
 margin: 0;
 font-size: 24px;
 font-weight: bold;
 letter-spacing: 1px
}

/* サンプルのためのアニメーション
-----------------------------------------*/
.animation-fade {
 opacity: 0;
}
.animation-fade.active {
 animation: fadein 1s ease-in-out forwards;
}
@keyframes fadein{
	0%{
		opacity: 0;
		transform: translateX(20px);
	}
	50% {
		opacity: 0;
		transform: translateX(20px);
	}
	100%{
		opacity: 1;
		transform: translateX(0);
	}
}</code></pre>
<h3 id="javascript">JavaScript</h3>
解説はコードのコメントで記載していますが、 
Intersection Observer APIを利用して監視対象を登録し、 
オプション、スクロール後に実行される関数を引数として渡しています。
サンプルはブラウザのビューポートの中央に対象要素が交差した瞬間、 
対象要素へ<code>active</code>クラスを付与するという内容で実装しました。
その後、<code>active</code>要素に対してCSSでアニメーションを実行します。 
<pre><code class="hljs language-js">// 対象となる要素をすべて変数へ格納
const fadeTargets = document.querySelectorAll(".animation-fade");

// オプション
// root : nullの場合はブラウザのビューポート
// rootMargin : 0とすると↑で指定したルート要素と交差した瞬間（1pxでも）発火。今回のように-50%とすると対象要素がルート要素であるブラウザのビューポートの半分のところで交差したら発火となる。ルート要素を基準としたオプション。
// threshold : 閾値（しきいち）。どのくらい交差したら発火するかを指定する。0とすれば交差した瞬間に発火。対象要素を基準としたオプション。
// rootMarginとthresholdで交差してから（可視範囲に入ってから）どの程度で発火するかを調整できるということ。
const fadeOption = {
 root: null,
 rootMargin: "-50% 0px",
 threshold: 0
};

// 対象となるターゲットが可視範囲に入ったらactiveというクラスを付与する関数
const targets = (entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 entry.target.classList.add("active");
 }
 });
};

// 可視範囲に入ったら実行する関数targetsとfadeOptionを引数にしてIntersectionObserverコンストラクターを呼び出し
const fadeObserver = new IntersectionObserver(targets, fadeOption);

// fadeTargetsのすべての要素を監視印象に登録
fadeTargets.forEach((target) => {
 fadeObserver.observe(target);
});</code></pre>
<h2 id="最後に">最後に</h2>
ポイントとなる要素のアニメーションで動きをつけることは 
ユーザー体験においても重要です。
様々用意されたライブラリを利用する方法もありますが、 
今回はIntersection Observer APIを用いてかんたんに実装する方法をご紹介しました。
値を調整することで応用も可能ですし、アニメーション内容についてはCSSで定義していますので、 
ご自身のプロジェクトにあわせて調整いただければ幸いです。

【JavaScript】スクロールで発火するイベントをGoogleが遅延読み込みで推奨するIntersection Observer APIで実装

最近のWEBデザインでは平行四辺形や台形による斜めな背景デザインを用いたサイトが 
広く見受けられるようになりました。
基本的には四角形で構成されているWEBの要素を、 
斜めにしたり回転する方法はいくつかあります。
今回は要素の前後にCSSの<code>border</code>を使った三角形を重ねることで 
「平行四辺形や台形の背景デザイン」を作る方法をご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E7%B5%90%E6%9E%9C">実装した結果</a>
</li>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A8%E8%A7%A3%E8%AA%AC">実際のコードと解説</a>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#before%E3%81%A8after%E3%81%A7%E7%96%91%E4%BC%BC%E8%A6%81%E7%B4%A0%E3%82%92%E9%87%8D%E3%81%AD%E3%82%8B">beforeとafterで疑似要素を重ねる</a></li>
<li><a href="#border%E3%81%A7%E4%B8%89%E8%A7%92%E5%BD%A2%E3%82%92%E4%BD%9C%E3%82%8B">borderで三角形を作る</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実装した結果">実装した結果</h2>
<iframe width="100%" height="300" src="//jsfiddle.net/sandygift/4yLkmswg/2/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<h2 id="実際のコードと解説">実際のコードと解説</h2>
HTMLおよびCSSそれぞれのコードは以下のとおりです。
<h3 id="html">HTML</h3>
平行四辺形と台形の4種類を用意しました。 
共通クラスは<code>slanted</code>としており、それぞれに追加で<code>type1-4</code>を付与して 
それぞれのデザインの違いを作っています。
なお、サンプルでは単純な装飾として<code>text-align: center</code>を付与していますが、 
結果を見やすくするためですのでご自身のサイトで流用いただく際には削除して大丈夫です。
<pre><code class="hljs language-html">&#x3C;div class="slanted type1">
 &#x3C;p style="text-align: center;">TYPE1&#x3C;/p>
&#x3C;/div>
&#x3C;div class="slanted type2">
 &#x3C;p style="text-align: center;">TYPE2&#x3C;/p>
&#x3C;/div>
&#x3C;div class="slanted type3">
 &#x3C;p style="text-align: center;">TYPE3&#x3C;/p>
&#x3C;/div>
&#x3C;div class="slanted type4">
 &#x3C;p style="text-align: center;">TYPE4&#x3C;/p>
&#x3C;/div></code></pre>
<h3 id="css">CSS</h3>
Sassの環境がない方も利用できるようにCSSでご紹介します。
<pre><code class="hljs language-css">/* 共通スタイル
-----------------------------------------*/
.slanted {
 padding: 220px 0;// 単純に高さを出すために適当に設定
 position: relative;
 background: #eee;
 margin: 0 auto 120px;// 単純に要素同士を離すために適当に設定
}

.slanted:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 0;
 border-style: solid;
}

.slanted:after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 0;
 height: 0;
 border-style: solid;
}

/* 右下斜め方向
-----------------------------------------*/
.type1:before {
 border-width: 0 100vw 100px 0;
 border-color: transparent #fff transparent transparent;
}
.type1:after {
 border-width: 100px 0 0 100vw;
 border-color: transparent transparent transparent #fff;
}

/* 左下斜め方向
-----------------------------------------*/
.type2:before {
 border-width: 0 0 100px 100vw;
 border-color: transparent transparent transparent #fff;
}
.type2:after {
 border-width: 100px 100vw 0 0;
 border-color: transparent #fff transparent transparent;
}

/* 右が上辺の台形
-----------------------------------------*/
.type3:before {
 border-width: 0 100vw 100px 0;
 border-color: transparent #fff transparent transparent;
}
.type3:after {
 border-width: 100px 100vw 0 0;
 border-color: transparent #fff transparent transparent;
}

/* 左が上辺の台形
-----------------------------------------*/
.type4:before {
 border-width: 0 0 100px 100vw;
 border-color: transparent transparent transparent #fff;
}
.type4:after {
 border-width: 100px 0 0 100vw;
 border-color: transparent transparent transparent #fff;
}</code></pre>
<h3 id="beforeとafterで疑似要素を重ねる">beforeとafterで疑似要素を重ねる</h3>
デザインのポイントとなる背景の形状を再現するためには、 
対象要素に三角形を重ねる必要があります。
単純な装飾だけの意味合いとなるためHTML側は汚さないように 
<code>before</code>と<code>after</code>で疑似要素として三角形をCSSで追加しました。
HTMLの要素は四角形で生成されているため、 
対象となる要素自体は<code>position: relative</code>とし、 
疑似要素を<code>position: absolute</code>にしています。
この<code>position: absolute</code>による絶対位置の指定は、 
一番近い<code>position: static</code>以外の親要素を起点としますので、 
対象要素を<code>position: relative</code>とすることで擬似要素を重ねられました。
<h3 id="borderで三角形を作る">borderで三角形を作る</h3>
CSSのみで三角形を作るには<code>border</code>を使う方法が一般的です。
<h4 id="border-width">border-width</h4>
線の大きさを決めるプロパティが<code>border-width</code>です。 
このショートハンドは<code>上 右 下 左</code>で指定をすることができます。
詳しい設定値と形状の関係性はサンプルを参考に実装していただければ幸いですが、 
左または右の値を<code>100vw</code>としてブラウザの幅いっぱいにしていることがポイントです。
<h4 id="border-color">border-color</h4>
三角形の色を指定しているのが<code>border-color</code>です。 
このショートハンドも<code>上 右 下 左</code>で指定をすることができます。
指定する値で<code>transparent</code>は透過を意味します。 
具体的には<code>100vw</code>と指定した方向に三角形の色を指定し（サンプルでは<code>#fff</code>）、 
それ以外を<code>transparent</code>とすれば再現されます。
<h2 id="最後に">最後に</h2>
平行四辺形や台形の斜めな背景デザインで構成されたサイトは、 
先進的な印象を与えることができます。
CSSで疑似要素と三角形を作るテクニックを重ねた今回の方法であれば、 
サイズや色にあわせて柔軟に応用もできるかと思います。
参考になれば幸いです。

【CSS】borderで平行四辺形や台形など斜めな背景デザインを作る

WordPressで記事の一覧を出力する際に閲覧数の多い順に出力することで 
人気の記事一覧をかんたんに作成するコードをご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99">事前準備</a>
</li>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
</li>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E8%A7%A3%E8%AA%AC%E3%81%A8%E8%A3%9C%E8%B6%B3">実装についての解説と補足</a>
<ul>
<li><a href="#php">PHP</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="事前準備">事前準備</h2>
記事ごとに閲覧数を取得する必要がありますがプラグインを使うと用意に集計できます。 
今回は<a href="https://ja.wordpress.org/plugins/wp-postviews/" target="_blank" rel="nofollow noopener noreferrer">WP-PostViews</a>を使ったサンプルをご紹介しますので、
事前にWordPressへ追加してください。
<h2 id="実際のコード">実際のコード</h2>
<pre><code class="hljs language-php">&#x3C;?php
$args = array( 
	'post_type' => 'post',
	'posts_per_page' => 5,
	'meta_key' => 'views',
	'orderby' => 'meta_value_num'
);

$the_query = new WP_Query($args); if($the_query->have_posts()):
?>
&#x3C;?php while ($the_query->have_posts()): $the_query->the_post(); ?>

&#x3C;!-- コンテンツ表示例 -->
&#x3C;article>
	&#x3C;a href="&#x3C;?php the_permalink(); ?>">
		&#x3C;h2>&#x3C;?php the_title(); ?>&#x3C;/h2>
		&#x3C;?php the_post_thumbnail(); ?>
		&#x3C;?php ?>
	&#x3C;/a>
&#x3C;/article>
&#x3C;!-- コンテンツ表示例 -->

&#x3C;?php endwhile; ?>
&#x3C;?php wp_reset_postdata(); ?>
&#x3C;?php else: ?>
&#x3C;div>
	&#x3C;p>まだ記事はありません。&#x3C;/p>
&#x3C;/div>
&#x3C;?php endif; ?></code></pre>
<h2 id="実装についての解説と補足">実装についての解説と補足</h2>
<h3 id="php">PHP</h3>
サブループは指定した条件でDBから情報を取得して 
一致する記事の回数だけ繰り返し処理を行ってくれます。 
指定は<code>arguments</code>の略で<code>$args</code>という変数にしていますが、 
それぞれの意味は以下のとおりです。
<pre><code class="hljs language-php">$args = array( 
	'post_type' => 'post',// 投稿タイプ（postは通常の投稿）
	'posts_per_page' => 5,// 取得する記事の件数
	'meta_key' => 'views',// WP-PostViewsが持っているDBのフィールドであるviews（閲覧数）をキーとして
	'orderby' => 'meta_value_num'// ↑に基づき並べ替えを実施
);</code></pre>
今回の「閲覧数の多い順に並べ替えをする」という目的に対して、 
WP-PostViewsの閲覧数を示す<code>views</code>をキーとして並べ替えを実施している点がポイントです。
ループ処理におけるその他指定条件については<a href="https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/WP_Query" target="_blank" rel="nofollow noopener noreferrer">Codex</a>を参考にしてみてください。
<h2 id="最後に">最後に</h2>
人気記事一覧を表示してくれるプラグインもありますが、 
必要以上の機能があったり動作が重くなるなどのケースもあるため、 
今回はシンプルに実装できる方法をご紹介しました。

【WordPress】閲覧数の多い順で人気記事一覧を出力するコード

WEBサイトはスマホやPCタブレットなどさまざまな端末、 
ウィンドウサイズで閲覧されることを想定して制作する必要があります。
見た目を変化させる場合はCSSのメディアクエリで分岐させますが、 
JavaScriptで処理を分岐させたい場合のコードをご紹介します。
<code>window</code>のイベント<code>resize</code>を利用する方法は昔から採用されていますが、 
リサイズが起きるたびに処理が行われ都度負荷がかかる処理になります。
その回避方法としてCSSのメディアクエリと同じ感覚で 
指定のブレイクポイントに到達したタイミングを検知し、 
処理を実行する<code>matchMedia</code>というメソッドを今回はご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
</li>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%A7%A3%E8%AA%AC">実装について解説</a>
<ul>
<li><a href="#matchmedia%E3%81%B8%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%AE%E6%8C%87%E5%AE%9A%E3%82%92%E6%B8%A1%E3%81%99">matchMediaへブレイクポイントの指定を渡す</a></li>
<li><a href="#%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AB%E5%88%B0%E9%81%94%E3%81%97%E3%81%9F%E3%81%8B%E3%82%92%E6%A4%9C%E7%9F%A5%E3%81%97%E3%80%81%E5%87%A6%E7%90%86%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B">指定したサイズに到達したかを検知し、処理を実行する</a></li>
</ul>
</li>
<li>
<a href="#%E8%A3%9C%E8%B6%B3">補足</a>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実際のコード">実際のコード</h2>
<pre><code class="hljs language-js">// ターゲットとなる要素を取得
const elm = document.querySelector(".elm");

// ブレイクポイントに到達したタイミングで実行される関数
const mediaChangeSp = (query) => {
 if(query.matches) {
 // 600px以下に変化したタイミングでこちらを実行
 elm.classList.add("hoge");
 } else {
 // 601px以上に変化したタイミングでこちらを実行
 elm.classList.remove("hoge");
 }
};

// ブレイクポイントを追加
const querySp = matchMedia("(max-width: 600px)");
querySp.addListener(mediaChangeSp);

// 初回表示の際も実行
mediaChangeSp(querySp);</code></pre>
<h2 id="実装について解説">実装について解説</h2>
ご紹介したJavaScriptについて解説します。
<h3 id="matchmediaへブレイクポイントの指定を渡す">matchMediaへブレイクポイントの指定を渡す</h3>
ブレイクポイントはCSSと同じように<code>max-width</code>や<code>min-width</code>で指定します。 
サンプルでは<code>600px</code>にしていますが、もちろん任意の数値を指定可能です。
<h3 id="指定したサイズに到達したかを検知し、処理を実行する">指定したサイズに到達したかを検知し、処理を実行する</h3>
ブレイクポイントを<code>matchMedia</code>に引数として渡して作成したオブジェクト（サンプルだと<code>querySp</code>）に、
イベントが実行されたタイミングで行う関数を渡します。
これにより、<code>resize</code>とは異なり指定したサイズへの変化があるかを監視し、 
必要なタイミングでのみ処理が実行されるようになります。
<h2 id="補足">補足</h2>
サイズに限定せず、例えばスマホが縦向きなのか横向きなのかで処理を分けることも可能です。
<pre><code class="hljs language-js">const land = matchMedia("(orientation: landscape)");// 横
const port = matchMedia("(orientation: portrait)");// 縦</code></pre>
<h2 id="最後に">最後に</h2>
見た目についてはCSSを利用するほうがシンプルで適切です。
ただ、クラスを動的に変化させたり、動的な処理においてサイズにあわせた処理を行う場合など、 
より複雑な条件においては有効に活用できる場面があると思います。
参考になれば幸いです。

【JavaScript】スマホとPCで条件を分岐する方法

WordPressには、テーマの作成・カスタマイズに役立つテンプレートタグという 
関数（処理のまとまりに名前をつけたもの）がたくさん用意されています。
データベースに格納された投稿などのデータから情報を取得する場合、 
本来はたくさんの処理を書く必要があり高度な知識も求められますが、 
短いテンプレートタグを記述するだけでかんたんに実装ができるようになっています。
その中から比較的よく使うものをご紹介いたします。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
<ul>
<li><a href="#%E6%8A%95%E7%A8%BF%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%92%E5%87%BA%E5%8A%9B">投稿のタイトルを出力</a></li>
<li><a href="#%E6%8A%95%E7%A8%BF%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E5%87%BA%E5%8A%9B">投稿のコンテンツを出力</a></li>
<li><a href="#%E6%8A%95%E7%A8%BF%E6%97%A5%E3%82%92%E5%87%BA%E5%8A%9B">投稿日を出力</a></li>
<li><a href="#%E6%8A%95%E7%A8%BF%E3%81%AE%E8%A9%B3%E7%B4%B0%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92%E5%87%BA%E5%8A%9B">投稿の詳細ページへのリンクを出力</a></li>
<li><a href="#%E6%8A%95%E7%A8%BF%E3%81%AE%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%82%92%E3%83%AA%E3%83%B3%E3%82%AF%E4%BB%98%E3%81%8D%E3%81%AE%E3%83%AA%E3%82%B9%E3%83%88%E3%81%A7%E5%87%BA%E5%8A%9B">投稿のカテゴリをリンク付きのリストで出力</a></li>
<li><a href="#%E6%8A%95%E7%A8%BF%E3%81%AE%E3%82%BF%E3%82%B0%E3%82%92%E3%83%AA%E3%83%B3%E3%82%AF%E4%BB%98%E3%81%8D%E3%81%AE%E3%83%AA%E3%82%B9%E3%83%88%E3%81%A7%E5%87%BA%E5%8A%9B">投稿のタグをリンク付きのリストで出力</a></li>
<li><a href="#%E6%8A%95%E7%A8%BF%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E7%94%BB%E5%83%8F%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E6%83%85%E5%A0%B1%E3%82%92%E5%8F%96%E5%BE%97%E3%83%BB%E5%87%BA%E5%8A%9B">投稿のアイキャッチ画像に関する情報を取得・出力</a></li>
<li><a href="#%E3%83%86%E3%83%BC%E3%83%9E%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%81%AEurl%E3%82%92%E5%8F%96%E5%BE%97">テーマフォルダのURLを取得</a></li>
<li><a href="#%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%83%88%E3%83%83%E3%83%97%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AEurl%E3%82%92%E5%87%BA%E5%8A%9B">サイトのトップページのURLを出力</a></li>
</ul>
</li>
<li>
<a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a>
</li>
</ul>
<h2 id="実際のコード">実際のコード</h2>
<h3 id="投稿のタイトルを出力">投稿のタイトルを出力</h3>
<pre><code class="hljs language-php">&#x3C;?php the_title(); ?></code></pre>
<h3 id="投稿のコンテンツを出力">投稿のコンテンツを出力</h3>
<pre><code class="hljs language-php">&#x3C;?php 
// 冒頭の抜粋した内容を出力
the_excerpt();
?>

&#x3C;?php
// すべての内容を出力
the_content();
?></code></pre>
<h3 id="投稿日を出力">投稿日を出力</h3>
<pre><code class="hljs language-php">&#x3C;?php the_time('Y/m/d'); ?></code></pre>
<h3 id="投稿の詳細ページへのリンクを出力">投稿の詳細ページへのリンクを出力</h3>
<pre><code class="hljs language-php">&#x3C;?php the_permalink(); ?></code></pre>
<h3 id="投稿のカテゴリをリンク付きのリストで出力">投稿のカテゴリをリンク付きのリストで出力</h3>
<pre><code class="hljs language-php">&#x3C;?php the_category(); ?></code></pre>
<h3 id="投稿のタグをリンク付きのリストで出力">投稿のタグをリンク付きのリストで出力</h3>
<pre><code class="hljs language-php">&#x3C;?php
// 引数は(タグの前につく文字, タグ同士の間につく区切り文字, タグの後につく文字)
// 引数は省略可能（その場合はデフォルトの指定）
the_tags('', '|');
?></code></pre>
<h3 id="投稿のアイキャッチ画像に関する情報を取得・出力">投稿のアイキャッチ画像に関する情報を取得・出力</h3>
<pre><code class="hljs language-php">&#x3C;?php
 // 投稿のアイキャッチ画像URLを出力する
 the_post_thumbnail_url();
?>

&#x3C;?php 
 // 投稿のアイキャッチ画像に設定されたIDを取得し、そのIDから各種情報を取得する
 $thumbnail_id = get_post_thumbnail_id();
 // サイズ（横）、アイキャッチ画像のID（変数：$thumbnail_id）に基づき取得
 $thumbnail_width = wp_get_attachment_image_src( $thumbnail_id, 'full' )[1];
 // サイズ（縦）、アイキャッチ画像のID（変数：$thumbnail_id）に基づき取得
 $thumbnail_height = wp_get_attachment_image_src( $thumbnail_id, 'full' )[2];
 // 代替テキスト、アイキャッチ画像のID（変数：$thumbnail_id）に基づき取得
 $thumbnail_alt = get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true );
 // タイトル、アイキャッチ画像のID（変数：$thumbnail_id）に基づき取得
 $thumbnail_title = get_post( $thumbnail_id )->post_title;
 // キャプション、アイキャッチ画像のID（変数：$thumbnail_id）に基づき取得
 $thumbnail_caption = get_post( $thumbnail_id )->post_excerpt;
 // 説明、アイキャッチ画像のID（変数：$thumbnail_id）に基づき取得
 $thumbnail_description = get_post( $thumbnail_id )->post_content;
?></code></pre>
<h3 id="テーマフォルダのurlを取得">テーマフォルダのURLを取得</h3>
<pre><code class="hljs language-php">&#x3C;?php 
// 親テーマの場合
$parent = get_template_directory_uri();
?>

&#x3C;?php 
// 子テーマの場合
$child = get_stylesheet_directory_uri();
?></code></pre>
<h3 id="サイトのトップページのurlを出力">サイトのトップページのURLを出力</h3>
<pre><code class="hljs language-php">&#x3C;?php echo esc_url( home_url( '/' ) ); ?></code></pre>
<h2 id="まとめ">まとめ</h2>
ベースはPHPですので独自で関数を作ることなどももちろん可能ですが、 
WordPressで用意されたテンプレートタグを利用することが推奨されます。
今回ご紹介したものはほんの一部ですので、テンプレートタグ一覧や詳細については 
<a href="https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0" target="_blank" rel="nofollow noopener noreferrer">Codex</a>もあわせてご確認ください。

【WordPress】テーマのカスタマイズでよく使うテンプレートタグ集

SEO対策にも効果がある構造化データマークアップについて、 
Googleが推奨するJSON-LDを使ったパンくずリストの実装方法をご紹介します。
一般的なブログかつTOPページからカテゴリ、 
その下にある記事ページという3段階の階層構造の例になります。 
ご自身のサイトにあわせて調整してみてください。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
</li>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E8%A7%A3%E8%AA%AC">実装についての解説</a>
<ul>
<li><a href="#json-ld%E3%81%A8%E3%81%AF">JSON-LDとは</a></li>
<li><a href="#schemeorg%E3%81%A8%E3%81%AF">scheme.orgとは</a></li>
<li><a href="#%E6%A7%8B%E9%80%A0%E5%8C%96%E3%83%87%E3%83%BC%E3%82%BF%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%81%AB%E3%82%88%E3%82%8B%E5%8A%B9%E6%9E%9C">構造化データマークアップによる効果</a></li>
<li><a href="#json-ld%E3%81%A7%E3%81%AE%E6%A7%8B%E9%80%A0%E5%8C%96%E3%83%87%E3%83%BC%E3%82%BF%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%82%92%E8%A8%98%E8%BF%B0%E3%81%99%E3%82%8B%E4%BD%8D%E7%BD%AE">JSON-LDでの構造化データマークアップを記述する位置</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実際のコード">実際のコード</h2>
<pre><code class="hljs language-js">&#x3C;script type="application/ld+json">
{
 "@context": "https://schema.org/",
 "@type": "BreadcrumbList",
 "@id": "ここにブログ記事のURL/#breadcrumb",
 "itemListElement": [
 {
 "@type": "ListItem",
 "position": 1,
 "item": {
 "@type": "Blog",
 "@id": "ここにブログTOPページのURL",
 "url": "ここにブログTOPページのURL",
 "name": "ここにブログの名前"
 }
 },
 {
 "@type": "ListItem",
 "position": 2,
 "item": {
 "@type": "Blog",
 "@id": "ここにブログ記事のカテゴリページのURL",
 "url": "ここにブログ記事のカテゴリページのURL",
 "name": "ここにカテゴリ名"
 }
 },
 {
 "@type": "ListItem",
 "position": 3,
 "item": {
 "@type": "Blog",
 "@id": "ここにブログ記事のURL",
 "url": "ここにブログ記事のURL",
 "name": "ここにブログ記事のタイトル"
 }
 }
 ]
}
&#x3C;/script></code></pre>
なお、WordPressを利用しているサイトの場合は、 
以下のように記述すれば出力されます。
<pre><code class="hljs language-php">&#x3C;?php 
 $category = get_the_category();
 $cat_name = $category[0]->category_nicename;
?>
&#x3C;script type="application/ld+json">
{
 "@context": "https://schema.org/",
 "@type": "BreadcrumbList",
 "@id": "&#x3C;?php the_permalink(); ?>#breadcrumb",
 "itemListElement": [
 {
 "@type": "ListItem",
 "position": 1,
 "item": {
 "@type": "Blog",
 "@id": "&#x3C;?php echo esc_url( home_url( '/' ) ); ?>",
 "url": "&#x3C;?php echo esc_url( home_url( '/' ) ); ?>",
 "name": "SNIPPET"
 }
 },
 {
 "@type": "ListItem",
 "position": 2,
 "item": {
 "@type": "Blog",
 "@id": "&#x3C;?php echo esc_url( home_url( '/' ) ) . "category/" . $cat_name; ?>",
 "url": "&#x3C;?php echo esc_url( home_url( '/' ) ) . "category/" . $cat_name; ?>",
 "name": "&#x3C;?php echo $cat_name; ?>"
 }
 },
 {
 "@type": "ListItem",
 "position": 3,
 "item": {
 "@type": "Blog",
 "@id": "&#x3C;?php the_permalink(); ?>",
 "url": "&#x3C;?php the_permalink(); ?>",
 "name": "&#x3C;?php the_title(); ?>"
 }
 }
 ]
}
&#x3C;/script></code></pre>
<h2 id="実装についての解説">実装についての解説</h2>
<h3 id="json-ldとは">JSON-LDとは</h3>
詳しい解説はほかサイトでも多数なされていますので割愛しますが、 
JSON-LDとは構造化データマークアップの記法のひとつです。
<h3 id="schemeorgとは">scheme.orgとは</h3>
インターネットやWEBサイトなどのオンライン上で構造化されたデータのためのスキーマを作成し、 
普及させることを使命とする共同のコミュニティ活動・団体になります。
構造化データマークアップの中身は、<a href="https://schema.org/" target="_blank" rel="nofollow noopener noreferrer">scheme.org</a>のボキャブラリー（用語、意味、語彙）から選択します。
<h3 id="構造化データマークアップによる効果">構造化データマークアップによる効果</h3>
構造化データマークアップは検索エンジンに対しページの内容や構造を理解を促す手助けをします。
また、今回のパンくずリストの場合は記述した内容に準じて、 
検索結果にも表示されます（リッチスニペット）。
表示するかどうか、表示内容についてはGoogleに保証されたものではないので、 
あくまでも表示されるための準備でしかない点はご注意ください。
<h3 id="json-ldでの構造化データマークアップを記述する位置">JSON-LDでの構造化データマークアップを記述する位置</h3>
JSON-LDによる構造化データマークアップをHTMLのどこに記述するかという点について、 
結論としてはどこに記述しても問題ないです。
headタグ内で記述することが一般的ではありますがどこに記述しても認識はされますので、 
ご自身のサイトにあわせて適切な位置に記述してください。
<h2 id="最後に">最後に</h2>
検索結果への特別な表示（リッチスニペット）、検索エンジンの理解への手助けなど、 
SEOにおいても構造化データマークアップの重要性は日に日に高まっています。
またパンくずリストの設置は、そもそもサイトを訪れるユーザーにとっても 
現在位置がわかりやすくサイト内の導線として重要です。
構造化データマークアップの導入編として、まずはこのパンくずリストを利用してみてください。

SEO対策にも有効な構造化データマークアップ【パンくずリスト編】

記事一覧ページやアーカイブページなど複数の投稿をループして表示するページに使える 
WordPressのカスタマイズ方法をご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#wordpress%E3%81%A7%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%99%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9">WordPressでカスタマイズするときの注意点</a>
<ul>
<li><a href="#wordpress%E3%82%B3%E3%82%A2%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%EF%BC%88wp-includes%E3%81%AA%E3%81%A9%EF%BC%89%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%97%E3%81%AA%E3%81%84">WordPressコアファイル（wp-includesなど）をカスタマイズしない</a></li>
<li><a href="#%E9%85%8D%E5%B8%83%E3%83%86%E3%83%BC%E3%83%9E%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AF%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B">配布テーマを利用する場合は子テーマを利用する</a></li>
<li><a href="#%E7%9B%AE%E7%9A%84%E3%82%92%E9%81%94%E6%88%90%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E5%84%AA%E5%85%88%E9%A0%86%E4%BD%8D%E3%82%92%E8%80%83%E3%81%88%E3%82%8B">目的を達成するための優先順位を考える</a></li>
</ul>
</li>
<li>
<a href="#%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E7%94%BB%E5%83%8F%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E6%83%85%E5%A0%B1%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B">アイキャッチ画像に関する情報を取得する</a>
<ul>
<li><a href="#%E8%A3%9C%E8%B6%B3%EF%BC%9A%E4%BB%A3%E6%9B%BF%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%80%81%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%80%81%E3%82%AD%E3%83%A3%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%80%81%E8%AA%AC%E6%98%8E%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95">補足：代替テキスト、タイトル、キャプション、説明の設定方法</a></li>
<li><a href="#%E8%A3%9C%E8%B6%B3%EF%BC%9A%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E3%82%92%E6%9C%89%E5%8A%B9%E5%8C%96%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF">補足：アイキャッチを有効化するには</a></li>
</ul>
</li>
<li>
<a href="#%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E7%94%BB%E5%83%8F%E3%82%92img%E3%82%BF%E3%82%B0%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%8Fbackground-image%E3%81%A8%E3%81%97%E3%81%A6%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B">アイキャッチ画像をimgタグではなくbackground-imageとして表示する</a>
</li>
<li>
<a href="#%E3%81%9D%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%8C%E4%B8%80%E7%95%AA%E6%9C%80%E5%88%9D%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B%E3%82%92%E5%88%A4%E5%AE%9A%E3%81%99%E3%82%8B">その記事が一番最初の記事かどうかを判定する</a>
<ul>
<li><a href="#functionsphp">functions.php</a></li>
<li><a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%97%E9%83%A8%E5%88%86">実際のループ部分</a></li>
</ul>
</li>
<li>
<a href="#3%E6%97%A5%E4%BB%A5%E5%86%85%E3%82%841%E9%80%B1%E9%96%93%E4%BB%A5%E5%86%85%E3%81%AA%E3%81%A9%E3%80%81%E6%9C%9F%E9%96%93%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%9D%E3%81%AE%E6%9C%9F%E9%96%93%E5%86%85%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%8B%E3%82%92%E5%88%A4%E5%AE%9A%E3%81%99%E3%82%8B">3日以内や1週間以内など、期間を指定してその期間内の記事かを判定する</a>
<ul>
<li><a href="#functionsphp-1">functions.php</a></li>
<li><a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%97%E9%83%A8%E5%88%86-1">実際のループ部分</a></li>
</ul>
</li>
<li>
<a href="#%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B">ページネーションを実装する</a>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="wordpressでカスタマイズするときの注意点">WordPressでカスタマイズするときの注意点</h2>
WEBサイトは作成することがゴールではありません。
あくまでもリターン（直接的な収益、集客、ブランディングなど）を得ることがゴールであり、 
そのために長期間運営していくことが必要になります。
その前提をふまえて、WordPressカスタマイズにおける最低限の注意点は以下の3点です。
<h3 id="wordpressコアファイル（wp-includesなど）をカスタマイズしない">WordPressコアファイル（wp-includesなど）をカスタマイズしない</h3>
パソコンやスマートフォンなどのアプリケーションは定期的にアップデートが行われますが、 
WordPressもセキュリティの向上や機能の追加、仕様変更のアップデートが頻繁に行われます。
アップデートとは、WordPressのコアファイルを置き換えているということになります。
つまり、WordPressのコアファイルを直接カスタマイズしている場合は、 
アップデートでカスタマイズが上書きされてしまうということです。
視点を変えればアップデートしなければ上書きはされないという考え方もできますが、 
それはさらにオススメできません。
なぜなら、WordPressは世界中で多くのシェアを確保しており、 
それだけハッカーの標的になることも多いです。
アップデートの中にはそういった攻撃から守るために、 
脆弱性を修正するセキュリティ対策も含まれているのです。
アップデートされていない状態が続けばそれだけリスクが増していきます。 
カスタマイズは必ずテーマファイル（<code>wp-content/themes</code>）に対して行いましょう。
<h3 id="配布テーマを利用する場合は子テーマを利用する">配布テーマを利用する場合は子テーマを利用する</h3>
オリジナルテーマを利用する場合はその限りではありませんが、 
配布されているテーマを利用する場合は子テーマを利用しましょう。
理由は配布テーマについても機能追加、仕様変更、 
セキュリティ対策を含めたアップデートを開発者が定期的に行うためです。
子テーマを利用すれば必要な範囲だけのカスタマイズを行うことができ、 
なおかつ親テーマのアップデートがあってもカスタマイズの内容を維持することが可能です。
<h3 id="目的を達成するための優先順位を考える">目的を達成するための優先順位を考える</h3>
カスタマイズの記事でこれをご紹介するのも矛盾しているように見えるかもしれませんが、 
あくまでも目的を達成するための手段としてWEBサイトを作成し 
運営していることは忘れないでください。
時間をかけて自分でカスタマイズをすることが本当に目的を達成するために必要なのか、 
一歩立ち止まって考えてみることをオススメします。
なぜなら本来時間をかけて注力すべきことは、コンテンツの中身であると考えるからです。
フリーランスや制作会社へ依頼をするといった方法を選ぶことでコストと引き換えに 
コンテンツの中身に注力する時間を確保することもできます。
世界中のエンジニアがプラグインを多数配布していますので、 
その中から求める機能を満たしてくれるものが見つかることもあるでしょう。
ご自身でのカスタマイズはあくまでも選択肢のひとつだということです。 
そのうえで、本当に必要な方のお役に立てば幸いです。
<h2 id="アイキャッチ画像に関する情報を取得する">アイキャッチ画像に関する情報を取得する</h2>
アイキャッチ画像の情報を取得だけ行い独自にカスタマイズしたい場合、 
以下のテンプレートタグを利用することで取得が可能です。
<pre><code class="hljs language-php">// ループ内で
get_the_post_thumbnail_url();// URL
get_post_thumbnail_id();// ID
wp_get_attachment_image_src( $thumbnail_id, 'full' )[1];//　横幅
wp_get_attachment_image_src( $thumbnail_id, 'full' )[2];// 高さ
get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true );// alt（代替テキスト）
get_post( $thumbnail_id )->post_title;// title（タイトルテキスト）
get_post( $thumbnail_id )->post_excerpt;// キャプション
get_post( $thumbnail_id )->post_content;// 説明</code></pre>
<h3 id="補足：代替テキスト、タイトル、キャプション、説明の設定方法">補足：代替テキスト、タイトル、キャプション、説明の設定方法</h3>
代替テキスト、タイトル、キャプション、説明については、 
メディアライブラリへ画像をアップロードした際に設定することが可能です。
<img src="/img/snippet/post/wp-customize5-1.png" alt="WordPress管理画面の画像各種情報入力エリア">
<h3 id="補足：アイキャッチを有効化するには">補足：アイキャッチを有効化するには</h3>
オリジナルテーマでアイキャッチを有効化する場合は 
ご利用のテーマ内の<code>functions.php</code>に以下を追加しましょう。
<pre><code class="hljs language-php">add_theme_support('post-thumbnails');</code></pre>
<h2 id="アイキャッチ画像をimgタグではなくbackground-imageとして表示する">アイキャッチ画像をimgタグではなくbackground-imageとして表示する</h2>
カーソルを合わせた時にアイキャッチ画像がズームするようなアニメーションは 
よく記事の一覧で採用されているデザインです。
imgタグでも実装できますがbackground-imageのほうが手軽に実装しやすいです。 
ただCSSファイル内ではPHPの記述は使えないため、ループの中でアイキャッチを呼び出し、 
インラインスタイルで出力します。
<pre><code class="hljs language-php">// ループ内で
&#x3C;?php 
$thumb_url = get_the_post_thumbnail_url();
?>
&#x3C;div class="post-thumbnail" style="background: url(&#x3C;?php echo esc_url($thumb_url); ?>) no-repeat; background-size: cover;"></code></pre>
<h2 id="その記事が一番最初の記事かどうかを判定する">その記事が一番最初の記事かどうかを判定する</h2>
新着記事のみ目立つようにデザインを変えることはよくあります。 
そういった場合に最初の記事かどうかを判定する方法です。
<h3 id="functionsphp">functions.php</h3>
<pre><code class="hljs language-php">/* 最初の記事を判定する関数
-----------------------------------------*/
if(!function_exists('is_first')) {
 function is_first(){
 global $wp_query;
 return ($wp_query->current_post === 0);
 }
}</code></pre>
<h3 id="実際のループ部分">実際のループ部分</h3>
<pre><code class="hljs language-php">if( is_first() ) {
 // 最初の記事の処理
} else {
 // それ以外の記事の処理
}</code></pre>
<h2 id="3日以内や1週間以内など、期間を指定してその期間内の記事かを判定する">3日以内や1週間以内など、期間を指定してその期間内の記事かを判定する</h2>
指定した期間の記事にはNEWを表示するといった仕様にしたい場合に有効な方法です。
<h3 id="functionsphp-1">functions.php</h3>
<pre><code class="hljs language-php">/* 指定した○日以内の記事か判定する関数
-----------------------------------------*/
if(!function_exists('is_new_post')) {
 function is_new_post($the_post, $days) {
 $today = date_i18n('U');
 $posted = get_the_time('U',$the_post->ID);
 $elapsed = date('U',($today - $posted)) / (60*60*24) ;

 if( $days > $elapsed ){
 return true;
 } else {
 return false;
 }
 } 
}</code></pre>
<h3 id="実際のループ部分-1">実際のループ部分</h3>
<pre><code class="hljs language-php">if( is_new_post($post, 3) ) {
 // 3日以内に投稿された記事の場合の処理
} else {
 // それ以外の記事の場合の処理
}</code></pre>
<h2 id="ページネーションを実装する">ページネーションを実装する</h2>
一覧ページで次のページや前のページへ進むためのリンクは投稿されている記事数、 
最大表示数の設定に応じて自動生成されるようページネーションを実装します。
<pre><code class="hljs language-php">&#x3C;div class="pagination">
 &#x3C;?php 
 global $wp_rewrite;
 $paginate_base = get_pagenum_link(1);
 if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
 $paginate_format = '';
 $paginate_base = add_query_arg('paged','%#%');
 }
 else{
 $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
 user_trailingslashit('page/%#%/','paged');;
 $paginate_base .= '%_%';
 }

 echo paginate_links(array(
 'base' => $paginate_base,
 'format' => $paginate_format,
 'total' => $wp_query->max_num_pages,
 'mid_size' => 2,
 'current' => ($paged ? $paged : 1),
 'prev_text' => '',
 'next_text' => '',
 )); 
 ?>
&#x3C;!-- /.pagination -->&#x3C;/div></code></pre>
<h2 id="最後に">最後に</h2>
特に投稿記事のループを使う場面で利用できそうなものを抜粋してご紹介させていただきました。 
参考になりましたら幸いです。
なお、WordPressのカスタマイズについては、記事にしてほしいリクエストも現在募集中です。 
もし何かご希望があれば、以下よりリクエストお待ちしております。
<a href="https://bosyu.me/b/JZkiYLTcXO4" target="_blank" rel="nofollow noopener noreferrer">WordPressでのホームページ作成、カスタマイズでのお困り事募集</a>

WordPressカスタマイズ5選！それ、こうやればできます！記事一覧/アーカイブページ編

WordPressでプラグインを使わずにSNSボタンを設置するカスタマイズ！シェアカウント機能付き

HTMLの要素を上下左右の中央寄せ（センタリング）したいときに、 
Flexboxを使ってかんたんに実現する方法をご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E7%B5%90%E6%9E%9C">実装した結果</a>
</li>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
</li>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E8%A7%A3%E8%AA%AC">実装についての解説</a>
<ul>
<li><a href="#flex%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%81%A8flex%E3%82%A2%E3%82%A4%E3%83%86%E3%83%A0">FlexコンテナとFlexアイテム</a></li>
<li><a href="#flex%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%81%AB%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8Bcss%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3">Flexコンテナに指定するCSSプロパティ</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実装した結果">実装した結果</h2>
<iframe width="100%" height="300" src="//jsfiddle.net/sandygift/psqh9d4t/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<h2 id="実際のコード">実際のコード</h2>
<pre><code class="hljs language-html">&#x3C;div class="box">
 &#x3C;p>キレイに中央寄せができてるね&#x3C;/p>
&#x3C;/div></code></pre>
<pre><code class="hljs language-css">.box {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 300px;
 height: 300px;
 background: cyan;
}</code></pre>
<h2 id="実装についての解説">実装についての解説</h2>
<h3 id="flexコンテナとflexアイテム">FlexコンテナとFlexアイテム</h3>
<code>display: flex</code>の指定をした要素はFlexコンテナとなり、 
その子要素はすべてFlexアイテムとなります。
Flexコンテナに対しFlexbox専用のCSSプロパティを指定することで 
Flexアイテムの位置関係を指定できることがFlexboxを使ったレイアウトの特徴です。
<h3 id="flexコンテナに指定するcssプロパティ">Flexコンテナに指定するCSSプロパティ</h3>
<pre><code class="hljs language-css">.box {
 justify-content: center;// 水平（横方向）の位置を中央に
 align-items: center;// 垂直（縦方向）の位置を中央に
}</code></pre>
<h2 id="最後に">最後に</h2>
Flexboxの利用に慣れてくると、HTMLの要素を意図したとおりに 
レイアウトできるようになってきます。
今回ご紹介したのは単純な中央寄せのみでしたが使う場面は多いと思いますので、 
是非活用してみてください。

Flexboxを使ってHTMLの要素を上下左右の中央寄せする方法

筆者は現役のフリーランスのWEBデザイナーとして活動していますが、 
実際の制作においてGoogle Chromeの拡張機能を重宝しています。
その中でもオススメのChrome拡張を5つ厳選してご紹介させていただきます。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E6%94%AF%E6%8F%B4">コーディング支援</a>
<ul>
<li><a href="#web-maker">Web Maker</a></li>
</ul>
</li>
<li>
<a href="#seo%E5%AF%BE%E7%AD%96">SEO対策</a>
<ul>
<li><a href="#nofollow">NoFollow</a></li>
</ul>
</li>
<li>
<a href="#html">HTML</a>
<ul>
<li><a href="#html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC">HTMLエラーチェッカー</a></li>
<li><a href="#check-my-links">Check My Links</a></li>
</ul>
</li>
<li>
<a href="#%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E9%80%9F%E5%BA%A6%E5%AF%BE%E7%AD%96">サイトの速度対策</a>
<ul>
<li><a href="#lighthouse">Lighthouse</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="コーディング支援">コーディング支援</h2>
<h3 id="web-maker">Web Maker</h3>
サイトの制作を行うにあたって通常はIDE（統合開発環境）を利用しますが、 
細かい検証を行う際に作業中のプロジェクトスペースから隔離した環境で 
テストができればなとよく感じます。
既存のサービスとして<a href="https://codepen.io/" target="_blank" rel="nofollow noopener noreferrer">CodePen</a>や<a href="https://jsfiddle.net/" target="_blank" rel="nofollow noopener noreferrer">JSFiddle</a>などのサービスがありますが、 
ログイン不要でテストしたい場合にすぐに呼び出せるWeb Makerなら 
手軽に小さなコードの検証を行うことが可能です。
<a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh" target="_blank" rel="nofollow noopener noreferrer">Web Maker</a>
<h2 id="seo対策">SEO対策</h2>
<h3 id="nofollow">NoFollow</h3>
WEB制作では、ローカル環境やテスト環境での実装を経て、 
本番環境へ最終的に反映をするという流れをよく行います。
その際に怖いのがテスト環境のままの設定にしており、 
<code>noindex</code>や<code>nofollow</code>指定のまま検索エンジンにインデックスされないというミスです。
Chromeの拡張機能として提供されているNoFollowはブラウザで開いたページで 
<code>noindex</code>や<code>nofollow</code>の指定がされている場合に通知を表示してくれます。
<a href="https://chrome.google.com/webstore/detail/nofollow/dfogidghaigoomjdeacndafapdijmiid?hl=ja" target="_blank" rel="nofollow noopener noreferrer">NoFollow</a>
<h2 id="html">HTML</h2>
<h3 id="htmlエラーチェッカー">HTMLエラーチェッカー</h3>
長い時間膨大なHTMLの記述をしているとHTMLタグの閉じ忘れなどのミスが起こることもあります。
そういった基本的なミスを確認できるHTMLエラーチェッカーは 
開いているページのHTML構文をチェックし、 閉じタグ忘れなどを指摘してくれる拡張機能です。
人はミスする生き物ですので、ミスをしない工夫を実際のコーディングでは意識しつつ、 
気づける工夫としてこの拡張機能を利用しています。
<a href="https://chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf?hl=ja" target="_blank" rel="nofollow noopener noreferrer">HTMLエラーチェッカー</a>
<h3 id="check-my-links">Check My Links</h3>
リンク切れはユーザー体験、サイトの運営において致命的です。 
ただ、テスト環境と本番環境の変化や、テストデータの流し込みのままになっているなど、 
どうしても気づかず単純なミスでリンク切れを起こしてしまうケースはあります。
Chrome拡張Check My Linksは開いているページ内でリンク切れになっているaタグを 
わかりやすく色付けして表示してくれる機能を追加できます。
<a href="https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf" target="_blank" rel="nofollow noopener noreferrer">Check My Links</a>
<h2 id="サイトの速度対策">サイトの速度対策</h2>
<h3 id="lighthouse">Lighthouse</h3>
SEO対策やユーザーの離脱率などにもつながってくることから、 
WEBサイトの速度は非常に重要なファクターになっています。
実際の本番環境における速度の指標は<a href="https://developers.google.com/speed/pagespeed/insights/?hl=ja" target="_blank" rel="nofollow noopener noreferrer">PageSpeed Insights</a>や<a href="https://gtmetrix.com/" target="_blank" rel="nofollow noopener noreferrer">GTmetrix</a>を利用しますが、 
ローカル環境やBASIC認証などをかけたテスト環境など、 
閉じられたサイトの測定を行うことはできません。
そういった環境でもブラウザから拡張機能として利用ができるLighthouseであれば、 
PageSpeed Insightsにも利用されていることから同程度の結果を得ることができます。
開発中に特に利用する拡張機能です。
<a href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja" target="_blank" rel="nofollow noopener noreferrer">Lighthouse</a>
<h2 id="最後に">最後に</h2>
今回はコードのご紹介ではなく効率化と生産性向上の手助けをしてくれる拡張機能のご紹介でした。 
有名なものばかりですが実際の作業で非常に役立つものを厳選しましたので、参考になれば幸いです。

【2020年版】WEBデザイナーの私がオススメする Chrome 拡張 5選

通常の時間帯は白を貴重としたサイトでもアクセスした時間が夜の場合は、 
暗い環境に合わせたダークテーマにしたいという場合のテンプレートをご紹介します。
やっていることは非常にシンプルでタイムゾーンなどは考慮していませんが、 
ベースとして適宜応用できるかと思います。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E7%B5%90%E6%9E%9C">実装した結果</a>
</li>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
</li>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E8%A7%A3%E8%AA%AC">実装についての解説</a>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#javascript">JavaScript</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実装した結果">実装した結果</h2>
<iframe width="100%" height="300" src="//jsfiddle.net/sandygift/xw64yvnm/1/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<h2 id="実際のコード">実際のコード</h2>
<pre><code class="hljs language-html">&#x3C;div class="wrapper">
 &#x3C;div class="time-color">
 &#x3C;p class="time-color__desc">アクセスする時間で色が変わるよ&#x3C;/p>
 &#x3C;p class="time-color__desc">アクセスする時間で色が変わるよ&#x3C;/p>
 &#x3C;p class="time-color__desc">アクセスする時間で色が変わるよ&#x3C;/p>
 &#x3C;/div>
&#x3C;/div></code></pre>
<pre><code class="hljs language-css">.wrapper.dark .time-color {
 background: #212121;
}

.wrapper.dark .time-color {
 color: #fff;
}</code></pre>
<pre><code class="hljs language-js">const colorBlock = document.querySelector(".wrapper");
const date = new Date();
const now_hour = date.getHours();
const start_hour = 7;
const end_hour = 18;
if(now_hour > end_hour || now_hour &#x3C; start_hour) {
 colorBlock.classList.add("dark");
}</code></pre>
<h2 id="実装についての解説">実装についての解説</h2>
<h3 id="html">HTML</h3>
HTMLはサンプルですのでシンプルな構成にしていますが、 
ポイントは全体を囲っている<code>wrapper</code>要素です。
この要素がダークテーマか通常テーマかを切り替えるキーとなります。
<pre><code class="hljs language-html">&#x3C;div class="wrapper">// この要素をターゲットにJavaScriptとCSSで動的に変化を加える
 &#x3C;div class="time-color">
 &#x3C;p class="time-color__desc">アクセスする時間で色が変わるよ&#x3C;/p>
 &#x3C;p class="time-color__desc">アクセスする時間で色が変わるよ&#x3C;/p>
 &#x3C;p class="time-color__desc">アクセスする時間で色が変わるよ&#x3C;/p>
 &#x3C;/div>
&#x3C;/div></code></pre>
<h3 id="css">CSS</h3>
見た目の装飾はCSSで行い、ダークテーマ変更後の指定も加えておきます。 
<code>wrapper</code>要素に対してdarkクラスが指定されている場合は色を変更する指定を行っています。
<pre><code class="hljs language-css">.wrapper .time-color {
 // 通常テーマの際の指定
}

.wrapper .time-desc {
 // 通常テーマの際の指定
}

.wrapper.dark .time-color {
 // ダークテーマの指定
	background: #212121;// 黒ベースの背景に
}

.wrapper.dark .time-desc {
 // ダークテーマの指定
	color: #fff;// 黒ベースの背景にあわせて文字色を白へ
}</code></pre>
<h3 id="javascript">JavaScript</h3>
テーマを切り替えるための時間の取得と判別、クラスの付与のみJavaScriptで行います。
サイトの中身はHTML、サイトの見た目はCSS、動的なトリガーはJavaScriptという構成で 
役割をわかりやすく分けてみました。
<pre><code class="hljs language-js">const colorBlock = document.querySelector(".wrapper");// wrapper要素を変数へ格納
const date = new Date();// ブラウザでアクセスされたタイミングで現在時刻を取得
const now_hour = date.getHours();// 現在時刻のデータから時間だけを取得
const start_hour = 7;// 7時を通常テーマの開始時間に
const end_hour = 18;// 18時を通常テーマの終了時間に
if(now_hour > end_hour || now_hour &#x3C; start_hour) {// もし現在18:59〜06:59なら
 colorBlock.classList.add("dark");// wrapper要素にdarkクラスを付与する
}</code></pre>
<h2 id="最後に">最後に</h2>
時間の取得については今回の記述だとアクセスしたブラウザのタイムゾーンに依存します。
そのあたりも考慮する場合は少し手を加える必要がありますが、 
基本のテンプレートして 参考にしていただければ幸いです。

アクセスした時間にあわせてサイトをダークテーマへ変えるシンプルなJavaScript

WordPress 5.0から公式の新エディタとして採用されているGutenberg（グーテンベルグ）が 
カスタム投稿タイプで有効化されない場合に考えられる解決方法をご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95%E3%81%9D%E3%81%AE%EF%BC%91--custom-post-type-ui%E3%82%92%E5%88%A9%E7%94%A8">解決方法その１ – Custom Post Type UIを利用</a>
<ul>
<li><a href="#%E6%89%8B%E9%A0%86">手順</a></li>
</ul>
</li>
<li>
<a href="#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95%E3%81%9D%E3%81%AE%EF%BC%92--%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E6%8A%95%E7%A8%BF%E3%82%BF%E3%82%A4%E3%83%97%E3%82%92%E8%87%AA%E4%BD%9C%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B">解決方法その２ – カスタム投稿タイプを自作している</a>
<ul>
<li><a href="#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E6%8A%95%E7%A8%BF%E3%82%BF%E3%82%A4%E3%83%97%E3%81%A7show_in_rest%E3%82%92%E6%9C%89%E5%8A%B9%E5%8C%96%E3%81%99%E3%82%8B">カスタム投稿タイプでshow_in_restを有効化する</a></li>
</ul>
</li>
<li>
<a href="#rest-api%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B%E3%81%8Cgutenberg%E3%81%AB%E5%BD%B1%E9%9F%BF%E3%81%99%E3%82%8B%E7%90%86%E7%94%B1">REST APIで表示するかどうかがGutenbergに影響する理由</a>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="解決方法その１--custom-post-type-uiを利用">解決方法その１ – Custom Post Type UIを利用</h2>
カスタム投稿タイプを定番のプラグインである<a href="https://ja.wordpress.org/plugins/custom-post-type-ui/" target="_blank" rel="nofollow noopener noreferrer">Custom Post Type UI</a>で 
作成されている方は多いと思います。
この場合は、プラグインの設定内でREST APIで表示（Show in REST API）を 
有効化することで解決する可能性があります。
<h3 id="手順">手順</h3>
<ol>
<li>WordPress管理画面</li>
<li>CPT UI</li>
<li>投稿タイプを編集</li>
<li>編集したい投稿タイプを選択</li>
<li>REST APIで表示（Show in REST API）</li>
</ol>
<h2 id="解決方法その２--カスタム投稿タイプを自作している">解決方法その２ – カスタム投稿タイプを自作している</h2>
プラグインを利用せずにカスタム投稿タイプを自作している場合は、 
<code>show_in_rest</code>が有効化されていない可能性が考えられます。
<h3 id="カスタム投稿タイプでshow_in_restを有効化する">カスタム投稿タイプでshow_in_restを有効化する</h3>
<pre><code class="hljs language-php">add_action( 'init', 'test_post_type' );
function test_post_type() {
 register_post_type(
 'test',
 array(
 'label' => 'テスト',
 'public' => true,
 'has_archive' => true,
 'show_in_rest' => true,// show_in_restを有効化しておく
 )
 );
}</code></pre>
<h2 id="rest-apiで表示するかどうかがgutenbergに影響する理由">REST APIで表示するかどうかがGutenbergに影響する理由</h2>
現行仕様のWordPressでは<a href="https://ja.wp-api.org/" target="_blank" rel="nofollow noopener noreferrer">WP REST API</a>が統合されており、 
WordPressサイト以外の環境やJavaScriptなどからも、 
かんたんに記事やサイトのデータを取得することができるようになっています。
このREST APIをGutenberg（グーテンベルグ）は利用する仕様になっているため、 
有効無効の設定がそのまま影響しているのです。
<h2 id="最後に">最後に</h2>
旧エディタに慣れている方はなかなか移行がスムーズにいかないかもしれませんが、 
バージョンアップするにつれてGutenberg（グーテンベルグ）の安定性も上がってきたと感じます。
有効化できずお困りの方の参考になれば幸いです。

WordPressの新エディター Gutenberg（グーテンベルグ） がカスタム投稿タイプで有効にならない場合

LP向けのHTML5テンプレート 「SIMPLE LP TEMPLATE」

コピペで使えるテンプレートパーツのご紹介です。 
記事の一覧などで利用しやすいカードデザインをHTMLとCSSのみで作りました。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E7%B5%90%E6%9E%9C">実装した結果</a>
</li>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
</li>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E8%A7%A3%E8%AA%AC">実装についての解説</a>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実装した結果">実装した結果</h2>
<iframe width="100%" height="300" src="//jsfiddle.net/sandygift/zrqj8pw5/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<h2 id="実際のコード">実際のコード</h2>
サンプルとなるHTMLは記事一覧画面に表示されることがよくある情報にし、 
それぞれに対してCSS（Sass）でスタイルを当てていきます。
<pre><code class="hljs language-html">&#x3C;article class="card">
 &#x3C;img class="card__img" src="https://placehold.jp/32/eeeeee/212121/768x432.png?text=%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E7%94%BB%E5%83%8F" alt="">
 &#x3C;div class="card__meta">
 &#x3C;p class="card__cat">PARTS&#x3C;/p>
 &#x3C;time class="card__time" datetime="2020-01-09">2020.01.09&#x3C;/time>
 &#x3C;/div>
 &#x3C;h2 class="card__ttl">３秒で利用可能！効率化UPにつながるオススメのコピペパーツをご紹介します！&#x3C;/h2>
 &#x3C;p class="card__desc">
 HTMLやCSSの組み合わせでよく使うデザインってありますよね。プログラミングの世界ではDRYという考え方がありますが、HTMLやCSSにも応用...
 &#x3C;/p>
&#x3C;/article></code></pre>
<pre><code class="hljs language-scss">.card {
 &#x26; {
 width: 400px;
 margin: 0 auto;
 padding: 12px;
 border: 1px solid #ccc;
 background: #fff;
 }
 &#x26;__img {
 width: 100%;
 }
 &#x26;__meta {
 display: flex;
 align-items: center;
 }
 &#x26;__cat {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 6px 12px;
 background: #ffb300;
 color: #fff;
 font-weight: bold;
 letter-spacing: 1px;
 font-size: 14px;
 }
 &#x26;__time {
 margin: 0 0 0 auto;
 font-size: 12px;
 color: #666;
 }
 &#x26;__ttl {
 font-size: 20px;
 margin: 0;
 }
 &#x26;__desc {
 font-size: 16px;
 }
}</code></pre>
Sassを利用せずにCSSのみで実装する場合は以下の記述になります。
<pre><code class="hljs language-css">.card {
 width: 400px;
 margin: 0 auto;
 padding: 12px;
 border: 1px solid #ccc;
 background: #fff;
}
.card__img {
 width: 100%;
}
.card__meta {
 display: flex;
 align-items: center;
}
.card__cat {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 6px 12px;
 background: #ffb300;
 color: #fff;
 font-weight: bold;
 letter-spacing: 1px;
 font-size: 14px;
}
.card__time {
 margin: 0 0 0 auto;
 font-size: 12px;
 color: #666;
}
.card__ttl {
 font-size: 20px;
 margin: 0;
}
.card__desc {
 font-size: 16px;
}</code></pre>
<h2 id="実装についての解説">実装についての解説</h2>
<h3 id="html">HTML</h3>
テンプレートパーツとしての要素のみなので、 
HTML側には特別なポイントはなくよくある構成にしました。
<h3 id="css">CSS</h3>
単純な構成にしていますが、カテゴリと投稿日時部分については、 
CSSのflexbox指定で横並びにしています。
また、以下の記述をすることで投稿日時のみ右寄せにしたデザインを実現しています。
<pre><code class="hljs language-css">.card__time {
 margin: 0 0 0 auto;
}
// 余白を上も右も下も0に。ただし、左の余白は自動で調整。 = 右寄せ。</code></pre>
<h2 id="最後に">最後に</h2>
ブログサイトなどでは頻繁に登場するカードデザインテンプレートのご紹介でした。
特にWordPressなどのCMSを使った記事一覧ページで参考になると思いますので、 
ぜひ活用してみてくださいね。

HTMLとCSSのみで作ったカードデザインのテンプレートパーツ

簡易的な絞り込み機能はライブラリを利用せずにJavaScriptで実装するのも容易になりました。
今回はフォームに入力したテキストの内容に一致するコンテンツのみ表示する 
絞り込み機能についてご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E7%B5%90%E6%9E%9C">実装した結果</a>
</li>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
</li>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E8%A7%A3%E8%AA%AC">実装についての解説</a>
<ul>
<li><a href="#css">CSS</a></li>
<li><a href="#javascript">JavaScript</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実装した結果">実装した結果</h2>
<iframe width="100%" height="300" src="//jsfiddle.net/sandygift/bcdjkw5f/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<h2 id="実際のコード">実際のコード</h2>
<pre><code class="hljs language-html">&#x3C;input type="text" id="searchForm">
&#x3C;ul>
 &#x3C;li class="item" data-set="あいうえお">あいうえお&#x3C;/li>
 &#x3C;li class="item" data-set="あいすえお">あいすえお&#x3C;/li>
 &#x3C;li class="item" data-set="かきくけこ">かきくけこ&#x3C;/li>
 &#x3C;li class="item" data-set="さしすせそ">さしすせそ&#x3C;/li>
 &#x3C;li class="item" data-set="たちつてと">たちつてと&#x3C;/li>
 &#x3C;li class="item" data-set="なにぬねの">なにぬねの&#x3C;/li>
 &#x3C;li class="item" data-set="かきくけそ">かきくけそ&#x3C;/li>
&#x3C;/ul></code></pre>
<pre><code class="hljs language-css">.hide {
 display: none;
}</code></pre>
<pre><code class="hljs language-js">const searchForm = document.querySelector('#searchForm');
const itemList = document.querySelectorAll('.item');
searchForm.addEventListener('keyup', () => {
 const keyWord = searchForm.value;
 itemList.forEach((elm) => {
 if (!keyWord || keyWord === "") {
 elm.classList.remove('hide');
 return;
 }
 const val = elm.dataset.set;
 if (val.includes(keyWord)) {
 elm.classList.remove('hide');
 } else {
 elm.classList.add('hide');
 }
 });
});</code></pre>
<h2 id="実装についての解説">実装についての解説</h2>
それぞれのコードのポイントを解説します。
<h3 id="css">CSS</h3>
CSSはシンプルに<code>hide</code>クラスを付与された要素は非表示という指定のみを行っています。
JavaScriptでクラスの付与・削除をコントロールすることで、 
CSSが連動してコンテンツの非表示・表示を変更しています。
CSSでは<code>display:none</code>を指定すれば要素を非表示にすることができます。
<h3 id="javascript">JavaScript</h3>
テキストを入力するフォーム部分と検索対象となる要素を取得したうえで、 
フォームの入力をする度にテキストを含む要素以外にhideクラスを付与する操作を行っています。
なお、要素がそのデータを持っているかというロジックは、 
HTMLでカスタムデータ属性（data-◯◯ / 今回のサンプルは<code>data-set</code>）をもたせているので、 
そのデータの値とフォームのテキストを比較する仕様にしています。
<pre><code class="hljs language-js">const searchForm = document.querySelector('#searchForm');// フォームを取得
const itemList = document.querySelectorAll('.item');// 要素を取得
searchForm.addEventListener('keyup', () => {// フォームのテキストが変わる度に
 const keyWord = searchForm.value;// フォームのテキストを取得し
 itemList.forEach((elm) => {//
 if (!keyWord || keyWord === "") {// フォームが未入力なら
 elm.classList.remove('hide');// hideクラスは削除
 return;
 }
 const val = elm.dataset.set;
 if (val.includes(keyWord)) {// フォームのテキストを要素が含むなら
 elm.classList.remove('hide');// hideクラスを削除
 } else {// 含まないなら
 elm.classList.add('hide');// hideクラスを付与
 }
 });
});</code></pre>
<h2 id="最後に">最後に</h2>
単純な構成ですが応用もききやすいと思います。 
サイト内での検索という観点では利用しやすいので、是非参考にしてみてください。

フォームに入力したテキストに一致するコンテンツの絞り込み機能をJavaScript（Vanilla JS）で作成する

JavaScriptとCSSでライブラリを使わずにモーダルウィンドウを追加する

コピペで使えるパーツのご紹介です。 
今回はテキストの左右にボーダーを表示するパーツをご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AE%E7%B5%90%E6%9E%9C">実装の結果</a>
</li>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
</li>
<li>
<a href="#%E5%BF%9C%E7%94%A8%E7%B7%A8%EF%BC%9A%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA">応用編：カスタマイズ</a>
<ul>
<li><a href="#%E5%BF%9C%E7%94%A8%E7%B7%A8%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E7%B5%90%E6%9E%9C">応用編を実装した結果</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実装の結果">実装の結果</h2>
<iframe width="100%" height="300" src="//jsfiddle.net/sandygift/wf8yvqdp/1/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<h2 id="実際のコード">実際のコード</h2>
<pre><code class="hljs language-html">&#x3C;p class="ttl">テキストの横に線だよ&#x3C;/p></code></pre>
<pre><code class="hljs language-scss">.ttl {
 &#x26; {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 350px;
 margin: 0 auto;
 font-size: 20px;
 }
 &#x26;:before, &#x26;:after {
 content: "";
 display: block;
 height: 3px;
 background: #000;
 flex-grow: 1;
 }
 &#x26;:after {
 margin-right: 12px;
 }
 &#x26;:before {
 margin-left: 12px;
 }
}</code></pre>
なお、Sassを利用せずにCSSで作成する場合は以下のとおりです。
<pre><code class="hljs language-css">.ttl {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 350px;
 margin: 0 auto;
}

.ttl:before, .ttl:after {
 content: "";
 display: block;
 height: 2px;
 background: #000;
 flex-grow: 1;
}

.ttl:before {
 margin-right: 12px;
}

.ttl:after {
 margin-left: 12px;
}</code></pre>
<h2 id="応用編：カスタマイズ">応用編：カスタマイズ</h2>
<pre><code class="hljs language-css">// afterだけに設定すれば、右側にのみボーダーが表示
.ttl {
 &#x26; {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 350px;
 margin: 0 auto;
 font-size: 20px;
 }
 &#x26;:after {
 content: "";
 display: block;
 height: 3px;
 background: #000;
 flex-grow: 1;
 margin-left: 12px;
 }
}</code></pre>
<h3 id="応用編を実装した結果">応用編を実装した結果</h3>
<a href="https://gistpreview.github.io/?769d3bd8c51717f184fe07041b4fb0dc" target="_blank" rel="nofollow noopener noreferrer">デモページで確認する</a>
<h2 id="最後に">最後に</h2>
疑似要素である<code>before</code>と<code>after</code>を使えばかんたんに実装できました。 
他にもこれらを利用することで応用できますので、是非色々試してみてください。

テキストの左右に横線（ボーダー）を表示するCSSパーツ

フォームの要素でラジオボタンやチェックボックスを利用する場合、 
ブラウザ標準のスタイルが当たるため思うようにデザインすることができません。
今回はこのラジオボタンやチェックボックスをオリジナルデザインの画像へ 
変更するCSSをご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
</li>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E8%A7%A3%E8%AA%AC">実装についての解説</a>
<ul>
<li><a href="#label%E8%A6%81%E7%B4%A0%E3%81%A8%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%84%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%82%92%E7%B4%90%E3%81%A5%E3%81%91%E3%82%8B">label要素とラジオボタンやチェックボックスを紐づける</a></li>
<li><a href="#css%E3%81%A7%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%84%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%82%92%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AB%E3%81%99%E3%82%8B">CSSでラジオボタンやチェックボックスを非表示にする</a></li>
<li><a href="#%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%81%A7%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%A8%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E5%86%8D%E7%8F%BE%E3%81%99%E3%82%8B">背景画像でチェックボックスとラジオボタンを再現する</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実際のコード">実際のコード</h2>
<pre><code class="hljs language-html">&#x3C;form class="form">
 &#x3C;input type="radio" name="radio" class="form__radio" id="radio1" checked>
 &#x3C;label for="radio1" class="form__label-radio">ラジオ1&#x3C;/label>
 &#x3C;input type="radio" name="radio" class="form__radio" id="radio2">
 &#x3C;label for="radio2" class="form__label-radio">ラジオ2&#x3C;/label>
 &#x3C;input type="checkbox" name="check[]" class="form__check" id="check1">
 &#x3C;label for="check1" class="form__label-check">チェック1&#x3C;/label>
 &#x3C;input type="checkbox" name="check[]" class="form__check" id="check2">
 &#x3C;label for="check2" class="form__label-check">チェック2&#x3C;/label>
&#x3C;/form></code></pre>
<pre><code class="hljs language-scss">.form {
 &#x26;__radio {
 display: none;
 }
 &#x26;__check {
 display: none;
 }
 &#x26;__label-radio {
 width: 100%;
 display: flex;
 margin: 0 0 12px;
 background: url(ここにチェックする前の画像) no-repeat;
 background-size: 20px;
 background-position: left center;
 padding: 6px 0 6px 26px;
 }
 &#x26;__label-check {
 width: 100%;
 display: flex;
 margin: 0 0 12px;
 background: url(ここにチェックする前の画像) no-repeat;
 background-size: 20px;
 background-position: left center;
 padding: 6px 0 6px 26px;
 }
 &#x26;__radio:checked + &#x26;__label-radio {
 background: url(ここにチェックしたあとの画像) no-repeat;
 background-size: 20px;
 background-position: left center;
 }
 &#x26;__check:checked + &#x26;__label-check {
 background: url(ここにチェックしたあとの画像) no-repeat;
 background-size: 20px;
 background-position: left center;
 }
}</code></pre>
なお、Sassを利用せずにCSSで実装する場合は以下のコードになります。
<pre><code class="hljs language-css">.form__radio {
 display: none;
}
.form__check {
 display: none;
}
.form__label-radio {
 width: 100%;
 display: flex;
 margin: 0 0 12px;
 background: url(ここにチェックする前の画像) no-repeat;
 background-size: 20px;
 background-position: left center;
 padding: 6px 0 6px 26px;
}
.form__label-check {
 width: 100%;
 display: flex;
 margin: 0 0 12px;
 background: url(ここにチェックする前の画像) no-repeat;
 background-size: 20px;
 background-position: left center;
 padding: 6px 0 6px 26px;
}
.form__radio:checked + .form__label-radio {
 background: url(ここにチェックしたあとの画像) no-repeat;
 background-size: 20px;
 background-position: left center;
}
.form__check:checked + .form__label-check {
 background: url(ここにチェックしたあとの画像) no-repeat;
 background-size: 20px;
 background-position: left center;
}</code></pre>
<h2 id="実装についての解説">実装についての解説</h2>
ご紹介したJavaScriptについて解説します。
<h3 id="label要素とラジオボタンやチェックボックスを紐づける">label要素とラジオボタンやチェックボックスを紐づける</h3>
HTMLでラジオボタンやチェックボックスを作る際に、 
隣にあるテキストがそれぞれ紐づくようにlabel要素で関連付けを行います。
部品となるラジオボタンやチェックボックスにはidを指定しており、 
labelはfor属性で紐づけの指定を行っています。
これによりlabelのテキストをクリックするとラジオボタンや 
チェックボックスが反応するようになります。
<pre><code class="hljs language-html">&#x3C;!-- ラジオボタンの作成 / idとしてradio1を指定 -->
&#x3C;input type="radio" name="radio" class="form__radio" id="radio1">

&#x3C;!-- label要素でテキストを作成 / 関連フォーム部品としてradio1を指定 -->
&#x3C;label for="radio1" class="form__label">ラジオ1&#x3C;/label></code></pre>
<h3 id="cssでラジオボタンやチェックボックスを非表示にする">CSSでラジオボタンやチェックボックスを非表示にする</h3>
標準のスタイルがあたっているラジオボタンやチェックボックスは 
自由にカスタマイズできないため<code>display: none</code>の指定を行い非表示にしています。
サンプルコードではSass（SCSS）で記載しましたが、 
CSSの場合は以下のように指定します。
<pre><code class="hljs language-css">// ラジオボタンを消す
.form__radio {
 display: none;
}

// チェックボックスを消す
.form__check {
 display: none;
}</code></pre>
これで要素としては存在していますが、表示はされない状態を作ることができました。
<h3 id="背景画像でチェックボックスとラジオボタンを再現する">背景画像でチェックボックスとラジオボタンを再現する</h3>
非表示になったラジオボタンやチェックボックスの代わりにlabel要素に対して 
背景画像で自作したオリジナルデザインの画像を設定します。
<pre><code class="hljs language-css">// ラジオボタンにひもづくlabel
.form__label-radio {
 width: 100%;
 display: flex;
 margin: 0 0 12px;
 background: url(ここにチェックする前の画像) no-repeat;
 background-size: 20px;
 background-position: left center;
 padding: 6px 0 6px 26px;
}

// チェックボックスにひもづくlabel
.form__label-check {
 width: 100%;
 display: flex;
 margin: 0 0 12px;
 background: url(ここにチェックする前の画像) no-repeat;
 background-size: 20px;
 background-position: left center;
 padding: 6px 0 6px 26px;
}</code></pre>
チェックをつけた場合にデザインが変わるようにするためには、 
CSSの隣接セレクタを利用することで実現可能です。
以下のようにチェックされたラジオボタンやチェックボックスの隣のlabel要素という指定を行い、 
背景画像の切り替えを行うことで擬似的に再現をしています。
<pre><code class="hljs language-css">// チェックがついたラジオボタン　の隣　のラベルのスタイル
.form__radio:checked + .form__label-radio {
 background: url(ここにチェックしたあとの画像) no-repeat;
 background-size: 20px;
 background-position: left center;
}

/ チェックがついたチェックボックス　の隣　のラベルのスタイル
.form__check:checked + .form__label-check {
 background: url(ここにチェックしたあとの画像) no-repeat;
 background-size: 20px;
 background-position: left center;
}</code></pre>
<h2 id="最後に">最後に</h2>
JavaScriptを使わずにCSSだけで手軽に実装してみました。 
標準のデザインだと浮いてしまうということはよくありますので、参考になれば幸いです。

ラジオボタンやチェックボックスをオリジナルデザインの画像へ変更するCSS

WordPressのお問合せフォームからユーザーが離脱するのを最小限に防ぐために、 
入力しやすいステップ式のフォームにするカスタマイズのご紹介です。
お問合せフォームは定番のプラグインである<a href="https://ja.wordpress.org/plugins/contact-form-7/" target="_blank" rel="nofollow noopener noreferrer">Contact Form7</a>をベースにし、 
ステップ式にするためにJavaScriptライブラリである<a href="https://swiperjs.com/" target="_blank" rel="nofollow noopener noreferrer">Swiper.js</a>を利用しています。
なお、サンプルのコードは最低限の仕組みだけにしていますので 
適宜CSSなどカスタマイズを加えていただければ幸いです。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
</li>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E8%A3%9C%E8%B6%B3%E3%81%A8%E8%A7%A3%E8%AA%AC">実装についての補足と解説</a>
<ul>
<li><a href="#functionsphp%E3%81%A7swiper%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B">functions.phpでSwiperを追加する</a></li>
<li><a href="#contact-form7-%E3%82%B3%E3%83%B3%E3%82%BF%E3%82%AF%E3%83%88%E7%B7%A8%E9%9B%86%E7%94%BB%E9%9D%A2">Contact Form7 コンタクト編集画面</a></li>
<li><a href="#swiperjs%E3%81%AE%E5%88%9D%E6%9C%9F%E5%8C%96%E3%81%A8%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E8%BF%BD%E5%8A%A0%E4%BB%95%E6%A7%98%E3%82%92%E5%8A%A0%E3%81%88%E3%82%8B">Swiper.jsの初期化とステップフォームのための追加仕様を加える</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実際のコード">実際のコード</h2>
<pre><code class="hljs language-php">&#x3C;?php

/* 利用しているテーマの functions.php へ追加 */

/* swiper.jsファイルの読み込み
-----------------------------------------*/
wp_enqueue_script( "swiper-js", "https://cdn.jsdelivr.net/npm/swiper@5.2.1/js/swiper.min.js", "", "", false );

/* swiper.cssファイルの読み込み
-----------------------------------------*/
wp_enqueue_style( "swiper-css", "https://cdn.jsdelivr.net/npm/swiper@5.2.1/css/swiper.min.css", array(), "" );</code></pre>
<pre><code class="hljs language-html">&#x3C;!-- WordPres管理画面 Contact Form7 コンタクトフォーム編集 -->
&#x3C;div class="swiper-container">
 &#x3C;div class="swiper-wrapper">
 &#x3C;div class="swiper-slide step1">
 &#x3C;label> お名前 (必須)
 [text* your-name] &#x3C;/label>
 &#x3C;label> メールアドレス (必須)
 [email* your-email] &#x3C;/label>
 &#x3C;input type="button" class="next-step" value="次へ">
 &#x3C;/div>

 &#x3C;div class="swiper-slide step2">
 &#x3C;label> 題名
 [text your-subject] &#x3C;/label>
 &#x3C;label> メッセージ本文
 [textarea your-message] &#x3C;/label>
 &#x3C;input type="button" class="prev-step" value="戻る">
 [submit "送信"]
 &#x3C;/div>
 &#x3C;/div>
&#x3C;/div></code></pre>
<pre><code class="hljs language-js">/* Contact Form7 Enterで送信しないようにする処理
-----------------------------------------*/
function submitStop(e){

 if (!e) var e = window.event;
 if(e.keyCode == 13)
 return false;
}
window.onload = function (){
 var list = document.getElementsByTagName("input");
 for(var i=0; i&#x3C;list.length; i++){
 if(list[i].type == 'email' || list[i].type == 'password'|| list[i].type == 'text'|| list[i].type == 'number'){
 list[i].onkeypress = function (event){
 return submitStop(event);
 };
 }
 }
}

/* Tabキーを無効に
-----------------------------------------*/
window.onkeydown = function(e) {
 if (e.keyCode == 9)
 return false;
}

/* Swiperでステップ式
-----------------------------------------*/
const nextBtns = document.querySelectorAll(".next-step");
const prevBtns = document.querySelectorAll(".prev-step");
const swiperDemo = new Swiper('.swiper-container', {
 allowTouchMove: false
});
nextBtns.forEach(btn => {
 btn.addEventListener("click", () => {
 swiperDemo.slideNext();
 });
});
prevBtns.forEach(btn => {
 btn.addEventListener("click", () => {
 swiperDemo.slidePrev();
 });
});</code></pre>
<h2 id="実装についての補足と解説">実装についての補足と解説</h2>
ご紹介したコードの内容について解説します。
<h3 id="functionsphpでswiperを追加する">functions.phpでSwiperを追加する</h3>
まずは<code>Swiper.js</code>を利用するために、テーマの中で関連ファイルを読み込みます。
今回はWordPressでの利用が前提であったため、テーマ内にある<code>function.php</code>で、 
<code>wp_enqueue_script</code>および<code>wp_enqueue_style</code>を使って呼び出しをしています。
もし、WordPress以外の環境で追加する場合はHTMLファイル内で以下のように記述することになります。
<pre><code class="hljs language-html">&#x3C;!-- headタグの中に追加 -->
&#x3C;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.2.1/css/swiper.min.css">

&#x3C;!-- body閉じタグの直前に追加-->
&#x3C;script src='https://cdn.jsdelivr.net/npm/swiper@5.2.1/js/swiper.min.js'>&#x3C;/script></code></pre>
なお、サンプルではCDNから読み込みを行っていますが、 
もちろんローカルファイルに追加しても同じことは可能です。
<h3 id="contact-form7-コンタクト編集画面">Contact Form7 コンタクト編集画面</h3>
WordPressの管理画面 > お問い合わせ > コンタクトフォーム の順で進み、 
該当のお問い合わせ編集画面にてフォーム内容を作成します。
フォーム内容は任意ですが、<code>Swiper.js</code>を利用する前提だと、 
以下のような構成になっていることが必須です。
<pre><code class="hljs language-html">&#x3C;div class="swiper-container">
 &#x3C;div class="swiper-wrapper">
 &#x3C;div class="swiper-slide">
 ここにステップ式フォーム1
 &#x3C;/div>
 &#x3C;div class="swiper-slide">
 ここにステップ式フォーム2
 &#x3C;/div>
 &#x3C;div class="swiper-slide">
 ここにステップ式フォーム3
 &#x3C;/div>
 &#x3C;div class="swiper-slide">
 ここにステップ式フォーム4
 &#x3C;/div>
 &#x3C;/div>
&#x3C;/div></code></pre>
サンプルでは2つのステップにしていますが、<code>swiper-slide</code>クラスを増やせば、 
それだけ分割したフォームにすることが可能です。
<h3 id="swiperjsの初期化とステップフォームのための追加仕様を加える">Swiper.jsの初期化とステップフォームのための追加仕様を加える</h3>
実際にスライドが反映されるようにするために、以下のようにSwiper.jsの初期化を行います。
<pre><code class="hljs language-js">const swiperDemo = new Swiper('.swiper-container', {
 allowTouchMove: false
});</code></pre>
サンプルの仕様は、ボタンでのみスライドを進められるように設定しました。
なので、<code>allowTouchMove</code>（スワイプによるスライド操作可否）のオプションを追加し、 
ボタン操作でしか進めないようにするためにfalse（<code>allowTouchMove</code>を許可しない）にしています。
また、ステップフォームにおいてはEnterでの入力およびTabキーでのフィールド移動は 
予期せぬ挙動になるためどちらも禁止するためのJavaScriptを以下のように追加しています。
<pre><code class="hljs language-js">/* Contact Form7 におけるEnterでの送信を禁止するスクリプト
-----------------------------------------*/
function submitStop(e){

 if (!e) var e = window.event;
 if(e.keyCode == 13)
 return false;
}
window.onload = function (){
 var list = document.getElementsByTagName("input");
 for(var i=0; i&#x3C;list.length; i++){
 if(list[i].type == 'email' || list[i].type == 'password'|| list[i].type == 'text'|| list[i].type == 'number'){
 list[i].onkeypress = function (event){
 return submitStop(event);
 };
 }
 }
}

/* Tabキーは9
-----------------------------------------*/
window.onkeydown = function(e) {
 if (e.keyCode == 9)
 return false;
}
</code></pre>
<h2 id="最後に">最後に</h2>
Contact Form7はカスタマイズプラグインも多数配信されており<a href="https://ja.wordpress.org/plugins/multi-step-form/" target="_blank" rel="nofollow noopener noreferrer">Multi Step Form</a>など、 
ステップフォーム系のプラグインも用意されています。
なるべく自分で軽量化して実装したいという場合には、 
今回のコードが参考になると思いますので活用してみてください。

WordPressのお問合せフォームをステップ式にする方法

HTMLとCSSのみで作ったシンプルなボタンパーツです。 
サイトに合わせてカスタマイズする前提で最低限の構成にしています。
<h2 id="目次">目次</h2>
<ul>
<li><a href="#%E5%AE%9F%E8%A3%85%E3%81%AE%E7%B5%90%E6%9E%9C">実装の結果</a></li>
<li><a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a></li>
<li><a href="#%E5%BF%9C%E7%94%A8%E7%B7%A8%EF%BC%9A%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA">応用編：カスタマイズ</a></li>
<li><a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a></li>
</ul>
<h2 id="実装の結果">実装の結果</h2>
<iframe width="100%" height="300" src="//jsfiddle.net/sandygift/ecwrjy2z/1/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<h2 id="実際のコード">実際のコード</h2>
<pre><code class="hljs language-html">&#x3C;div class="btn">ボタン&#x3C;/div></code></pre>
<pre><code class="hljs language-scss">@mixin btn($bg, $color, $w, $h, $hover:true) {
 display: flex;
 justify-content: center;
 align-items: center;
 border: 1px solid $bg;
 box-shadow: darken($bg, 20%) 0 5px 0;
 background: $bg;
 color: $color;
 width: $w;
 height: $h;
 cursor: pointer;
 @if ($hover == true) {
 transition : all .3s ease 0s;
 &#x26;:hover {
 color: $bg;
 background: $color;
 box-shadow: none;
 }
 }
}

.btn {
 @include btn(#666, #fff, 200px, 50px);
}</code></pre>
なおCSSの場合は@mixinが利用できないため以下のような記述になります。
マルチクラスの想定であればある程度使い回せますが効率を考えると 
SCSSまたはSassで利用するほうがやはりオススメです。
<pre><code class="hljs language-scss">.btn {
 display: flex;
 justify-content: center;
 align-items: center;
 border: 1px solid #666;
 box-shadow: #333 0 5px 0;
 background: #666;
 color: #fff;
 width: 200px;
 height: 50px;
 cursor: pointer;
 transition : all .3s ease 0s;
}

.btn:hover {
 color: #666;
 background: #fff;
 box-shadow: none;
}</code></pre>
<h2 id="応用編：カスタマイズ">応用編：カスタマイズ</h2>
<pre><code class="hljs language-css">// 色とサイズを変えてみる
.btn1 {
 @include btn(#5d99c6, #fff, 220px, 44px);
}

// 色やサイズを変えつつ角丸にする
.btn2 {
 @include btn(#4f9a94, #80cbc4, 220px, 44px);
 border-radius: 5px;
}</code></pre>
<h2 id="最後に">最後に</h2>
最低限のスタイルをもたせた@mixinでパーツの原型を作っておくと、
応用も利かせやすく使い回しがはかどると思います。

HTMLとCSSのみで作ったシンプルでカスタマイズしやすいボタンパーツ

<code>jQuery</code>などのフレームワークを使わず素のJavaScriptのみで、 
クリックされた要素が何番目であるかを取得する方法をご紹介します。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
</li>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E8%A7%A3%E8%AA%AC">実装についての解説</a>
<ul>
<li><a href="#queryselectorall">querySelectorAll</a></li>
<li><a href="#foreach">forEach</a></li>
<li><a href="#addeventlistener">addEventListener</a></li>
<li><a href="#indexof">indexOf</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実際のコード">実際のコード</h2>
<pre><code class="hljs language-js">const elms = document.querySelectorAll(".elements");
let index;
elms.forEach((elm) => {
 elm.addEventListener("click", () => {
 index = [].slice.call(elms).indexOf(elm);
 });
});</code></pre>
<h2 id="実装についての解説">実装についての解説</h2>
ご紹介したJavaScriptについて解説します。
<pre><code class="hljs language-js">const elms = document.querySelectorAll(".elements");// elementsクラスを持つ要素をすべて取得
let index;// クリックした要素のインデックスを格納する変数
elms.forEach((elm) => {// elementsを持つ要素すべてに以下の処理を追加する
 elm.addEventListener("click", () => {// クリックしたときに
 index = [].slice.call(elms).indexOf(elm);// インデックスを変数indexへ格納する
 });
});</code></pre>
<h3 id="queryselectorall">querySelectorAll</h3>
<code>getElementById</code>や<code>getElementsByTagName</code>に比べるとパフォーマンスは少し劣りますが、 
jQueryライクな指定ができる<code>querySelectorAll</code>を利用しました。
<code>$(“.elements”)</code>と同じ感覚で、クラス名やタグ名を指定し要素を手軽に取得できます。
今回は複数要素の取得が必要だったのでAllを利用しましたが、 
単一の要素の場合は以下のように<code>querySelector</code>を使っての取得になります。
<pre><code class="hljs language-js">const elm = document.querySelector(".element");// elementクラスを持つ要素のうち最初に見つかったもののみ取得</code></pre>
<h3 id="foreach">forEach</h3>
<code>配列.forEach()</code>は、配列が持つすべての要素に対して繰り返し処理を実行する関数です。
どの要素もクリックした場合にイベントが発火する実装が必要なため、 
<code>forEach</code>を使ってすべての要素に設定しました。
以下部分の<code>elm</code>については任意の名称となり、 
<code>forEach</code>の処理の中では取り出した要素がこの<code>elm</code>に相当します。
<pre><code class="hljs language-js">const elms = document.querySelectorAll(".elements");
elms.forEach((elm) => {// elmsから取り出した要素はelmに入っている
 elm.addEventListener("click", () => {
 index = [].slice.call(elms).indexOf(elm);
 });
});</code></pre>
なお、正確には<code>querySelectorAll</code>で取得した要素は配列ではなく<code>NodeList</code>になります。 
※配列と同じようにforEachの利用が可能。
<h3 id="addeventlistener">addEventListener</h3>
イベントのトリガーとして<code>addEventListener</code>を採用しています。
「クリックされた要素は自分と同じクラスを持つ要素の中で何番目かを返す」 
という実装内容のため<code>type</code>は<code>click</code>を指定しました。
用意されているトリガーは様々あり、例えば以下のように指定すると 
対象となるinput要素の中身が変更される度に処理を行うという実装も可能です。
<pre><code class="hljs language-html">&#x3C;form action="" method="post">
 &#x3C;input type="text" class="test-field">
&#x3C;/form></code></pre>
<pre><code class="hljs language-js">const field = document.querySelector(".test-field");
field.addEventListener("keyup", () => {
 // ここに処理を書く
});</code></pre>
<h3 id="indexof">indexOf</h3>
指定した要素が配列の何番目にあるのか（インデックス）を取得する方法は 
<code>indexOf</code>メソッドを利用しました。
ただし、このメソッドは<code>NodeList</code>には利用ができないため 
以下の記述で配列へ変換したうえで実行しています。
<pre><code class="hljs language-js">[].slice.call(array).indexOf(element);
// [].slice.callはArray.prototype.slice.callの省略形。</code></pre>
<h2 id="最後に">最後に</h2>
WEBサイトを実装する際にjQueryを使う機会は、まだまだ非常に多いと思います。
ただフレームワークの読み込みによる遅延を考慮し、あえて使う必要がない場合は 
軽量な素のJavaScriptを使うほうが高速化につながります。

JavaScriptのみ（Vanilla JS）で何番目の要素がクリックされたのかを取得する方法

コピペで使えるパーツのご紹介です。 
今回はJavaScriptを使わずにHTMLとCSSのみでタブメニューを作ります。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AE%E7%B5%90%E6%9E%9C">実装の結果</a>
</li>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
</li>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E8%A7%A3%E8%AA%AC">実装についての解説</a>
<ul>
<li><a href="#html%E3%81%AE%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88">HTMLのポイント</a></li>
<li><a href="#css%E3%81%AE%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88">CSSのポイント</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実装の結果">実装の結果</h2>
<iframe width="100%" height="300" src="//jsfiddle.net/sandygift/wasf6Lm2/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<h2 id="実際のコード">実際のコード</h2>
<pre><code class="hljs language-html">&#x3C;div class="tab">
 &#x3C;input id="tab1" type="radio" name="tabs" class="tab__switch" checked="checked" />
 &#x3C;label class="tab__label" for="tab1">タブ 1&#x3C;/label>
 &#x3C;div class="tab__content">
 コンテンツ1
 &#x3C;/div>

 &#x3C;input id="tab2" type="radio" name="tabs" class="tab__switch" />
 &#x3C;label class="tab__label" for="tab2">タブ 2&#x3C;/label>
 &#x3C;div class="tab__content">
 コンテンツ2
 &#x3C;/div>

 &#x3C;input id="tab3" type="radio" name="tabs" class="tab__switch" />
 &#x3C;label class="tab__label" for="tab3">タブ 3&#x3C;/label>
 &#x3C;div class="tab__content">
 コンテンツ3
 &#x3C;/div>
&#x3C;!-- /.tab -->&#x3C;/div></code></pre>
<pre><code class="hljs language-scss">.tab {
 display: flex;
 flex-wrap: wrap;
 width: 100%;
 &#x26;__label {
 color: #fff;
 background: #ccc;
 margin-right: 5px;
 padding: 6px 16px;
 order:-1;
 cursor: pointer;
 }
 &#x26;__content {
 width: 100%;
 display: none;
 border: 1px solid #ccc;
 padding: 16px;
 }
 &#x26;__switch {
 display: none;
 }
 &#x26;__switch:checked+&#x26;__label {
 background: red;
 }
 &#x26;__switch:checked+&#x26;__label+&#x26;__content {
 display: block;
 }
}</code></pre>
Sassを使わずにCSSのみで実装する場合が以下になります。
<pre><code class="hljs language-css">.tab {
 display: flex;
 flex-wrap: wrap;
 width: 100%;
}

.tab__label {
 color: #fff;
 background: #ccc;
 margin-right: 5px;
 padding: 6px 16px;
 order:-1;
 cursor: pointer;
}

.tab__content {
 width: 100%;
 display: none;
 border: 1px solid #ccc;
 padding: 16px;
}

.tab__switch {
 display: none;
}

.tab__switch:checked + .tab__label {
 background: red;
}

.tab__switch:checked + .tab__label + .tab__content {
 display: block;
}</code></pre>
<h2 id="実装についての解説">実装についての解説</h2>
それぞれのコードのポイントを解説します。
<h3 id="htmlのポイント">HTMLのポイント</h3>
HTMLは基本的に静的（画面に表示後は変化しない）言語ですが、 
input要素はユーザーの入力を受け付けるため変化する要素になります。
この変化を流用するためにタブの部分をradio要素にし、 
labelを紐づけることでコンテンツの切り替えができる下準備をしました。
<pre><code class="hljs language-html">&#x3C;!-- ラジオボタンを作成しlabelと紐づけるためにidを指定しておく -->
&#x3C;!-- name部分はradioボタンをグループ化することで1つだけが選択できるようにするためにどのradioも同じ名前にしておく -->
&#x3C;input id="tab1" type="radio" name="tabs" class="tab__switch" checked="checked" />

&#x3C;!-- このラベルをクリックすることでradioボタンのオンとオフを切り替えるために、for属性で紐づくradioのidを指定 -->
&#x3C;label class="tab__label" for="tab1">タブ 1&#x3C;/label>

&#x3C;!-- 選択しているタブに応じて表示するコンテンツ内容 -->
&#x3C;div class="tab__content">
 コンテンツ1
&#x3C;/div></code></pre>
<h3 id="cssのポイント">CSSのポイント</h3>
重要となるのは隣接セレクタの+と疑似クラスセレクタである:checkedです。
これらの組み合わせでradioボタンをクリックする度に 
紐づくコンテンツの動的な切り替えを再現しています。
ポイントのひとつ目は、radioボタンは切り替え機能だけを利用したいため 
画面からは非表示にしていることです。
label（タブ 1やタブ 2といった部分）がそれぞれのradioに紐付いているので、 
クリックすることでオンとオフを切り替える機能のみ利用することができています。
ポイントのふたつ目はコンテンツの中身についても非表示にしていることです。 
そのうえでチェックがついたradioの隣のlabelの隣のコンテンツは表示するという 
指定を追加することでクリックしたタブに紐づくコンテンツだけが表示する仕様を再現しました。
<pre><code class="hljs language-css">/* 全体を囲んでいる要素でタブの横並びのためにflexを指定
-----------------------------------------*/
.tab {
 display: flex;
 flex-wrap: wrap;
 width: 100%;
}

/* タブ 1、タブ 2、タブ 3と表示しているlabel（タブメニュー部分）
-----------------------------------------*/
.tab__label {
 color: #fff;
 background: #ccc;
 margin-right: 5px;
 padding: 6px 16px;
 order:-1;
 cursor: pointer;
}

/* タブの中身となるコンテンツ。display: noneにして一旦画面から非表示にしている。
-----------------------------------------*/
.tab__content {
 width: 100%;
 display: none;
 border: 1px solid #ccc;
 padding: 16px;
}

/* radioボタン。あくまでも仕組みを利用するためのものなのでdisplay: noneを使って非表示にしている。
-----------------------------------------*/
.tab__switch {
 display: none;
}

/* チェックされているradioボタン　の隣にある　label　を　赤にする　という指定をしている
-----------------------------------------*/
.tab__switch:checked + .tab__label {
 background: red;
}

/* チェックされているradioボタン　の隣にある　label　の隣にある　コンテンツの中身　を表示する　という指定をしている
-----------------------------------------*/
.tab__switch:checked + .tab__label + .tab__content {
 display: block;
}</code></pre>
<h2 id="最後に">最後に</h2>
HTMLとCSSに動的な要素を与えるとすれば通常はJavaScriptを利用しますが、 
CSSもできることが増えてきているためかんたんな動きであれば 
単体で実現できるようになってきました。
どちらがベストかは内容によると思いますが、 
CSSのみで手軽に再現できますので参考になれば幸いです。

JavaScriptを使わずにHTMLとCSSだけでコンテンツの切り替えができるタブメニューを作る方法

アイコンのWEBフォントで有名な<a href="https://fontawesome.com/v4.7.0/" target="_blank" rel="nofollow noopener noreferrer">Font Awsome 4.7</a>を利用して、 
テキストの左または右にアイコンを表示するCSS（Sass/SCSS形式）をご紹介します。
よく使うデザインですので@mixin化することで使いまわしができるようにしました。 
コーディングの効率化を図ることができると思いますので、是非参考にしてみてください。
<h2 id="目次">目次</h2>
<ul>
<li>
<a href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">実際のコード</a>
</li>
<li>
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E8%A7%A3%E8%AA%AC">実装についての解説</a>
<ul>
<li><a href="#mixin%E3%81%AE%E4%BB%95%E6%A7%98">@mixinの仕様</a></li>
<li><a href="#css%EF%BC%88sassscss%E5%BD%A2%E5%BC%8F%EF%BC%89%E3%81%A7%E3%81%AE%E5%88%A9%E7%94%A8%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">CSS（Sass/SCSS形式）での利用について</a></li>
</ul>
</li>
<li>
<a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a>
</li>
</ul>
<h2 id="実際のコード">実際のコード</h2>
<pre><code class="hljs language-scss">/* mixin
-----------------------------------------*/
@mixin icon-fa($position: before,$icon: "\f099") {
 @if $position == before {
 &#x26;:before {
 content: $icon;
 font-family: FontAwesome;
 @content;
 }
 }
 @else {
 &#x26;:after {
 content: $icon;
 font-family: FontAwesome;
 @content;
 }
 }
}

/* 使い方（Twitterアイコンを左に表示）
-----------------------------------------*/
.sample-ttl {
 @include icon-fa($position: before,$icon: "\f099") {
 font-size: 24px;
 color: #1DA1F2;
 margin: 0 8px 0 0;
 }
}

/* 使い方（Twitterアイコンを右に表示）
-----------------------------------------*/
.sample-ttl {
 @include icon-fa($position: after,$icon: "\f099") {
 font-size: 24px;
 color: #1DA1F2;
 margin: 0 0 0 8px;
 }
}</code></pre>
<h2 id="実装についての解説">実装についての解説</h2>
ご紹介したCSSについて解説します。
<h3 id="mixinの仕様">@mixinの仕様</h3>
<pre><code class="hljs language-scss">/* mixin
-----------------------------------------*/
@mixin icon-fa($position: before,$icon: "\f099") {
 @if $position == before {// もし$positionがbeforeなら
 &#x26;:before {// 要素の左側に
 content: $icon;// $iconで指定したアイコンを表示
 font-family: FontAwesome;// Font Awesomeで表示
 @content;// 追加でスタイルを指定することも可能に
 }
 }
 @else {// もし$positionがbefore以外なら
 &#x26;:after {// 要素の右側に
 content: $icon;// $iconで指定したアイコンを表示
 font-family: FontAwesome;// Font Awesomeで表示
 @content;// 追加でスタイルを指定することも可能に
 }
 }
}</code></pre>
この@mixinには必ず指定する引数として、<code>$position（before or after）</code>と 
<code>$icon</code>（Font Awesomeのアイコン指定）を持たせています。
<code>$position</code>は<code>before</code>の値が入れば左に表示、それ以外は右に表示という構成ですので、 
<code>after</code>以外の値を渡しても右に表示という指定になります。
アイコンのフォントサイズ・色・余白などはデザインによって変動するため 
あとから追加スタイルが加えられるように@content指定を加えています。
<h3 id="css（sassscss形式）での利用について">CSS（Sass/SCSS形式）での利用について</h3>
<pre><code class="hljs language-scss">/* 使い方（Twitterアイコンを左に表示）
-----------------------------------------*/
.sample-ttl {
 @include icon-fa($position: before,$icon: "\f099") {
 font-size: 24px;
 color: #1DA1F2;
 margin: 0 8px 0 0;
 }
}

/* 使い方（Twitterアイコンを右に表示）
-----------------------------------------*/
.sample-ttl {
 @include icon-fa($position: after,$icon: "\f099") {
 font-size: 24px;
 color: #1DA1F2;
 margin: 0 0 0 8px;
 }
}</code></pre>
<code>@mixin</code>は<code>@include</code>で呼び出すことで実際に適用することが可能です。
サンプルのコードでは、大きさを24px、色をTwitterのコーポレートカラー、 
位置に応じて左か右に8pxの余白が入るように指定しています。
<h2 id="最後に">最後に</h2>
ご紹介したコードの実装は<a href="https://fontawesome.com/v4.7.0/" target="_blank" rel="nofollow noopener noreferrer">Font Awsome 4.7</a>および<a href="https://sass-lang.com/" target="_blank" rel="nofollow noopener noreferrer">Sass</a>が利用できる環境が前提となります。

NEW

POPULAR

左右交互のレイアウトをCSS（flexbox）を使ってかんたんに作る方法

HTML5でWebページを作る場合の基本テンプレート【2020年版】

iPhoneでスーパーリロードを可能にするショートカット

COLUMN