CSS min-height の使いどころ

ウェブデザイナーの方、あるいはコーダーの方に質問です。

私はウェブサイト制作に関わる仕事をしたくて勉強しているものの、まだ仕事として
食べていけるレベルではない・・・くらいの者です。

私はよく好印象を抱いたサイトのHTMLソースやCSSを見ているのですが、
min-height というプロパティーが使われているのを度々目にします。

しかし、自分が勉強している範囲では今のところ height じゃなくて min-height を設定する
必要性を感じるケースに出くわした事がありません。また、プロが作ったであろうサイトの
CSSを見ても、どうしてそこが height ではなくて min-height なのか、（自分の未熟さもあって）
そこまで読みきれない事が多いのです。

フロートの解除とか、そうしたテクニカルな使い方はあるようですが、本来の「要素の高さの
最小値を設定する」という用途で使う場合、プロの方はどういった所で使うのでしょうか？

　　（例えばショッピングサイトの商品紹介ページで各商品の写真と説明文を流し込む
　　　ボックスに使っている・・・みたいに、こういう案件でこういうふうに使っているという事が
　　　分かるとありがたいです。）

画像の大きさを揃えるにしても、自分だったらフォトショで画像の方をいじってしまう所ですし、
ボックスの高さが揃っているように見せたいというケースも自分は今まで背景画像を工夫して
揃っているように見せる方法を採っていたため、みんな、そんなに min-height を使っている
モノなのか？・・・と気になっています。

私くらいのレベルではほとんど使わないけどチームを組んで進めるような大きな案件を扱う
ような環境では min-height はよく使われているのかも・・・などと勝手に想像しては、こんな
レベルで自分は食べていけるようになるのかな・・・と不安に慄いている次第、どなたか
お手隙の際にお答えいただけるとありがたいです。

宜しくお願いします。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/06/23 05:57

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://oshiete.goo.ne.jp/qa/7539718.html )

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

この回答へのお礼

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

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

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

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

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

お礼日時：2012/06/23 17:05