JavaScriptJavaScriptの引数にオブジェクトを使用する なにかしらの処理をする関数があるとして、途中から意図せず引数が増えていってしまう場合があります。 function example(paramA,pa...2023.09.07JavaScript
JavaScriptslick.jsで画像のカルーセルをつくるとき、decoding属性があると表示されなかった話 原因の究明も深追いもしていないので、こういう事例があるのだなーぐらいで読んでいただけると幸いです。 先日、カラーミーショップの簡易パフォーマンス改善を承...2023.08.30JavaScript
WordPressWordPressをヘッドレスCMS化した話 このたび長年放置していたWordPressサイト(このサイトではない)をヘッドレス化することにしました。 WPのヘッドレス化に至った理由としては、 ...2023.08.30WordPress
JavaScriptVueテンプレートのループ覚書 Vuejsのテンプレートで初めてループ処理を書くとき、いくつか引っ掛かったので備忘録としてまとめます。 v-forとv-ifを同時に使いたいとき ...2023.06.21JavaScript
WordPressWordPress REST APIを特定のサイトにのみ許可する WordPressのREST APIは標準で公開されておりサイトURLさえ知っていれば誰でも利用できます(セキュリティ系プラグインなどがRestAPIを無効化...2023.08.30WordPress
WordPress画像ファイルの保存先をサブドメインに変更する 【WordPress】 RestAPIを使用してWordPressをヘッドレスCMSとして使うにあたり、投稿ページなどのURLは問題ないとしてメディアファイルのURLは元のままなのが...2023.08.30WordPress
css否定擬似クラス、:not()の詳細度 まれに疑似クラス:not()が予想とちがう振る舞い(効いてほしくないところに効く)をすることがあったので、cssの詳細度についてきちんと調べ直しました。 ...2023.01.25css
css兄弟要素をもたない要素を指定する疑似クラス、:only-child タイトルの通りです。 :only-child疑似クラスを使用すると、兄弟要素を持たない要素を指定することができます。 個人的にはリスト(ul, o...2022.11.21css
cssFirefoxブラウザで:hasセレクタを試す方法 「画期的な発明、hasセレクタ」でご紹介した新しいCSSセレクタである「:has()」ですが、今のところFirefoxが対応していません。 その...2022.11.08css
cssinput[type=number]の矢印を消したい時のCSS input要素の入力値を数値に指定する type=number に設定すると、既定で上下の矢印が表示されます。 これを消したいときに設定するCS...2022.11.24css
css画期的な発明、:hasセレクタ これまでのcssは、先にある要素 → 後にある要素 の順番(親→子、兄→弟、隣)で詳細度を高めるしかありませんでした。 それを逆向きに指定できるようにな...2022.09.24css
csscounter関数の使い方 [CSS] cssのcounter変数を利用すると、指定の要素に任意のcounterを設定することができ、設定されたcounterはcontentで利用することが...2022.04.23css
cssCSS 属性セレクターの備忘録 属性(attribute)を利用したCSSセレクタ。混乱してどれを使うかわからなくなることがあるので備忘録でまとめておきます。 属性セレ...2022.04.23css
css段組みレイアウトに関係するcssプロパティ つづいて、columnsプロパティに関係してくるcssプロパティの話です。前記事は「columnsで作る段組みレイアウト」 まずは、段組みレイアウトにお...2022.04.23css
csscolumnsで作る段組みレイアウト columnsで作る段組みレイアウト 最近のWEBサイトレイアウトはgridあるいはflexで設計するのが一般的ですが、もう少しするとそれも古い話と...2022.04.23css
css画像やiframeのサイズ(アスペクト比)を指定できるcssプロパティ、「aspect-ratio」 .noratio .wp-block-column, .ratio .wp-block-column { flex-basis:33%!important;...2022.04.21css
cssモダンブラウザのconic-gradient対応が完了していた 円錐状のグラデーションを描写するconic-gradient。conicはconicalのことだそうです。コーヒーミルの種類にコニカルカッターってありますけど...2022.04.23css
cssfont-sizeはclamp()関数で指定するのが良さそう これまでcssのサイズ指定はスクリーンサイズ別に指定していましたが、clamp関数を使うことで一行にすべてが収まります。たとえばwidth:50vw;min-width:300px;max-width:1000px というcss指定は、width:clamp(300px,50vw,1000px); の一行に収まります。2022.04.19css
HTMLモーダルをdialog要素で実装してみる 主要ブラウザがdialog要素が対応してそろそろ1年経つので、そろそろ良いだろうと実際の制作で使用してみました。 dialog要素を使用することによって...2023.03.17HTML
HTMLレスポンシブ画像のまとめ ブラウザサイズや解像度(retinaディスプレイ / デバイスピクセル比)に応じて画像ファイルを振り分けるレスポンシブイメージ。srcset sizes などのタグを使ったレスポンシブ画像の記述方法についてまとめます。2022.04.23HTML
HTMLoption名が長すぎて表示できない問題にはoptgroup optionの名前が長すぎると、画面幅からはみ出た部分が表示されない問題が起こりますが、optgroupタグで入れ子にすると自動的に改行、または文字サイズが縮小され途中で省略されずに表示できるようになります。2022.04.23HTML
HTMLschemaに関する備忘録 随時追加 itemtype="〜WebPage"をより具体的に指定する場合。 以下の値を使用できる。 ItemPageContact...2022.04.23HTML
HTMLabbrタグとrubyタグ 自分の無知を晒す話ですが、今の今まで< abbr >タグの意味を二重に取り違えていたので、反省の意味を込めて正しい意味と使い方をまとめておきます。...2022.04.19HTML
HTMLGoogle Font利用時の表示速度が遅い対策 使いやすくて便利なWebフォントの代表格「GoogleFont」ですが、フォントはどうしたって結構なデータサイズなので、PageSpeedInsigh...2022.04.23HTML
HTML住所からシンプルなGoogleMapを生成する 入力された住所からGoogleMapを表示させようと思い、どうすれば一番楽かなと調べてみるとapiを使った方法ばかり出てきたのですが、今回は単純に地図を表示さ...2022.01.06HTML
HTML【備忘録】パンくずリストはolでつくる 最近コーディングするにあたり、WAI-ARIAを極力使うように個人的に気をつけています。先日更新したでも、アクセシビリティを意識しながら作りました。 W...2022.01.06HTML
HTMLSVGアイコンのアクセシビリティ 最近以前作ったサイトの見直しをしていて、svgアイコンのアクセシビリティはこれで大丈夫なのか?と気になりました。 アクセシビリティとは何?という...2023.08.30HTML
HTMLSVGで基本の図形描写 – 1 拡大/縮小しても描写が崩れないSVG。アイコンや背景素材としてもすっかりポピュラーになりました。 今回はpathなどを使う複雑なものではなく、丸...2022.04.23HTML
HTML疑似要素のFont Awesomeが表示されない原因 つい先程「PayPayのネットショッピング対応まとめ」を書いたときに引っかかったので同じ問題につまずいた人の為に残しておきます。 疑似要素に指定したf...2022.04.24HTML
HTMLFontAwesomeの必要なアイコンだけを使いたい FontAwesomeは汎用性の高いアイコンが豊富で非常に使い勝手も良いのですが、そのままダウンロードして使うとやりとりするデータ量が大きくなるのが難...2022.04.24HTML
JavaScriptJavaScriptの引数にオブジェクトを使用する なにかしらの処理をする関数があるとして、途中から意図せず引数が増えていってしまう場合があります。 function example(paramA,pa...2023.09.07JavaScript
JavaScriptslick.jsで画像のカルーセルをつくるとき、decoding属性があると表示されなかった話 原因の究明も深追いもしていないので、こういう事例があるのだなーぐらいで読んでいただけると幸いです。 先日、カラーミーショップの簡易パフォーマンス改善を承...2023.08.30JavaScript
JavaScriptVueテンプレートのループ覚書 Vuejsのテンプレートで初めてループ処理を書くとき、いくつか引っ掛かったので備忘録としてまとめます。 v-forとv-ifを同時に使いたいとき ...2023.06.21JavaScript
JavaScriptSwiperで複数のスライドを連動する方法 Swiperのcontrollerメソッドを使うことで、複数のスライドを同時に動かすことができます。 // 3つのスライドをすべて連動させあうサンプル ...2023.01.22JavaScript
JavaScript配列内の要素すべてが条件に一致しているかチェックするArray.every() ある文字列が複数条件にマッチするか調べる良い方法がないかと考えていたら、every()メソッドを使うのが一番スマートのようでしたので備忘録。 e...2022.11.11JavaScript
JavaScriptJavaScriptのレスポンシブ CSSで@media screenをつかってレスポンシブなデザインを作るように、JavaScriptでもメディアクエリにあわせた設定が可能です。 ...2022.11.10JavaScript
JavaScriptselect要素のoptionを操作するときのJavaScript たまに使うと忘れているので自分用メモ。 選択されているoption要素のvalueではなく要素自体(テキスト)を取得 手順 直接op...2022.10.25JavaScript
JavaScriptObjectをkey,valueで呼び出す ループの中でオブジェクトをkey、valueで呼出したいときの備忘録です。 Object.entries(object)を使う Object.en...2022.09.20JavaScript
JavaScript【非同期通信】fetchの完了を待って続きの処理を行う これまでasync / await をなんとなくでしか理解していなかったばかりに盛大に時間をロスしてしまったので反省として記録にまとめます。 今後どなた...2022.09.20JavaScript
JavaScript初心者向け Swiper jsの使い方 覚書 Twitterに勝手に表示されるおすすめ投稿で「Swiperの使い方がわからない!」という叫びと、それに共感する声をたくさん見たので、ざっくりとした基本の使い...2022.06.26JavaScript
JavaScriptDOMの変化を監視してくれるMutation Observer Java ScriptのObserver(監視者)にはいくつか種類がありますが、Mutation ObserverはDOMの変更を監視してくれます。 単...2022.04.19JavaScript
JavaScriptページ内リンクのスクロールを簡単に実装できるscrollIntoView 同じページ内を移動するリンクスクロールは、今やcssのscroll-behaviorプロパティだけでも実装できますが、どうしてもJava Script...2022.04.23JavaScript