WordPressでレスポンシブデザインを作成するときに役立つコンテンツ12選

レスポンシブデザインの構築で役立つコンテンツをまとめました。

レスポンシブデザインを構築する時、大抵の場合で必要となるテクニックがいくつかあります。
ここでは、そんなテクニックをご紹介しているコンテンツをまとめてみました。

テクニックは随時更新していきます。

デバイスの横幅で画像を切り替える

PCとスマホで画像を切り替えたい場合は、このコンテンツが参考になります。

親要素に収まるように画像を拡大縮小させる

親要素から画像がはみ出さないように拡大縮小させたい場合、このコンテンツが参考になります。
CSSを4行追加するだけの最も簡単な方法です。

スマホ表示で要素がはみ出してしまう

スマホで要素が画面に収まらず横スクロールが出てしまい場合は、このコンテンツが参考になります。

複雑なテーブルを横スクロールで対応させる

複雑なテーブルをどう扱おうかと悩んでいる場合、このコンテンツが参考になります。
テーブルを横スクロールさせる、最も簡単な方法です。

背景画像をデバイスの横幅に合わせて縮小する

背景画像の全体が表示されるようにしたい場合、このコンテンツが参考になります。

YOUTUBE動画をデバイスの横幅に合わせて縮小する

YOUTUBE動画をデバイスの横幅に合わせて縮小したい場合、このコンテンツが参考になります。

電話番号リンクをPCで無効にする

電話番号リンクをスマホで有効、PCで無効にしたい場合、このコンテンツが参考になります。

GOOGLEマップをデバイスの横幅に合わせて縮小する

GOOGLEマップをデバイスの横幅に合わせて縮小したい場合、このコンテンツが参考になります。
ピンの位置も中央からずれません。

PCとスマホで表示する要素を切り替える

PCとスマホで表示する要素の内容を切り替えたい場合、このコンテンツが参考になります。

デバイスの向きで文字サイズを切り替えない

デバイスの向きでテキストサイズを切り替えたくない場合、このコンテンツが参考になります。

スマホ表示の時だけbrタグを無効にする

スマホ表示の時、brタグがあると文章が読みにくくなる場合があります。
そんな問題を解決したい時、このコンテンツが参考になります。

フォームを入力する時、画面の拡大を防ぐ

iPhoneでフォームを入力しようとすると、フォーム部分が拡大される場合があります。
この拡大をさせたくないとき、このコンテンツが参考になります。

まとめ

WordPressでレスポンシブデザインを作成するときに役立つコンテンツをまとめてみました。

このコンテンツは随時更新しています。