WEBページで収入を増やすためにやるべき事を考えて行く　その3

BUY THE WAYのkousakusanです。

前回から始まりました「WEBページで収入を増やすためにやるべき事を考えて行く」の”その3”となります。

前回は、こちらね

WEBページで収入を増やすためにやるべき事を考えて行く　その1（WEBページで稼ぐ？？）

WEBページで収入を増やすためにやるべき事を考えて行く　その2（WEBページで稼ぐ？？）

さて、前回宿題にしてたよな、スティーブ！！（同じ件でスタートだ）

「まじか～～～！今回もやってないよー」

「こっちがまじかーー！だよ！」小峠風

 

レスポンシブデザイン？リキッドデザイン？

スマホと言っても画面の大きさはまちまちで、いまいち統一感がない。

ま、それはユーザーが大きいのが良いとか小さいのが良いとかあるから、それに合わせて行かないと選んでもらえないのよね。

PC、タブレット、スマホと全ての画面に対応するためなら「レスポンシブ」か「リキッドデザイン」なのか・・・・

ちょっとその辺も考えてプラットフォームを考えて行きたいと思います。

ユーザーのデバイスに関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて表示を変えることができます。

画面の横幅でCSSを切り変えて、表示させます。

切り替え地点の事を「ブレイクポイント」と言い、ｐｘで指定します。

 

スマートフォンの場合

414px　iPhone6 Plus
375px　iPhone6、iPhone6S
320px　iPhone5Sまで
360px　アンドロイド端末

 

タブレットの場合

1280px×800px　Nexus10
768px×1024px　iPad、iPad mini、Nexus9
600px×960px　Nexus 7

 

PCの場合

1920px×1080px
1366px×768px
1280px×1024px

 

どうした、スティーブ？

こんなの全部やるのかだって？

あのな、スティーブ！これからドンドン増えていく解像度にいちいち合わせられないだろ？

だからレスポンシブデザインやリキッドデザインを使うんだよ。

 

 

レスポンシブの場合

 

スマートフォン320px <  600px   タブレット 960px < 1281px PC

この3つでブレイクポイントを決めてあげれば、とりあえずOKです。

後はCSS3でメディアクエリを書いて、このサイズで適正な状態に変更するわけです。

でも、中途半端な画面サイズになった時に、変な改行したりして崩れるんだよな・・・

へたっぴだからかなｗｗｗ

 

つかえね・・・・だと！

 

 

リキッドデザインの場合

ブラウザーの横幅に合わせてコンテンツの表示サイズも変更されるので、多少領域が変更されても崩れません。

これなら、今までと違うサイズが出てきてもレイアウトが崩れる事はないですね。

でも、レスポンシブみたいに、スマホだと長くなるからこの画像はOFFとかできないので

無駄に長くなっちゃうんだよね。デザインも固定されちゃうのでスマホサイト！って感じで新たに作ったみたいにならないのが

レスポンシブとの違いだね。

 

「どっちもいまいちだな！！」

それを、しっかりと作るのがプロでしょうが！

 

ではそんなスティーブ君に、ワードプレスでやったらどうなるか次回までに調べてくるように。

ちなみに、ワードプレスはレスポンシブ対応なので、そのまま作ってもスマホに対応するテンプレートが

沢山あるのだ。このテンプレートを使う事で、だれでもレスポンシブな記事が書けるのだよ。

 

やっとワードプレスかよ！

って言うか、また宿題かよ！

ま、どうせやらないから良いかｗｗ」

 

「ｗｗじゃねえよ！やれよ！！」