パティオルポ_取付アイテム一覧表

こんにちは！ディレクターのせりなです。 レスポンシブサイトを制作するうえで、 パソコンにはパソコン用に、スマートフォンにはスマートフォン用に 違うデザインの画像を使いたいことってありますよね？ いっぱいCSSを書いたり、不慣れなJavaScriptを使ったり 世の中には難しい方法が沢山ありますが・・・ なんかどれもよくわかんない。もーヤダ！っていうあなたに朗報！ 私が知っているなかで1番シンプルかつ使いやすい方法をご紹介します！ 今日からはもうレスポンシブ対応で悩まなくて大丈夫です！ レスポンシブサイトの画像切り替えのデモ レスポンシブ用の画像切り替えデモは下の画像をご覧ください。 DEMO パソコンだと水色の画像が見えていて、 スマートフォンだとピンクの画像が見えていますか？ パソコンから見ている方は、ブラウザのサイズを小さくしたり 大きくしたりすると、途中で画像が切り替わるかと思います。 実はこれ、難しいJavaScriptの知識や、複雑なCSSコードは一切不要なんです！ コピー＆ペーストで超簡単に実装できるので読み進めてみてください。 レスポンシブサイトの画像切り替えの原理 HTML側でやっていること HTML側には下記の2種類の画像のソースを記述します。 1. で見たときに表示される画像のソース 2. で見たときに表示される画像のソース CSS側でやっていること 見ている画面の大きさを判断して、パソコン用とスマートフォン用に 2種類の画像を表示・非表示に切り替えます。 では実際にどのような記述をするのか見てみましょう！ HTML側の記述 HTML側はたったこれだけ！とっても簡単です。 imgタグにはそれぞれの画像のソースを書いて パソコン用には、スマートフォン用にはを追加しておきます。 ※の部分はサンプルなので、正しいディレクトリで画像のソースを書いてくださいね！ CSS側の記述 CSSの記述もこれで終わり！ mediaクエリ(スマホ用のコード)は、ご自分が作っているWebサイトのサイズに合わせて (iPhone7に合わせてあります)の部分をお好きな値に変更してくださいね！ ONE POINT ADVICE !! スマートフォン用の画像が、画面から飛び出てしまって上手く調節できない・・・ そんなときは、下記のコードをベースのcssに追加してみてください。 これでどんなに大きい画像でも、画面の枠からは飛び出ないようになります！ スマートフォン対応できていますか？ 2015年4月にGoogle社からスマートフォン対応可否が、検索順位に影響することが発表されました。 まだスマートフォン対応できていないWebサイトで運用している方は 早急にスマートフォン用のページを作成するべきです！！！ SEOに強いレスポンシブサイト構築なら、FASTCODINGにご相談ください。