質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1575閲覧

モバイルレスポンシブルのサイト構築でオススメのサイトややり方がありましたら教えてください。

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/10/19 12:23

編集2016/10/20 06:02

イメージ説明

イメージ説明
現在、サイト構築をしているのですがある程度までデザインを固めてモバイルレスポンシブルのことを思い出して以下のサイトで確認したところかなりばらつきがありました。

大型のスマホやデバイスでは大丈夫っぽいんですが、小型のスマホ(iphone5?)だとちょっとはダメでした。

そこでお聞きしたいのですが皆さんはモバイル対応する際はどうしてるのでしょうか。

現在問題の箇所は固定(position:fixed)にしているところのずれとヘッダーのメニュー(floatしているところ)が小さいブラウザだと重なってしまいます。

【main.php】 <div class="head"> <a href="main.php">トップ</a> <div class="head-left"> <!--検索窓--> <table> <tr> <form action="xxxx" method="get"> <td> <input calss="search" type="text" name="aeeeeee"></td> <td><input type="submit" value="検索する" ></td> </tr> </table> </form> </div> <!--ヘッダー右--> <div class="head-right"> <a href="tttttt.php">投稿画面</a> <a href="oooooo.php"> ログイン</a> <a href="dddddd.php">会員登録</a> </div> </div>
【css】 /*ヘッダー部分*/ .head { width:100%; height:50px; text-align:center; } /*ヘッダー(左)部分*/ .head-left { float:left; width:20%; } /*ヘッダー(右)部分*/ .head-right { float:right; width:20%; margin:10px; }

http://www.jamus.co.uk/demos/rwd-demonstrations/
確認したサイト(ローカル環境での確認になります。)

よろしくよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aKusano

2016/10/19 13:51

該当部分のコードが説明している現象を再現するには不足しているように見えます。(position:fixedとか無いですよね?)可能であれば制作中のコードのサーバへの公開、無理なら正確なコードと実際に起きている現象が分かるキャプチャなどを追加してください。
退会済みユーザー

退会済みユーザー

2016/10/19 14:48

コメントありがとうございます。先ほどキャプチャ画像添付いたしました。position:fixwdの方も追加いたします。お待ちください。よろしくお願いします。
guest

回答1

0

ベストアンサー

キャプチャを見た限り、メインビジュアルぽい画像の右端が見切れてますが、
もしかして横スクロールが発生していません?
ヘッダの部分をどうこうする以前に、そもそもコーディング設計がまだレスポンシブ向けになっていないように
見受けられます。

レスポンシブのサイトを構築する際に、コーディング上で最低限やらなければならないことは、

1.viewportを設定する
2.画像をフルードイメージ化する
3.ボックスのサイズ指定(特に横方向)を原則として%で指定する
4.ブレイクポイントを決めて、サイズごとにレイアウトを調整する

です。

また、レスポンシブは**「同じHTMLコードを使って見せ方を変える」**という手法ですので、
場合によってはそのままではレイアウトやデザインに制約が生じる場合があります。
特にメニュー等のUI周りは、PC向けとSP向けでは大きく見せ方を変えたい場合も多いと思いますが、
正直全く同じHTMLコードで両方ともカバーできるようなケースは稀です。
従って、部分的にはPC向けとSP向けに別々のHTMLを埋め込んでおき、
CSSで表示/非表示を切り替えることも検討する必要があります。

途中まで普通に作っていた、とのことですので、今は基本的にPC向けのレイアウトを想定した
HTML・CSSになっているということですよね?

そうしたら、まずはmetaに以下のviewportを記述して、スマホではスマホ本来のサイズで
表示されるように設定してください。

HTML

1<meta name="viewport" content="width=device-width,initial-scale=1">

次にスマホレイアウトに変更するためのブレイクポイントを決めます。
「このサイズより小さくなったらスマホのレイアウトに変更する」という数値です。
一般的には768pxや640pxといった数値で切り替えることが多いです。

