スマホで電話番号などに自動的にリンクが付くのを防ぐ方法

自動的に設定されるリンクを無効化する
スマホ対応のレスポンシブサイトを制作しているのですが、スマホのブラウザによっては勝手にリンクが設定されてしまい、どうにかならないかと調べた方法をメモ。
私はiPhoneをメインに使用していますが、iOS対応ブラウザとしてSafariはもちろん、Chrome、Edge、Bravaが入っていますが、それぞれ違った挙動でリンクが貼られてしまい困りました。
メタタグを使用する方法
<head>～</head>の間に以下のタグを埋め込みます。
&l…

ホームページの背景として動画を埋め込む際に行うことや気を付けること

デザインの一部として背景に動画を使う上で、以下のことが気になったのでメモ。

動画の容量
再生時間
画面サイズ
ファイル形式
モバイル対応でするべきこと

調べて分かったこと
動画の解像度やファイルサイズ
動画のファイルサイズが大きいと読み込みに時間がかかり、モバイル通信では容量を大量に消費させてしまいます。反対に、ファイルサイズが小さければ読み込み時間が短くなり、すぐに再生が始まります。訪問者に対して快適に閲覧してもらえるWebページにするためには、動画ファイルはなるべく小さく…

【jQuery】モバイルにも対応したLightbox以外のモーダルウィンドウプラグイン

簡単で便利なLightboxを探す
画像ギャラリーの写真を拡大するLightboxで、モバイルに対応していて、設置が簡単で操作性たいいものを探してして見つけたものをメモ。
Fancybox
モバイルにも対応していて、設置が簡単。モーダルで表示したら「前へ」「次へ」と画像を切り替えることができ、Youtubeを含めiFrameに対応している。jQueryが必要。

CDN

Lightcase
これもモバイルやYoutubeに対応しているが、Fancyboxの方が使いやすそう。j…

【PHP】$_POST,$_GET,$_SESSIONのすべての値をvar_dumpで改行して表示する方法

デバッグ情報を改行したい
PHPで$_POST[‘$key’]など変数に格納されているすべて値を表示したいときにecho var_dump($_POST)とすることがありますが、一列でダラダラをデバッグ表示されるので、沢山あると正直見にくいです。
そこで、<pre></pre>で囲むと改行して表示されるというこが分かりましたのでメモ。
var_dumpのサンプル

<?php //<!– ↓↓デバッグ↓↓ –>
echo "<h5>…

jQuery不要！Bootstrap5.0だけで実現するモーダルウィンドウのサンプル

Bootstrapだけでモーダルウィンドウが使える
CSSフレームワークとしてBootstrap5.0を使ったサイトを制作していて、『簡単に設置できるモーダルウィンドウがないかな？』と探していたところ、特殊なJavascriptやjQueryを使わなくても、Bootstrapの標準機能としてモーダルウィンドウが使えるのを知りました。
ちなみに、モーダルウィンドウとは画像などをポップアップで表示してくれるLightboox2やSlimbox2みたいに、テキストやHTMLをページ全面にポップアップで表示…

【DIY】色褪せたスエード靴を塗装するための染料・塗料

スウェード靴用の塗料
色褪せたスエード靴を染め直すための塗料として染めQ（ソメキュー）とかありますが、何度も塗ると表面がパリパリに硬くなってしまいます。そこで、染めQ以外にないか探したらいろいろ見つけたのでメモ。
スポンジタッチ・マジックタイプ

ハケで塗るタイプ

スプレータイプ

…