HTML・CSS レスポンシブCSS iphoneのセーフエリアに影響されないCSSによる調整方法を紹介 2022年3月24日 コーディングをしていて、iPhoneなどの実機でスクロールした際に画面下部にあるセーフエリアについてサイトが影響されていることはありませんか。iPhoneX以降から導入されたセーフエリアにより、スマートフォンサイトが影響されているケースが発生している場合があります。 特に画面下部にメニューを配置したデザインなどをされて...
HTML・CSS コーディングレスポンシブ レスポンシブで適切な画像を読込み画像を変える方法 2021年8月17日 デバイスに合わせた画像の切り替えについて、どうのような方法をとられていますか? 今回はレスポンシブサイトの構築時に、デバイス合わせて適切な画像を読み込み、画像を変える方法について紹介していきます。 PC用の画像とSP用の画像を読み込ませて、display:none;で表示・非表示している場合には、画像の切り替え方法につ...
HTML・CSS コーディングレスポンシブ cssを使ってテキストの文字数を制限する方法 2020年7月10日 SEOを意識している方であればH1タグなどを、テキストで表現したいと考える方は少なくないと思います。しかしH1に入力したテキストの文字数が長いと、スマートフォンで閲覧したら見栄えが悪くなってしまうのが悩みとなりますよね。 今回はそんな文字数問題を解決するために、cssを使ってテキストの文字数を制限する方法を紹介していき...
JQuery コーディングJSレスポンシブJavascript HTML-クリッカブルマップをレスポンシブ対応する方法 2020年6月23日 クリッカブルマップを久しぶりに使おうと思うと、レスポンシブ対応ってどうするの? そう思うことはないでしょうか。 Web制作をしている方でもクリッカブルマップ自体が滅多に使わない人が多いので、いざ必要な時にわからない場合があると思います。今回はそうした方にむけて、HTMLのクリッカブルマップをレスポンシブ対応する方法を紹...
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のレスポンシブ対応の...