HTML/CSS SVG画像を背景指定した際にサイズ指定が反映されない場合の解決方法
SVG画像を背景に設定し、CSSでbackground-sizeを指定しても反映されない場合は、以下コードをSVGファイルの<svg>タグに追記すると解決します。preserveAspectRatio="none"SVG画像、超便利ですよね...
2019-09
HTML/CSS 
JavaScript,jQuery bxSliderで縦スワイプを無効にする方法
たまにややこしい要望があるときはスライダーを自作しますが、基本的には「bxSlider」を使用しています。ただ、1つ問題なのは、スマホ時にスワイプしていっていると、スライダーの上でスワイプが効かなくて、イーッ！となります。ファーストビューで...
HTML/CSS Google Material Iconsの使い方と疑似要素で使う方法（IE11対応）
Googleが提供しているアイコンフォトで、Google Material Iconsというものがあります。Fontawesomeが登録制となってしまったので、登録とかの手間が面倒だという方は、ちょっと数が少なめですがこちらを使うのもよいか...
HTML/CSS svgをuseタグで読み込んだ時にpath毎に色を変える方法（※IE以外）
svgをuseタグで読み込んだときに、なんとかpath毎に色が変えたくて試行錯誤していたところ、大変素晴らしい記事を見つけました。参考：SVGアイコンをCSS変数とか併せて良さげに使う<svg xmlns="" class="test-sy...
HTML/CSS 電話リンク（href=”tel:”）をスマホでのみ効くようにする
電話番号をタップして電話をかける、スマートフォンでウェブサイトを見る人向けに当然必要となります。が、ものぐさなコーディングで、パソコンでもリンクがクリックできる状態にしていると、お客様から「なんか電話番号クリックしたらエラー出るんですけど！...
その他 Googleしごと検索に対応するための構造化データマークアップ
下記のJavaScriptをhtml,php内に記述してアップロードすればOK。SearchConsoleでクロール申請と、その後の確認はしましょう。<script type="application/ld+json">{ "@contex...
その他 Instagramの写真をサイトに埋め込んで自動表示する方法
※InstagramGraphAPIが5.0になりました。以下記事を参考下さい。お客様からよくある要望の一つで、インスタグラムでアップしたら自動的にホームページに載せたいというものがあります。一昔前なら、インスタグラムのAPIでササ―っと実...
JavaScript,jQuery jQueryプラグインで半角数字のみ入力可能にする方法
お客様より、フォームのinputで、郵便番号などで半角数字のみを入力できるようにしてほしいと要望がありました。とりあえずググった情報で、jQueryで半角数字のみ入力可能としてみました。その際、矢印やら削除キーを動くようにもしました。が、「...
PHP phpでテスト環境を簡単に作成する方法の１つ
ページのこの部分直して、一度テストでブラウザ確認したい。そういった時、作り方を改善すればいいかもしれない問題ですが、例えばワードプレスなんかで「page-▲▲.php」で固定ページを作成している場合、単純に複製したとしてもテストページは作れ...
VisualStudioCode Visual Studio Codeおすすめ拡張機能
コーディングするときは、Visual Studio Code（以下vscode）を使用しております。非常に素晴らしいエディタだと思います。欲を言えば、DreamWeaverのように、エクセルのセルをコピーしてエディタ上でペーストすることによ...