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

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

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

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

HTML

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

Q&A

解決済

3回答

1827閲覧

width:70%;が効かない理由が分かりません

tanakashouzoux

総合スコア52

CSS3

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

HTML

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

0グッド

2クリップ

投稿2018/06/25 08:27

編集2018/06/25 09:02

googlemapを埋め込んで横幅をまとめてウィンドウの70%にしようと思い、cssに.maps-wrapper{
width:70%;}と書き、google chrome のコンソールで見てみたのですが、widthが反映されないようです
理由が分からなく困っております
詳しい方ご教示ください

HTML

1<div class="maps-wrapper"> 2<div class="maps"> 3<iframe src="https://hoge" width="640" height="480"></iframe> 4 </div> 5<div class="maps"> 6<iframe src="https://hoge" width="640" height="480"></iframe> 7 </div> 8</div>

css

1 2.maps-wrapper{ 3 width:70%; 4} 5 6.maps{ 7 position:relative; 8 width:100%; 9 padding-top:75%; 10 height:0; 11 overflow:hidden; 12 margin:0 auto; 13} 14 15.maps iframe{ 16 position:absolute; 17 top:0; 18 left:0; 19 height:100%; 20 width:100%; 21}

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

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

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

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

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

kei344

2018/06/25 09:34

回答が付いた質問の編集は慎重に行ってください。回答でタイプミスについての指摘がある場合は「直したこと」がわかるようにしてください。
tanakashouzoux

2018/06/26 01:23

ご指摘頂きありがとうございます!タイプミスを直した旨、記載させて頂きましたm(__)m
guest

回答3

0

ベストアンサー

掲載されているコードを丸コピーして確認してみましたけど、
普通に.maps-wrapperは70%で表示されてるようですよ?
上のコメントでbodyにwidth:100%;を設定する、とありますが、
その設定はしなくてもbody直下のブロックレベル要素はちゃんと親要素であるbodyの幅を
100%として認識して自身の幅を算出するようになってます。

Chromeコンソールでwidthが反映されてないようだとありますが、
それが勘違いだったりとか、あるいは掲載されているコード以外にも何かあって、
他のスタイル等が影響を及ぼして何か悪さしてるとかないですか?

投稿2018/06/26 01:06

aKusano

総合スコア3763

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

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

tanakashouzoux

2018/06/26 01:13

わざわざご回答ありがとうございます! 今朝bodyにwidth:100%;を追記する前に確認したらやはり.maps-wrapperのwidth:70%;が効いていなかったのですが、bodyにwidth:100%;を追記したらきちんと反映されました!!! なぜなんでしょうか・・・ bootstrapで書いているんですが、.maps-wrapperの親要素はbodyで特段他のdivで包まれているとかいったことも無いのでbodyにwidth:100%;を追記しただけで修正されたのが不思議です・・・
aKusano

2018/06/26 01:20

あー、bootstrap使ってるんですね。 あれはコンポーネントごとにいろんなスタイルがついてるので、 body要素にどんなスタイルが適用されているのかとか、 他のスタイルの影響を分析してみないとちょっとはっきりしたことは言えませんね。。 試しにbootstrap使わずに、素のHTMLとCSSだけ掲載されているコードを書いて 表示確認してみてください。bodyにwidth: 100%;つけなくても、直下のdivのwidthは 普通に%指定できるはずですから。それが仕様どおりの挙動です。
aKusano

2018/06/26 01:28

bodyにwidth:100%;をつけたら子要素のwidth:70%;が効いたということは、 現在お使いのフレームワークのファイル上ではbodyのwidthが無い状態になってることが予想されます。 widthが無い状態になってる&widthの設定自体はできる、ということであれば、 bodyにdisplay:inline-block / table / table-cell または position: absolute / fixed などが設定されてる可能性がありますね。 これらの値が設定されると、要素のwidthを明示しない場合にコンテンツの内容物の幅にfitする状態となってしまい、子要素が自身の幅を%で算出する際の基準としてうまく機能しなくなってしまうと思います。 まぁ、実際のソースコード見たわけじゃないのであくまで仕様的に考えられる項目を挙げただけですけど。
tanakashouzoux

2018/06/26 01:28

迅速なご回答をありがとうございます! bootstrapのbody直下に書いておりましたm(__)m そうですよね???? プログラミングは挫折→チャレンジの繰り返しでほとんど初心者で、詳しい方からするとくだらない質問だと思うのですがご丁寧にお答えいただきありがとうございます! 素のHTML,CSSだけで早速書いてみたいと思いますm(__)m
tanakashouzoux

2018/06/26 11:43

わざわざご丁寧に想定される色々なケースまで考えてお答えいただくなんて・・・ こんな上司の方がいたら仕事も楽しいんだろうな・・・と想像までしてしまいました 本当にありがとうございますm(__)m 御指導頂いた点を早速確認してみたいと思います!
guest

0

HTML上にはmax-wrapperというクラスはありますが、
maps-wrapperというクラスが記述されていません。

投稿2018/06/25 08:39

SakuBlade

総合スコア375

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

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

tanakashouzoux

2018/06/25 08:59

すいません????maps-wrapperと記述してたんですがタイプミスしてしまいました????
guest

0

max-wrapper ≠ .maps-wrapper

自分でつけたんでしょ

投稿2018/06/25 08:37

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

tanakashouzoux

2018/06/25 08:59

すいません????maps-wrapperと記述してたんですがタイプミスしてしまいました????
退会済みユーザー

退会済みユーザー

2018/06/25 09:04

OK. それなら、width を設定した要素の親要素にwidth:100%を設定すれば良いでしょう。 widthは親要素に対して何%であるかを定義します。
tanakashouzoux

2018/06/25 09:07

わざわざご回答頂きありがとうございますm(__)m maps-wrapperの親要素はbodyになるのですが、その場合はbodyに100%を指定すると宜しいのでしょうか? お忙しいとは思いますがご教示頂ければ幸いです
tanakashouzoux

2018/06/25 09:16

アドバイスに留まらず良記事のご紹介までわざわざありがとうございます。独学で勉強しておりまして、Kosuke_Shibuyaさんの様な偉大な先人に御指導頂けて本当にありがたいです。勉強するに当たって他に良書等ございましたらご教示頂けないでしょうか?一応一通り基本の書籍に目を通したつもりなのですが、なかなかこういった実践的な事には触れられていないと思いまして・・・
退会済みユーザー

退会済みユーザー

2018/06/25 09:17

自分が学び始めたことの書籍なんてもう販売されてないです。かといって必要でもないので今の書籍は知りません。申し訳ない。
tanakashouzoux

2018/06/26 01:17

ご回答ありがとうございますm(__)m おかげさまで今朝bodyにwidth:100%;を追記したところ反映されました!!! ご教示頂いたサルワカの記事を拝読させて頂いたところ1つ疑問が浮かんだので質問させてください サルワカでは「width~%を指定した要素の親要素を遡っていった時、どの親要素にもwidthが指定されていないとウィンドウを基準にして計算する」とあったのですが、そうであればbodyにwidth:100%;を指定しなくてもwidth:70%;が反映されそうな気がするのですが、この考えは間違っているのでしょうか?
退会済みユーザー

退会済みユーザー

2018/06/26 06:20

そう書いてあっても動かないんだから、指定するしかないのでは?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問