フレキシブルデザイン、リキッドデザインのimg

締切済

質問者：lovesms
質問日時：2014/03/21 22:23
回答数：2件

初歩的な質問失礼致します。

フレキシブルデザイン、リキッドデザインでは基本的に各要素の幅を%指定すると知ったのですが、<img>タグで記述する画像はどのように幅を指定したらよいのでしょうか？？
また、もしウインドウ幅に合わせて拡大するように指定したい場合、その画像の解像度は、
サイト幅に指定したmax-widthに合わせて作っておくといいのでしょうか？？

どなたか教えていただけないでしょうか？？

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2014/03/23 16:31

画像要素は、置換インライン要素に分類される要素ですから置換される画像サイズに依存します。

そこでブロック要素にして、幅を直近のstatic以外のコンテナブロックのサイズを参照して%で指定するのがセオリーでしょう。高さはautoで良いです。(多くのブラウザはblockに再指定しなくてもきちんと処理してくれますが、指定しておいたほうが良いでしょう。)

＞サイト幅に指定したmax-widthに合わせて作っておくといいのでしょうか？？
　直近のstatic以外のコンテナブロックのサイズ
　⇒9.3.1 位置決め方式の選択: 'position'プロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

スマートフォンサイト　デザイン - Webデザイン・CSS - 教えて！goo( http://oshiete.goo.ne.jp/qa/8515919.html )
　で例示したHTML5をHTML4.01strictに変更したものです。それと合わせてご覧ください。

　背景は伸縮させない(CSS2.1では伸縮できない、CSS3ならbackground-sizeで可能)で、
　⇒透明divの下に長い余白ができてしまう - Webデザイン・CSS - 教えて！goo( http://oshiete.goo.ne.jp/qa/8518974.html )
　のサンプル参照

[サンプル]
★タブは＿に置換してあるので戻す。
★htt:はhtt：(全角)に変更してあるので戻す
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　でチェック済み

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http：//www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
<style type="text/css">

</style>
<style type="text/css" media="screen">

</style>
<style type="text/css" media="print">

</style>
</head>
<body>
＿<div class="header">
＿＿<h1 id="title">Your title</h1>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li><a href="/">Some</a></li>
＿＿＿＿<li><a href="/b">navigation</a></li>
＿＿＿＿<li><a href="/c">links</a></li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>富士山</h2>
＿＿<p>
＿＿＿富士山（ふじさん）は、山梨県と静岡県に跨る活火山である。標高3,776 m、日本最高峰の独立峰で、その優美な風貌は日本国外でも日本の象徴として広く知られている。
＿＿</p>
＿＿<div class="figure">
＿＿＿<img src="http：//upload.wikimedia.org/wikipedia/commons/d/d5/FujiSunriseKawaguchiko2025WP.jpg" width="960" height="640" alt="">
＿＿＿<div class="figcaption">
＿＿＿＿<p>河口湖からの富士山</p>
＿＿＿</div>
＿＿</div>
＿＿<div class="aside">
＿＿＿<h3>富士五湖</h3>
＿＿＿<ul>
＿＿＿＿<li>本栖湖-もとすこ</li>
＿＿＿＿<li>精進湖--しょうじこ</li>
＿＿＿＿<li>西湖--さいこ</li>
＿＿＿＿<li>河口湖--かわぐちこ</li>
＿＿＿＿<li>山中湖--やまなかこ</li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h3>A nice footer</h3>
＿</div>
</body>
</html>

この回答への補足

ご回答ありがとうございます。
追加の質問をさせてください。

１.＞幅を直近のstatic以外のコンテナブロックのサイズを参照して%で指定するのがセオリーでしょう。
「直近のstatic以外のコンテナブロック」というのは<img>を囲む親要素ということですか？

２. HTMLにて<img>要素にwidth height属性を指定しいても、CSSで％指定すると、大きさはそちらの値になるのでしょうか？

３.各要素のmargin / padding も％指定で統一するものなのでしょうか？？

あつかましい質問すいません、よろしくお願い致します。

補足日時：2014/03/23 19:12

通報する

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2014/03/24 08:22

１.＞幅を直近のstatic以外のコンテナブロックのサイズを参照して%で指定するのがセオリーでしょう。

「直近のstatic以外のコンテナブロック」というのは<img>を囲む親要素ということですか？

　HTMLにおいて、「囲む」というような考え方はしない。　あくまでHTMLは要素(Element)の積み重ねです。「そのIMG要素を含む」です。
　positionの値はstatic(初期値)、relative、absolute、fixedがあります。
　
２. HTMLにて<img>要素にwidth height属性を指定しいても、CSSで％指定すると、大きさはそちらの値になるのでしょうか？
　widthなどの属性での指定は詳細度0として扱われます。

３.各要素のmargin / padding も％指定で統一するものなのでしょうか？？
　状況次第です。

　⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　をまずお読みください。このような質問場所では断片的で、しかも不正確な情報であふれています。仕様書には正確にすべて書かれています。その中で分からない部分を聞くような使い方をするほうが効率的です。また身にもつきます。
　特に
5 セレクタ
6 プロパティ値とカスケーディング、継承の割り当て
　あたりはプロパティの説明よりは先に確実に身につけないとスタイルシート利用できません。