Web制作 Yu Gothic UIで一部の記号が重なって見える
ウェブサイトのフォントにYu Gothic UIが適用されてしまっている場合、Microsoft Edge環境では「」、【】、『』などの記号同士や、・と「」が組み合わさった場合に文字同士が重なって見えることがあります。CSSのfont-fa...
Web制作
Web制作 
Web制作 拡張子が.ppkの秘密鍵をMacでSSH接続できるように.pemに変換する
拡張子が.ppkの秘密鍵とはWindowsで使えるPuTTY（ターミナルエミュレータ）はputtygenという鍵ジェネレータを持っていて、これで鍵を生成すると拡張子が.ppkのPuTTY形式の鍵が生成されます。OpenSSH形式に変換するM...
Web制作 【Swiper】ズームしながらフェードで切り替わるスライダーを実装する
JavaScriptライブラリ「Swiper」を使って、ズームしながらフェードで切り替わるスライダーを実装します。Swiperの読み込み通常通りSwiperのCSSとJavaScriptを読み込みます。<link rel="styleshe...
Web制作 【MW WP Form】ラジオボタンの選択内容によって送信先メールアドレスを変える
WordPressのプラグイン「MW WP Form」を使用したフォームで、選択内容によって送信先メールアドレスを振り分ける方法です。管理画面ラジオボタンラジオボタンを以下のように設定します。nameやchildrenに関しては適宜変更して...
Web制作 .htaccessでリダイレクトをかける際、アンカーリンクの#がエンコードされてしまう
#はエンコードされてしまうので、そのままだと正しい位置にリダイレクトできません。エンコードを避けるには、書き換えるルールにNEフラグを追加します。ダメな例RewriteRule ^/test.html /test.html#anchor 成...
Web制作 【SASS】文字列を置換する
SASSで文字列の置換をしたい場合、SASSには文字列の置換に関する関数が存在しないため次のような関数を自分で定義して代用します。関数（SCSS）@function str-replace($substr, $newsubstr, $str...
Web制作 【CSS】モーダルウインドウ実装時に後ろの要素がスクロールするのを防ぐ （スクロール連鎖防止）
position: fixedで配置した要素の後ろの要素がスクロールしてしまうモーダルウインドウなどposition: fixedでスクロール可能な要素を固定して配置した場合、要素の下部の境界に到達するとブラウザは次にbody要素をスクロー...
Web制作 JavaScriptでスクロールを監視するならIntersection Observerが便利
Intersection ObserverとはIntersection Observerは、特定の領域を監視して、監視対象の要素がその領域に交差したかどうかを検知します。デフォルトでは、viewport（見えている範囲）とある要素が交差した...
Web制作 SNS（ソーシャルメディア）公式ロゴアイコン配布ページまとめ
いちいち探すのが面倒なのでよく使うものだけをまとめました。使用にあたっては事前にガイドラインをご確認ください。X（エックス）X logo free downloadX logo という見出しの右横の「Download」ボタンから一式ダウンロ...
Web制作 JavaScriptの同期通信でPHPとJSONデータをやりとりする
PHPから返ってきた結果ををreturnしたいときなど、どうしても非同期ではなく同期通信でやりたいとき用です。下記のようにXMLHttpRequestのrequest.openの第三引数をfalseにすることで同期通信が可能です。const...