JavaScript [JavaScript]select（選択要素）で選択中のoption要素を取得する
value値ではなく、要素そのものを取得する方法です。最も有効活用できるパターンはoptionに設定されたデータ要素などを取得する場合でしょうか。
JavaScript 
WordPress [WordPress]カスタム投稿一覧にカスタムフィールドの値を簡単に表示する関数
カスタム投稿一覧の「カテゴリ」「タグ」などと一緒にカスタムフィールドの値を一覧で表示します。functions.phpに一つ一つ記載していく方法もありますが、カスタム投稿や項目が多いと記載が長くわかりにくくなってしまうため、簡単に設定でき...
WordPress [WordPress]ページテンプレートなどに適切な方法でCSSやJSを読み込む
functions.phpで一元管理する方法もありますが、今回はテンプレートに直接記載する方法です。全体で利用しない、そのテンプレートだけで読み込む場合、function.phpに追記しない場合などに使い分けます。
使い方
...
CSS [CSSのみ]ページ内リンク（アンカーリンク）をスクロールさせる
CSSのみでスムーススクロールする方法を紹介します。JavaScriptを使った記事はこちら。
CSS
html {
scroll-behavior: smooth;
}
「scroll-behavior...
JavaScript [JavaScript]ページ内リンク（アンカーリンク）をスクロールさせる
アンカーリンクをクリックしたときにススーッとスクロールさせます。このサイト全体に実装しているので、上記の目次で試すことができます。
CSSを使った記事はこちら。
HTML
<a href="#s1"&g...
CSS [CSS]SVG画像を使って波線を表現する
CSSで波線を表現したい場合「text-decoration-style: wavy;」というプロパティが用意されていますが、波線の形などを調整することができません。
そこで今回は波線をSVG画像で作成し、CSSで表示する方法です。
HTML [サクッと]ファイルアップロード(input type=”file”)にサイズ制限を設ける
ファイルアップロード(input type="file")にサイズ制限を設ける方法です。
サンプル
上記のサンプルでは実際にアップロードされることはありません。
HTML
<input type=...
HTML [サクッと]input type=checkboxに上限を設ける[JavaScript]
複数選択可能なチェックボックスに上限を設ける方法です。
サンプル
選択肢1
選択肢2
選択肢3
選択肢4
選択肢5
選択肢6
選択肢7
HTML
<input type="checkbox" name="...
CSS [サクッと]レスポンシブ対応Youtube埋め込み[CSS]
比率を保ったままレスポンシブで拡大・縮小できるYoutube埋め込み。
サンプル
HTML
<div class="youtube-wrapper">
<div clas...
JavaScript [swiper]hashを使わず特定のスライドから始める
Swiperで特定のスライドから始めたい場合はAPIの「Hash Navigation」が便利ですが、以下のような問題があります。
URLのハッシュが連動して変わっていくことが気になる。ハッシュを複数使い分けることはできないため、ア...