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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

1683閲覧

【CSS】レスポンシブデザインで、スマフォ表示の時にdivの要素の大きさを変えたい

nnahito

総合スコア2004

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2016/09/02 17:28

質問概要

PC表示の時は、画面の80%まででページを表示し、スマフォ表示の時は100%でページを表示したい。

質問詳細

フロントエンド苦手です。
一緒にbootstrapを使っているのですが、グリッドシステム(?)くらいしか使っていません。
ナビゲーションメニューバーに不満があったため、そこを自作しております。

今、グリッドシステムのdivにヘッダー、メイン要素、フッターを入れております。
そしてそのグリッドシステムのdivに、独自定義した幅の指定(limited-width)をしています。

HTML

1<div class="container-fluid limited-width debug"> 2 <header class="center-block"></header> 3 <div class="row center-block"> 4 5 <!-- メイン要素 --> 6 <div class="col-sm-8"> 7 あああ 8 </div> 9 10 <!-- サブ要素 --> 11 <div class="col-sm-4"> 12 いいい 13 </div> 14 15 </div> 16 17 <footer></footer> 18</div>

limited-widthは、以下のように定義しています。

CSS

1.limited-width{ 2 width: 80%; 3}

更に、レスポンシブ用のCSSは以下のように書いております。

CSS

1@media (max-width: 479px){ 2 .limited-width{ 3 width: 100%; 4 } 5}

しかし、ブラウザのサイズを小さくしても、divのwidthは80%のまんまです……
これは何がいけないのでしょうか。

ご存じの方がいらっしゃいましたら、ご教示願います。

確認ブラウザは、
Firefox48.0.1です。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2016/09/03 00:01

ご呈示いただいたコードを試してみましたが、きちんと479pxで80%から100%に切り替わっているようですが……。「divのwidthは80%のまんま」はデベロッパーツールで確認した結果でしょうか?
guest

回答1

0

ベストアンサー

レスポンシブ用のCSSを上に書いてる、とか?
元々のCSSを上書きする順序で書かないとダメですよ。

投稿2016/09/03 01:46

shi_ue

総合スコア4437

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

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

nnahito

2016/09/03 01:58

ご回答有り難うございます。 ご回答の通りにしてしまっていました。 大まかな基盤を「main.css」というファイルに定義し、そのCSSファイルの最上部に、 「@import url('responsive.css');」とやっていました。 これを削除し、各要素の後に「@media」すると解決しました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問