スマホサイズのレイアウトは、CSSのメディアクエリを使ってCSSを条件分岐し、
そこで上書きしてスタイルを書き換えます。

CSS

1/*スマホ用レイアウト*/ 2@media screen and (max-width: 768px) { 3 /*ここに差分のCSSを書く*/ 4}

ボックスサイズを可変にするには%でサイズ指定をすればいいですが、
埋め込む画像を比率を保ったまま可変にするには、以下のコードをリセットCSSなどの
中に付け加えておきます。

CSS

1/*img画像のフルード化*/ 2img { 3 max-width: 100%; 4 height: auto; 5}

あとは画面サイズを切り替えながらCSSで頑張る感じです。
実際には可変サイズにすることにより様々な問題が生じることになりますので、
その都度調べながら頑張りましょう。

投稿2016/10/20 02:38

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/20 03:39

コメントありがとうございます。 <meta name="viewport" content="width=device-width,initial-scale=1">は入れてなかったのですがimg入れても画像が横幅いっぱいにならないです。 今回の画像がbackground-imageなのですがその場合はimgは効かないということでしょうか。 よろしくお願いします。
退会済みユーザー

退会済みユーザー

2016/10/20 03:47

@media screen and (max-width: 320px) { background-image{ max-width: 100%; height: auto; } } だと効かなかったです。。
aKusano

2016/10/20 03:51

それはHTML上に埋め込んだimg要素をフルード化するためのコードです。 背景画像をフルード化して、要素いっぱいに拡大したい場合には、 background-sizeプロパティを使ってください。 セレクタ{ background-image: url(画像パス); background-position: center center; /*適宜指定*/ background-size: cover; /*常に要素全体を覆う場合*/ }
退会済みユーザー

退会済みユーザー

2016/10/20 05:57

コメントありがとうございます。 両方、片方ずつとみに指定してみましたがダメでした。
aKusano

2016/10/20 06:03

>両方、片方ずつとみに指定してみましたがダメでした。 ちょっと意味がわかりません。 背景がフルード化されない、ということですか?
退会済みユーザー

退会済みユーザー

2016/10/20 06:07

画像追加しました。 右端にスペースができてしまいます。 どこら辺がダメなんでしょうか。 *当該セレクタはグーグルクロームの検証で行っています。 セレクタ { width:100%; height:500px; text-align: center; background-repeat: no-repeat; background-image:url(",....");/*url("https://prog-8.com/images/html/advanced/top.png");*/ box-shadow:3px 3px 3px 3px rgba(0,0,0,0.4); background-position: center center; /*適宜指定*/ background-size: cover; /*常に要素全体を覆う場合*/ } @media screen and (max-width: 320px) { セレクタ{ max-width: 100%; height: auto; background-position: center center; /*適宜指定*/ background-size: cover; /*常に要素全体を覆う場合*/ } }
aKusano

2016/10/20 06:14

その右端のスペースが、何に起因しているのかは実際のデータを検証してみないとわかりません。 背景を指定している要素の親要素にpaddingがついているのかもしれませんし、 背景画像自体の右側に白い領域が含まれてしまっているのかもしれません。 上記コードで背景画像の伸縮処理はできていますので、 余白の正体が何か、周辺要素や他のプロパティ指定も含めて探す必要があります。
退会済みユーザー

退会済みユーザー

2016/10/20 07:13

コメントありがとうございます。 先ほど上から全てのクラスチェックしてpaddingやmargin-rightなど検証してみたのですがダメでした。 ただ一番上から主要なクラスを抜いて→検証したところ一番したのフッタークラス抜いたら右端の空白も無くなりました。 この度は最後まで解説及びお付き合いいただきありがとうございます。 とりあえずフッター抜いて作業進めます。 最後までコメントいただいてかつ丁寧な解説をしていただいたaKusanさんをベストアンサーにさせていただきます! ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問