FC2ブログ

レシポンシブWEBを作成してみることに

ホームページで、パソコン用と、スマートフォン用のページを二つ作って、端末毎にスクリプトで切り替えるのも、手間だし馬鹿らしいなぁーとσ(^_^;)

やり口は、一つのhtmlページを、パソコン用のCSSと、スマートフォン用のCSSだけで、パソコン用の画面と、スマートフォン用の画面を切り変わった様に見える、レシポンシブWEBに取り組むことにしましたσ(^_^;)

まずは、具体的にざっくりやり方を記載します。色々やり方はありますが、自分流です!

0.パソコンから見た場合、スマートフォンから見た場合を条件に、読み込むCSSを変える
※且つ、、スマートフォンで見た場合の機能調整も行う

【パソコンの場合は、パソコン用のCSSスマートフォンの場合は、スマートフォン用のCSSを読むように作成】

詳細はまた番号順に次回以降紹介しますσ(^_^;)

1.ホームページのカラム構成はdivタグで作成をする

2.html内には、divタグの属性名を、パソコン用とスマートフォン用に分ける

3.パソコン用のCSSには、スマートフォン用の属性のものを見えなくする記述をする。

逆も同様に、スマートフォン用のCSSにはパソコン用の属性のものを見えなくする記述をする。

4.html内で、パソコン用に見せたいところは、パソコン用の属性内にパソコン用の構成を記述、スマートフォン用に見せたいところはスマートフォン用の属性内に構成を記述

【共通部などは属性名を分けなくて、各CSSでサイズ調整をすれば大丈夫です】

ざっくりこんな感じですσ(^_^;)
詳細は、次回以降紹介しますσ(^_^;)


なるべく共通部のみでhtmlを記述して、サイズ調整をするだけが手間はないです。

ただ、初心者で分かり易いのは、html内で、属性名を完全に分けて、パソコン用、スマート用に記述することかな!
まあ、それじゃああんまりレシポンシブWEBの意味なくなっちゃいますけどね(ーー;)





コメント

非公開コメント

検索フォーム
RSSリンクの表示
リンク