スマホ用ページ

スマホ用のページを作りたいのですが、どうすればできるでしょうか？
レスポンシブルにつくろと端末によって多少差が出てしまうと思うのですが、きっちりそろえるためには
一つ一つやるしかないのでしょうか？

takato

2016/01/06 02:24

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けていますわからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

izkn

2016/01/06 06:28

こちらの質問が他のユーザから「問題・課題が含まれていない質問」という評価を受けています teratailでは、漠然とした興味から票を募るような質問や、意見の主張をすることを目的とした投稿は推奨していません。質問の意図や解決したい課題を明確に記述していただくと、回答が得られやすくなります。

行動規範の内容に同意します

回答3件

レスポンシブデザインは端末の幅が異なることによる表示の差を、リキッドレイアウトである程度吸収し、吸収しきれない程の差が出てきたらスタイルを切り替えるという手法を主にしています。
ご希望はそうではなく、固定幅デザインを画面いっぱいに表示したいということでいいでしょうか。

具体的なコードなどは参考サイトの紹介
スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの？ | ichimaruni-design
に留めますが、基本的には view-port に固定の幅を指定することで実現します。
ただ過去に挑戦した際はバグるOS・ブラウザがある(古い端末ですが)ので、最終的にはサーバーサイドプログラムでviewportを動的に生成、JavaScriptでも動的に書き換え、更にbody要素にzoomスタイルを付けて画面幅に無理やりフィット(画面回転時は再計算)など複数のテクニックを重ね掛けしていました。
旧Android端末対応をするなら、固定幅は茨の道かも知れません。

希望には添っていませんが個人的には現在はリキッドレイアウト推しです。
viewport の幅は固定ではなくdevice-width で、これは古いiOSで問題が起こることがあるのですが、iOSはAndroidに比べ古いバージョンの使用率が非常に低いため無視できると思います。

リキッドの中でもパーセンテージ幅をうまく使えば、部分的に「常に横にボタンやアイコンを３つ並べる指定」などは可能です。(この場合、一つ一つのボタン内がリキッドになります。)
最初から横幅が変わる想定でデザインされているので柔軟ですし、タブレットの場合やランドスケープモードで横幅が大き過ぎて使いにくいということもありません。

投稿2016/01/06 06:12

tozjp

総合スコア790

レスポンシブデザイン、もしくはレスポンシブレイアウトと呼ばれる手法を用います。
具体的にはウィンドウのサイズなどでCSSの適用内容を変えることになります。

下記サイトを参考にしてみてはいかがでしょうか。

参考
http://webdesignerwork.jp/web/responsivewebdesign/
http://oxynotes.com/?p=7219

投稿2016/01/06 02:06

usk

総合スコア397

退会済みユーザー

2016/01/06 03:17

端末によって幅が異なりますが、きっちりそろえたい場合はどうすればいいのでしょうか？

usk

2016/01/06 08:12

基本的な方針は、MasakazuFukamiさんがコメントされた通りなので割愛します。なお、すべての解像度に対して個々に設定しようとすると、Android はかなり多く存在している為、現実的ではありません。（画面解像度サンプル例） http://webseeya.com/2015/09/04/smartphone-display-share/ http://matome.naver.jp/odai/2138511220864102501 ベースとしては、下記５パターンをベースに考えてみてはいかがでしょうか。（これもMasakazuFukamiさんのパターン分けと同じですが・・・） * スマホの縦表示 * スマホの横表示 * タブレットの縦表示 * タブレットの横表示 * PC表示

行動規範の内容に同意します

ベストアンサー

メディアクエリという技術を使って作成します。

このページも参考になさって下さい！
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=ja

投稿2016/01/06 02:03

MasakazuFukami

総合スコア1869

退会済みユーザー

2016/01/06 03:20

端末によって幅が異なりますが、きっちりそろえたい場合はどうすればいいのでしょうか？

MasakazuFukami

2016/01/06 06:36

基本的な作りは・横幅などは全て%指定にするなどすれば問題ないかと思います。それこそ全機種の大きさに全て合わせていくのは不可能なので大体○px ~ ☓pxはこのレイアウトを適用、みたいな感じ普通は作っていきます。じゃあどの長さが基準なんだよって感じになると思いますが、基本好きなようにしてくださいといった感じで正解はありません。ただ、よく使われているのはサイズ < 568px以下 568px < サイズ < 768px 768px < サイズ < 1024px 1024px < サイズ < 1280px 1280px 以上とかに別れるんじゃないかと思います。 http://purecss.io/grids/ ここの中盤を参考にされるといいと思いますよ！

行動規範の内容に同意します

あなたの回答