HTML・CSS レスポンシブCSS iphoneのセーフエリアに影響されないCSSによる調整方法を紹介 2022年3月24日 コーディングをしていて、iPhoneなどの実機でスクロールした際に画面下部にあるセーフエリアについてサイトが影響されていることはありませんか。iPhoneX以降から導入されたセーフエリアにより、スマートフォンサイトが影響されているケースが発生している場合があります。 特に画面下部にメニューを配置したデザインなどをされて...
HTML・CSS コーディングCSS動画画像 画像や動画の基準点を変更する方法 2020年6月22日 今回は画像や動画を拡大縮小する時や、回転させる時の基準点とその基準点の変更方法をお伝えしていきたいと思います。画像や動画の可変の際に思ったように可変してくれない場合に、基準点を変更すると解決する場合もあるので、是非参考にしていただければと思います。 目次 ・基準点を変更する方法 ・動画をメインイメージ使う場合に活用でき...
HTML・CSS レスポンシブCSSJQuery +-切替え開閉メニューをCSSとJQueryで実装する方法 2020年6月5日 スマートフォンのメニューボタンなど、クリックするとアイコンが変わるものが多いと思います。 今回は+ボタンをクリックすると-ボタンになり、メニューが開く方法を紹介していきます。 CSSと簡単なJQueryの実装だけで実装できるので、是非参考にしていただければと思います。 ■デモ https://fractales.jp/...
HTML・CSS レスポンシブCSSGoogle Map GoogleMapをレスポンシブ対応にする方法 2020年6月2日 今回は誰でも簡単にGoogleMapを設置する方法と、スマートフォンにも対応できるレスポンシブ対応について紹介していきます。お持ちのサイトにGoogleMapを設置する方は、是非参考にしていただければと思います。 最初はGoogleMapの埋込みコードの取得と設置の方法となるので、GoogleMapのレスポンシブ対応の...