- ベストアンサー
画像メインの１カラムのリキッドデザインができない
- 画像をメインにした１カラムのリキッドデザインを作成したいが、画像の縦横比が崩れて縦長になりながら可変してしまう。
- CSSの設定方法を教えてください。
- 初めての質問なので至らないことがあるかもしれませんが、よろしくお願いします。
- yorozuyaginchan
- お礼率100% (4/4)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
画像に代わる文章は何もないのですか？ なら単に画像だけでよいのでは？背景+メイン画像+フッタ画像を合成した一枚の画像を作るべきです。 HTMLは、名前(Hyper Text Markup Language)というように、ハイパー(リンク機能)を付与した《テキストをその文書構造を示すようにマークアップする》メタ言語です。 したがって、最低限本文があるはずですし、画像があっても代替文字があるはずです。HTMLにはbodyのみが絶対必要なのはそういう意味です。 たとえば、HTMLが HTML4.01 <body> <div class="header"> ヘッダ </div> <div class="section"> 本文 </div> <div class="footer"> フッタ </div> </body> HTML5 <body> <header> ヘッダ <header> <section> 本文 <section> <footer> フッタ </footer> </body> という形をしているのは、文書の構造がそうだからです。HTML4.01のclass名は、仕様書の「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」と、HTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」の名前と意味に従っています。 このようにHTMLは、あくまである文書(テキスト)を、それを構成する要素に分解してマークアップするもので、プレゼンテーションとは分離して考えなければなりません。 →2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) 以上を踏まえて画像がメインのHTMLがあるとすると、そのHTMLはHTML4.01に従うと <body> <div class="header"> <h1>タイトル</h1> <p>ヘッダ</p> </div> <div class="section"> <h2>写真のタイトル</h2> <p><img src="./images/main.jpg" width="640" height="480" alt="河口湖湖畔から見た富士山"></p> </div> <div class="footer"> <h2>文書情報</h2> <p>フッタ</p> </div> </body> とかになるはずです。プレゼンテーションに関わる記述はありません。こうしておけば、先でどのようにデザインを変えるのも自由ですから・・ その上で、メインの画像をページの左右の中央にウィンドウサイズに合わせて表示したいなら、内容によってサイズが変わる置換インライン要素である画像をブロック要素に変換して配置させることになります。 スタイルシートは html,body{margin:0;padding:0;} div.header,div.section,div.footer{ width:100%;min-width:720px;max-width:1440px;margin:0 auto; border:solid 1px gray; } body>div>*{margin-top:0;} div.header{height:200px;} div.section{position:relative;} div.section p img{display:block;width:100%;height:auto;} ※ <div id="wall" ><div id="box">のようにむやみにidはつけるべきではありません。リンクのターゲットとか、javascriptで要素を特定する必要があるなどに限ったほうが良いです。スタイルシートの説明サイトで西がよく使われるのは、プロパティの説明に便利がよいためです。またwallとかboxのような、文書構造で意味のない名前をつけるべきではありません。 また、<div id="footer"><img src="css/images/foot.jpg"></div>のような書き方も文法上はエラーになりませんが、本来は誤りです。divやidは、HTMLに文書構造を示す要素(タグ)が足りないときに使うものです。この場合<p class="footer"><img src="css/images/foot.jpg"></p>で十分です。また複数の画像を持つ段落があるなら、 <div class="footer"> <p><img・・・・・</p> <p><img・・・・・</p> </div> とかです。この場合、二つの画像による段落があるが、その二つを示す適切なタグがないために、汎用ブロックである<div>を用いて、そのdivがどのような構成要素であるかを補完するためにfooterというclass名をつけているのです。このように、原則汎用ブロック内に直接行内要素は書くことはないはずです。 [補足] なお、background-sizeはCSS3のプロパティで、対応ブラウザの関係で使用するのは時期尚早でしょう。背景ではなく、画像としてHTML内に記述して上記と同様に合わせることは可能ですが、意味的におかしいので・・ 同じプロパティは、セレクタをグループ化して一度しか書かないようにしましょう。煩雑になってわかりにくくなるし、将来修正する手間が大変になります。また継承されるプロパティは最上位の要素に一度だけ書けば良いです。 HTML/CSSの仕様上、ウィンドウの高さからは決めることが出来ません。これはHTMLの根本的な目的「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2 )」を考えると当然です。
お礼
本当に感謝の限りです！！！ありがとうございます！！ これほどまでにわかり易く親切にご回答頂けて本当に感謝致します。驚きを隠せません。 今回の事でもともとデザインの可変に関してだけ知りたいと思いマークアップはしていなかったんですが、自身のマークアップの基本的な捉え方に、問題がありとても勉強不足であることにに気づかせて頂けて、本当に感謝しております。 id要素の件なのですが、質問の内容には記載しませんでしたが、お察しの通りjava scriptを使用したアニメーションを考えて使用していました。 そして、今回の本題の件なのですが、インライン要素とブロック要素という基本的な内容を私が理解できていなかった事が問題だったんですねｗｗさらにheight:auto;とHTMLの仕様上の関係、勉強になりました。 今回ご指摘頂けたおかげで、色々な事が理解できて、とても楽しくなってきました。深みに入れば、これから更に問題につまづいていきそうではありますが（笑） さっそく現在3点気になっていますｗ ●body>div>*{margin-top:0;}に使われている > はどういう意味があるのでしょうか？ ●div.section{position:relative;}でrelativeをご使用された理由 ●HTML4.01では要素は大きくブロックレベル要素とインライン要素のいずれかに分類されていますが、 HTML5ではブロックレベル要素とインライン要素の分類は無くなります。と表現されている文献を見つけたのですが、ではいったいHTML5の場合ではどうしたらいいのでしょうか 最後になりましたが、これだけ長文にも及ぶ、とてもわかり易い回答を用意するにはORUKA1951様の貴重なお時間を、ずいぶん頂いてしまった事と思います。改めまして本当にありがとうございました。 もしよろしければ今後ともぜひ仲良くして頂ければ嬉しく思います。