コーディングをしていて、iPhoneなどの実機でスクロールした際に画面下部にあるセーフエリアについてサイトが影響されていることはありませんか。iPhoneX以降から導入されたセーフエリアにより、スマートフォンサイトが影響されているケースが発生している場合があります。 特に画面下部にメニューを配置したデザインなどをされて...

デバイスに合わせた画像の切り替えについて、どうのような方法をとられていますか？ 今回はレスポンシブサイトの構築時に、デバイス合わせて適切な画像を読み込み、画像を変える方法について紹介していきます。 PC用の画像とSP用の画像を読み込ませて、display:none;で表示・非表示している場合には、画像の切り替え方法につ...

SEOを意識している方であればH1タグなどを、テキストで表現したいと考える方は少なくないと思います。しかしH1に入力したテキストの文字数が長いと、スマートフォンで閲覧したら見栄えが悪くなってしまうのが悩みとなりますよね。 今回はそんな文字数問題を解決するために、cssを使ってテキストの文字数を制限する方法を紹介していき...

クリッカブルマップを久しぶりに使おうと思うと、レスポンシブ対応ってどうするの？ そう思うことはないでしょうか。 Web制作をしている方でもクリッカブルマップ自体が滅多に使わない人が多いので、いざ必要な時にわからない場合があると思います。今回はそうした方にむけて、HTMLのクリッカブルマップをレスポンシブ対応する方法を紹...

スマートフォンのメニューボタンなど、クリックするとアイコンが変わるものが多いと思います。 今回は+ボタンをクリックすると-ボタンになり、メニューが開く方法を紹介していきます。 CSSと簡単なJQueryの実装だけで実装できるので、是非参考にしていただければと思います。 ■デモ https://fractales.jp/...

今回は誰でも簡単にGoogleMapを設置する方法と、スマートフォンにも対応できるレスポンシブ対応について紹介していきます。お持ちのサイトにGoogleMapを設置する方は、是非参考にしていただければと思います。 最初はGoogleMapの埋込みコードの取得と設置の方法となるので、GoogleMapのレスポンシブ対応の...