CSS min-height の使いどころ

質問

• CSS min-heightは要素の高さの最小値を設定するプロパティです。
• min-heightは特にボックスの高さを揃えたい場合や、画像の大きさを揃える場合によく使用されます。
• プロの方々は、ショッピングサイトの商品紹介ページなどで各商品の写真と説明文を流し込むボックスにmin-heightを使用しています。

回答No.1

ORUKA1951 · ベストアンサー

min-heightは、とてもよく使うプロパティです。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
　たとえば、section内のnav(目次)を本文の左に表示したり、脚注に当たるものを右に置くときとか・・
[HTML5]
・・・・・・
<section>
　<h2>本文</h2>
　<section>
　　<h3>見出し</h3>
　　<p>記事</p>
　</section>
　<section>
　　<h3>見出し</h3>
　　<figure>
　　 <p><img></p>
　　</figure>
　　<p>記事</p>
　</section>
　<section>
　　<h3>見出し</h3>
　　<p>記事</p>
　</section>
　<nav>
　　<ol>
　　　<li></li>
　　　<li></li>
　　　<li></li>
　　</ol>
　</nav>
　<aside>
　　付属記事
　</aside>
</section>
[HTML4}上記のそれぞれを<div class="section">のように書き換える
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

・・・・この場合、本文記事の長さが大きく変動するけれど、左右に目次や補足記事をおきたいとき
div.section{width:100%;position:relative;min-height:300px;}/*★*/
div.section h2,div.section div.section{margin:0 20%}
div.section nav,div.section aside{position:absolute;top:0;width:18%;height:100%;clear:right;}
div.section nav{left:0;}
div.section aside{rirght:0;}
figure img{display:block;width:320px;height:auto;float:right;margin:5px;}
ですよね。

★floatは、見出しで解除するとか、次のsectionで解除するので事足ります。段組に使うことはありませんので
　・floatを段組に使用すると文書の構成自体を変えなきゃない
　・記事中で本来のfloatが使えない
★画像の大きさをそろえるときは、display:blockにして、widthないしheightをautoにすればよい。
　デザインのために画像を伸縮しない
　必要ならimg[width="480"]{margin:0 40px;}とかで調整できる

[参考]
ＣＳＳについて教えてください - ホームページ作成ソフト - 教えて！goo ( http://okwave.jp/qa/q7539718.html )

　特に多くの人と作業するときなど、最初にHTMLをきちんと書いておかなきゃダメです。上記サンプルだとスタイルシートを記述する人はHTMLを一切開かなくても、デザインできるはずです。なぜなら、文書構造がきちんとマークアップされているからです。HTMLに変なclass名もidもない。
　プロパティの一つ一つの使い方や意味はボチボチ身につけていくことができますが、それ以前にHTMLが出来てなきゃ何にもなりません。

お礼

ORUKA1951さん、丁寧な回答ありがとうございます。

ソースまで書いていただきmin-heightの使い方も分かりましたが、HTMLをまずキチッと書かないと・・・という話もシックリきました。

ORUKA1951さんが答えている他の質問のやりとりも（まだ全部読みきれてはいませんが）いくつか読ませていただきました。追ってじっくり読ませていただきます。

HTMLが出来てなきゃ何にもなりません・・・というのはHTML構文を
正しく理解した上でマークアップできなければ・・・という意味だと
思いますが、見本に書いていただいたソースがHTML5とCSS3
だった時点で、まだ私はそれらに対応できていない事についても
ギクッとしました。・・・勉強します。

重ねて、回答いただきありがとうございました。