←戻る

スマートフォン上の表示

進む→
サイドストーリー (つぶやきの棚 こぼれ話) 2021/02/01
 スマートフォンからのアクセス増加の話題が続きますが、これに対応するために「レスポンシブwebデザイン化」を実施して、少し慣れてきました。なにしろ、対応を始めた頃に、自身がスマートフォンを使っていませんでしたからね(笑)。

 さて、今回は実際の「PC上の表示」と「スマートフォン上の表示」を比較してみることにしましょうか。

サンプル画面
 PC上の表示とスマートフォン上の表示 

 「レスポンシブwebデザイン化」を実現する方法は複数あるのですが、このサンプルでは、同一のhtmlがスクリーン属性を判断して、PCの場合、タブレットの場合、スマートフォンの場合で表示を変えるパターンを用いています。
 こうして、直接比べてみると、コンテンツは同じなのですが、表示はけっこう違っていることが分かりますね。PC上の表示では、すみれの画像とテキストが左右に表示されておりますが、スマートフォン上の表示では、それが上下に変わって表示されています。


 では、もう一つのサンプルをご覧ください。

サンプル画面
 PC上の表示とスマートフォン上の表示 

 上のサンプルと下のサンプルの違いですが、PC上ではすみれの画像の位置が違う(上のサンプルは右位置、下は左位置)のに、スマートフォン上では、同じように上下で表示されているということですね。あっ、分かりにくいかも知れません(笑)。

 以前、自身はガラケーを使いながら、PCでブラウザの機能を利用して、スマートフォン上の表示状況をエミュレートして確認していました。その後、スマートフォンを使うようになって、細かい違和感をキャッチできるようになり、いろいろアレンジしてみたという訳です。

どんどん環境が変わりますね!

 長い長い間、様子を見ていたのですが、情報を入手する目的でfacebookを活用し始めました。Twitterという存在もあるのですが、まぁ、今のところ、facebookとの親和性というか、リンケージをどうしようかと、いろいろ検討しています。
 環境の変化に対応する術はいろいろあって、過去は捨てて、新しい環境に切り替えていくという選択肢もあるんですよね。ただ、親しんでいたホームページやブログが更新されなくなっていくのは寂しいような気がしています。

サイドストーリー
ページのトップへ戻る