- ベストアンサー
CSSでの画像の自動縮小について
- CSSを使用して、ブラウザサイズに応じて画像を自動縮小する方法が分からない
- フレームレイアウトとテーブルの幅を可変にしないと、画像の縮小は難しいのか
- 画像の自動縮小を実現するためのCSSの設定が正しくない
- cheery_express
- お礼率92% (12/13)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
スタイルシートの質問だと思いますが、スタイルシートを導入する最大の目的は、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」の分離です。 ＞テーブルのレイアウトを崩したくないので、幅は固定したまま、かつ画像はブラウザサイズによって自動縮小にするようにしたいのですが、 とありますが、仕様書を一度でも読まれていたら『単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )』や『ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』が否定されている事は御存知だと思います。 拝見するところ、アルバムのような画像とその説明のようです。でしたらHTMLは、 単純に <div class="section" id="PhotoList"> <h2>アルバム</h2> <div class="section"> <h3>写真タイトル</h3> <p>記事・・・</p> <div class="figure"> <img src="" width="" height="" alt=""> <div class="figcaptin"> 画像の説明 </div> </div> </div> <div class="section"> <h3>写真タイトル</h3> <p>記事・・・</p> <div class="figure"> <img src="" width="" height="" alt=""> <div class="figcaptin"> 画像の説明 </div> </div> </div> の繰り返しなどになるはずです。!!! ★id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )もので、wakuとかa,bじゃ意味ないですし、後々困るのはあなたです。HTML5では、HTML4に文書構造を示す要素がなく、DIVを使わざるを得なかった反省から、『文書を構造化するために要素が追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』。言い換えればそのようなclass、idが使われてきたものを要素にしたと言うこと。 HTML5だと <section id="PhotoList"> <h2>アルバム</h2> <section> <h3>写真タイトル</h3> <p>記事・・・</p> <figure> <img src="" width="" height="" alt=""> <figcaptin> 画像の説明 </figcaption> </figure> </section> <section> <h3>写真タイトル</h3> <p>記事・・・</p> <figure> <img src="" width="" height="" alt=""> <figcaptin> 画像の説明 </figcaption> </figure> </section> になりますね。 ひょっとして、画像リスト <dl> <dt>タイトル</dt> <dd>記事</dd> <dd class="photo"> <img src="" width="" height="" alt=""> <p>説明</p> </dd> <dt>タイトル</dt> <dd>記事</dd> <dd class="photo"> <img src="" width="" height="" alt=""> <p>説明</p> </dd> ・・のほうが良いかも。あなたの文書はあなたしか分からない。 ★HTMLには、文書の(内容)構造しか書かない!!どのようにプレゼンテーションするかは、そのためのスタイルシートを使用します。 ＞テーブルのレイアウトを崩したくない ＞画像を自動で縮小したい 整合性が全く無いように読めます。tableを使う一番の目的は、tableだと 『表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )』 なぜtableレイアウトなのかを説明していただけると・・ ★文中のリンク先は読んでおくこと ★画像を伸縮させる事は可能です（簡単に）が、それには、前提として「CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_input )」
お礼
詳しいコードまで提示いただきまして有難うございました。 作成しているのは、アルバムではなく、企業の会社説明資料です。 でも、これはちゃんと説明していなかった私に責任がありますね。申し訳ありません。 とりあえずは無理ということが分かっただけでも前進です。 参考URLも、十分参考になりそうな記事なので、再度読み直させていただきます。 有難うございました。