Shopify Shopifyで商品コレクションをランダムソートする [WareHouseテーマ]
「Shopifyでコレクションをランダム出力したい」とご依頼いただいたのですが、かなり地獄のようなハマり方をしてしまったので、メモとして残しておきます。どなたか...
新着記事
Shopify 
HTML popover属性で作るJavaScriptなしのポップアップ
popover 属性を使うと、JavaScriptを書かずに簡易なポップアップを実装できます。しばらくコーディングから離れていましたが、HTMLもどんどん進化し...
JavaScript @graph を使った構造化データのメリットと設定方法
Webページの情報を検索エンジンに伝えるために利用される構造化データ。直接HTMLにマークアップして出力することもできますが、多くの場合は JavaScript...
Python Flask-CORSの使い方 [備忘録]
すぐに忘れるのでFlask-CORSの設定をまとめます。基本的な使い方from flask import Flaskfrom flask_cors import...
HTML [HTML] picture要素の備忘録
webPやAvif対応ブラウザが少なかった頃にはよく使用していましたが、最近はご無沙汰になっていたpicture要素。メディアクエリやファイル形式の違いなど、条...
HTML fieldset要素がオーバーフローしてしまうときはmin-widthを指定
formの選択肢をfieldsetでまとめた際に、親要素のサイズをオーバーフローしてしまうトラブルに遭いました。具体的には、下のようなオーバーフローするfiel...
css
css 否定擬似クラス、:not()の詳細度
まれに疑似クラス:not()が予想とちがう振る舞い（効いてほしくないところに効く）をすることがあったので、cssの詳細度についてきちんと調べ直しました。素直な感...
css 兄弟要素をもたない要素を指定する疑似クラス、:only-child
タイトルの通りです。:only-child疑似クラスを使用すると、兄弟要素を持たない要素を指定することができます。個人的にはリスト（ul, ol, dl）のレイ...
css Firefoxブラウザで:hasセレクタを試す方法
「画期的な発明、hasセレクタ」でご紹介した新しいCSSセレクタである「:has()」ですが、今のところFirefoxが対応していません。その為、実際のサイト制...
css input[type=number]の矢印を消したい時のCSS
input要素の入力値を数値に指定する type=number に設定すると、既定で上下の矢印が表示されます。これを消したいときに設定するCSSをメモ。chro...
css 画期的な発明、:hasセレクタ
これまでのcssは、先にある要素 → 後にある要素 の順番(親→子、兄→弟、隣)で詳細度を高めるしかありませんでした。それを逆向きに指定できるようになったのがh...
css counter関数の使い方 [CSS]
cssのcounter変数を利用すると、指定の要素に任意のcounterを設定することができ、設定されたcounterはcontentで利用することができます。...
css CSS 属性セレクターの備忘録
属性（attribute）を利用したCSSセレクタ。混乱してどれを使うかわからなくなることがあるので備忘録でまとめておきます。属性セレクタとは解説サイトなどでは...
css 段組みレイアウトに関係するcssプロパティ
つづいて、columnsプロパティに関係してくるcssプロパティの話です。前記事は「columnsで作る段組みレイアウト」まずは、段組みレイアウトにおいて全幅表...
css columnsで作る段組みレイアウト
columnsで作る段組みレイアウト最近のWEBサイトレイアウトはgridあるいはflexで設計するのが一般的ですが、もう少しするとそれも古い話となるのかも知れ...
css 画像やiframeのサイズ(アスペクト比)を指定できるcssプロパティ、「aspect-ratio」
.noratio .wp-block-column,.ratio .wp-block-column { flex-basis:33%!important; ma...
css モダンブラウザのconic-gradient対応が完了していた
円錐状のグラデーションを描写するconic-gradient。conicはconicalのことだそうです。コーヒーミルの種類にコニカルカッターってありますけど、...
css font-sizeはclamp()関数で指定するのが良さそう
これまでcssのサイズ指定はスクリーンサイズ別に指定していましたが、clamp関数を使うことで一行にすべてが収まります。たとえばwidth:50vw;min-width:300px;max-width:1000px というcss指定は、width:clamp(300px,50vw,1000px); の一行に収まります。
HTML
HTML popover属性で作るJavaScriptなしのポップアップ
popover 属性を使うと、JavaScriptを書かずに簡易なポップアップを実装できます。しばらくコーディングから離れていましたが、HTMLもどんどん進化し...
HTML [HTML] picture要素の備忘録
webPやAvif対応ブラウザが少なかった頃にはよく使用していましたが、最近はご無沙汰になっていたpicture要素。メディアクエリやファイル形式の違いなど、条...
HTML fieldset要素がオーバーフローしてしまうときはmin-widthを指定
formの選択肢をfieldsetでまとめた際に、親要素のサイズをオーバーフローしてしまうトラブルに遭いました。具体的には、下のようなオーバーフローするfiel...
HTML モーダルをdialog要素で実装してみる
主要ブラウザがdialog要素が対応してそろそろ1年経つので、そろそろ良いだろうと実際の制作で使用してみました。dialog要素を使用することによって得られるメ...
HTML レスポンシブ画像のまとめ
ブラウザサイズや解像度（retinaディスプレイ / デバイスピクセル比）に応じて画像ファイルを振り分けるレスポンシブイメージ。srcset sizes などのタグを使ったレスポンシブ画像の記述方法についてまとめます。
HTML option名が長すぎて表示できない問題にはoptgroup
optionの名前が長すぎると、画面幅からはみ出た部分が表示されない問題が起こりますが、optgroupタグで入れ子にすると自動的に改行、または文字サイズが縮小され途中で省略されずに表示できるようになります。
HTML schemaに関する備忘録
随時追加itemtype="〜WebPage"をより具体的に指定する場合。以下の値を使用できる。ItemPageContactPageFAQPageQAPage...
HTML abbrタグとrubyタグ
自分の無知を晒す話ですが、今の今まで< abbr >タグの意味を二重に取り違えていたので、反省の意味を込めて正しい意味と使い方をまとめておきます。利用頻度として...
HTML Google Font利用時の表示速度が遅い対策
使いやすくて便利なWebフォントの代表格「GoogleFont」ですが、フォントはどうしたって結構なデータサイズなので、PageSpeedInsightsなどで...
HTML 住所からシンプルなGoogleMapを生成する
入力された住所からGoogleMapを表示させようと思い、どうすれば一番楽かなと調べてみるとapiを使った方法ばかり出てきたのですが、今回は単純に地図を表示させ...
HTML 【備忘録】パンくずリストはolでつくる
最近コーディングするにあたり、WAI-ARIAを極力使うように個人的に気をつけています。先日更新したでも、アクセシビリティを意識しながら作りました。WAI-AR...
HTML SVGアイコンのアクセシビリティ
最近以前作ったサイトの見直しをしていて、svgアイコンのアクセシビリティはこれで大丈夫なのか？と気になりました。アクセシビリティとは何？という方に簡単に説明する...
JavaScript
JavaScript @graph を使った構造化データのメリットと設定方法
Webページの情報を検索エンジンに伝えるために利用される構造化データ。直接HTMLにマークアップして出力することもできますが、多くの場合は JavaScript...
JavaScript JavaScriptの引数にオブジェクトを使用する
なにかしらの処理をする関数があるとして、途中から意図せず引数が増えていってしまう場合があります。function example(paramA,paramB,....
JavaScript slick.jsで画像のカルーセルをつくるとき、decoding属性があると表示されなかった話
原因の究明も深追いもしていないので、こういう事例があるのだなーぐらいで読んでいただけると幸いです。先日、カラーミーショップの簡易パフォーマンス改善を承り、画像の...
JavaScript Vueテンプレートのループ覚書
Vuejsのテンプレートで初めてループ処理を書くとき、いくつか引っ掛かったので備忘録としてまとめます。v-forとv-ifを同時に使いたいときv-forとv-i...
JavaScript Swiperで複数のスライドを連動する方法
Swiperのcontrollerメソッドを使うことで、複数のスライドを同時に動かすことができます。// 3つのスライドをすべて連動させあうサンプルconst ...
JavaScript 配列内の要素すべてが条件に一致しているかチェックするArray.every()
ある文字列が複数条件にマッチするか調べる良い方法がないかと考えていたら、every()メソッドを使うのが一番スマートのようでしたので備忘録。every()、基本...
JavaScript JavaScriptのレスポンシブ
CSSで@media screenをつかってレスポンシブなデザインを作るように、JavaScriptでもメディアクエリにあわせた設定が可能です。window.m...
JavaScript select要素のoptionを操作するときのJavaScript
たまに使うと忘れているので自分用メモ。選択されているoption要素のvalueではなく要素自体（テキスト）を取得手順直接optionを指定することはできないの...
JavaScript Objectをkey,valueで呼び出す
ループの中でオブジェクトをkey、valueで呼出したいときの備忘録です。Object.entries(object)を使うObject.entries( )を...
JavaScript 【非同期通信】fetchの完了を待って続きの処理を行う
これまでasync / await をなんとなくでしか理解していなかったばかりに盛大に時間をロスしてしまったので反省として記録にまとめます。今後どなたかの役に立...
JavaScript 初心者向け Swiper jsの使い方 覚書
Twitterに勝手に表示されるおすすめ投稿で「Swiperの使い方がわからない！」という叫びと、それに共感する声をたくさん見たので、ざっくりとした基本の使い方...
JavaScript DOMの変化を監視してくれるMutation Observer
Java ScriptのObserver（監視者）にはいくつか種類がありますが、Mutation ObserverはDOMの変更を監視してくれます。単純にDOM...