TumblrレスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。要素の幅と高さの%指定レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。求める要素の幅÷親要素のコンテンツ幅×100%の式で求められます。求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。求める要素の高さ÷親要素のコンテンツの高さ×100%となります。左右のmargin、paddingを%で指定する時は、同じような考え方で求めるmargin(padding)の幅÷親要素のコンテンツ幅×100%で求められます。margin-left:20px、親要素のコンテンツ幅が200pxの場合は、10%となります。上下のmargin、paddingは求めるmargin(padding)の高さ÷親要素のコンテンツ幅×100%で求められます。親要素の高さでなくて幅が相対の基準となる点に注意してください。modelDEMO一見、意味不明な仕様に思えますが、実はこれは理にかなってて、親要素の幅を基準とすることで広い幅のウインドウサイズでは上下のマージンも大きく、狭い幅では小さくなるので幅に応じて適切な余白を取ることができます。求める要素の高さ÷基準となる親要素のpaddingを含めた高さ×100%となります。基準となる親要素はpositionプロパティにstatic以外の値が指定されている一番最初の親要素になります。その要素の値にはpaddingの幅を含んだ値で計算します。求める要素のtop(bottom)の数値÷基準となる親要素のpaddingを含めた高さ×100%となります。位置の指定も基準となる親要素のpaddingを含んだ値が基準となります。mapなどの埋め込みでiframeを使用する時に使えます。640×360のYoutubeの動画をiframeで埋め込むとします。Imageと同じスタイルを適用しても幅は可変しますが高さは一定のままです。auto;}そこで、まずiframeを要素で囲みます。allowfullscreen=""></iframe></div>そして下記のCSSを指定します。100%;}iframeを囲った要素、つまりiframeから見た親要素のpadding-top(またはpadding-bottom)にiframeの幅に対する高さの比率を指定します。高さ÷幅×100%=360÷640×100%=56.25%となります。heightには0を指定します。これで縦横比を保ったまま可変する要素を実装することができます。iframeに絶対配置で基準点を親要素の左上にし、幅と高さが親要素と同じになるように指定すればウインドウ幅に応じて可変するiframeを実装できます。DEMOこの考え方はiframeだけでなく、ちょっとした時に使えることがあるので覚えておくといいでしょう。親要素がbox-sizing:border-boxを指定していた場合も計算の方法は同様です。幅と高さはpaddingを含めないコンテンツ幅となりますし、絶対配置の場合はpadding(borderは含まない)を含んだ値になります。一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。AM匿名iframe-wrapperの記述、クラスと間違っている気が。PMhiroご指摘ありがとうございます!修正しました。PMasiはじめまして。absoluteの指定箇所について質問です。220pxなので、50%だと110PXですね。計算が間違ってましたので修正しました。ご指摘ありがとうございます。AMasiお返事ありがとうございました。このページのおかげで%指定でぴったりページ作成できました!いつもサイト、本を拝見していますが分かりやすくて勉強になります。ありがとうございました。求めるmargin(padding)の高さ÷親要素のコンテンツ幅÷100%の式で求めたら、かなりの極小の値になってしまいました。PMhiroそうですね、誤りです。×100が正しいです。Spiceサービス作りましたAbout自分で得た情報、学んだことのアウトプットのために始めたblogです。して情報を共有することで少しでもWEB業界に貢献できたらなと思ってます。このblogが誰かの役に立てたら幸いです。内容で間違いなどありましたら指摘頂けると助かります。AuthortooltipHiro東京在住のフリーランスwebデザイナー。TSUKURIBEと言う屋号で活動してます。お問い合せは右のフォームまたはTSUKURIBEのサイトよりお願いします。Formフォームまたはこちらよりお問い合わせください。