iframeで埋め込むときのレスポンシブ対応について
GoogleマップやVimeo、Youtube動画のような外部サービスを埋め込みたいことがよくあります。昨今はレスポンシブ対応でサイトを作っていることが多いので、ブラウザ横幅に応じて、埋め込み部分も可変する必要があります。コードを紹介しながら解説します。
iframeで埋め込み元の高さ計算して埋め込み先に反映させる方法
HTMLのインラインフレーム要素（iframe）で、他サイトのページを埋め込むアイデアはわりとよく使われます。たとえば、カラーミーショップ（EC）にWordPressのコンテンツを埋めこんだり。やってみると下の表示が切れる場面に遭遇しますが、高さ調整が重要です。
多機能スライダーSwiperの機能を紹介します
多機能スライダー「Swiper ver.9」の機能を紹介。仕事で使いそうなサンプルコードを多めに用意しました。簡単に設置できます。
Swiperのデモを作ってみました（サンプルコードあり）
Swiperは、いじっていると結構はまりやすい気がします。ということで、勉強がてら仕事で使えそうなコードを書きました＋デモあり。
Webフォントの利用方法とアップロードして使う際のCORS対応
通信環境の向上もあって、Webフォントは以前よりも使いやすくなっています。自サイトで使う場合について、ホスティングサービスのフォント（Google Fonts、Adobe Fonts）を利用する方法と、自分でアップロードして利用するフォントの二通りについて、まとめました。
移転したページはSEOのためにもリダイレクトしましょう
移転元ページ→移転先ページへ飛ばすことをリダイレクトといいます。リダイレクトしなければいけない状況というのもあまり遭遇しませんが、仕事としてはときどき相談されます。リダイレクトする理由は、お客様を逃さないこととSEOにあります。
スマホメニューでページ内リンクをタップするとメニューが閉じないとき
スマホメニューのコードを一から書くことはあまりありません。他ページのコードを参考にスマホメニューを設置した場合に、ページ内リンクをタップしたときにメニューを閉じないことがあります。困っている方へ解決法を紹介します。
Amazonぽい画像拡大機能「SergeLand Image Zoomer」の使い方
ときどき「Amazonみたいな画像拡大を入れてほしい」と頼まれることがあります。「SergeLand Image Zoomer」というjQueryプラグインがよく似ています。ここでは実装方法とオプションの説明をします。簡単に実装できますので参考どうぞ。
PageSpeed Insightsでページ表示の速度改善とMFIについて
モバイルファーストインデックス（MFI）の表明以降、モバイル向けページの重要性が一層増しました。モバイルは比較的、通信環境がよくないこともあり、当サイトでもページ表示の速度改善を実施しました。PSIを検討されている方は参考にどうぞ。
なんとなくしか知らない常時SSL化の必要性を解説します
Googleが推奨していることもあり、近年、常時SSL化の勢いは増すばかりです。なんとなく知識は持っているけど、常時SSL化について、本当はよくわからない方向けの読み物です。常時SSLが必要な訳について、カラーミーショップの例を挙げて解説します。