質問: ウェブデザイナーの方、あるいはコーダーの方に質問です。 私はウェブサイト制作に関わる仕事をしたくて勉強しているものの、まだ仕事として 食べていけるレベルではない・・・くらいの者です。 私はよく好印象を抱いたサイトのHTMLソースやCSSを見ているのですが、 min-height というプロパティーが使われているのを度々目にします。 しかし、自分が勉強している範囲では今のところ height じゃなくて min-height を設定する 必要性を感じるケースに出くわした事がありません。また、プロが作ったであろうサイトの CSSを見ても、どうしてそこが height ではなくて min-height なのか、(自分の未熟さもあって) そこまで読みきれない事が多いのです。 フロートの解除とか、そうしたテクニカルな使い方はあるようですが、本来の「要素の高さの 最小値を設定する」という用途で使う場合、プロの方はどういった所で使うのでしょうか? (例えばショッピングサイトの商品紹介ページで各商品の写真と説明文を流し込む ボックスに使っている・・・みたいに、こういう案件でこういうふうに使っているという事が 分かるとありがたいです。) 画像の大きさを揃えるにしても、自分だったらフォトショで画像の方をいじってしまう所ですし、 ボックスの高さが揃っているように見せたいというケースも自分は今まで背景画像を工夫して 揃っているように見せる方法を採っていたため、みんな、そんなに min-height を使っている モノなのか?・・・と気になっています。 私くらいのレベルではほとんど使わないけどチームを組んで進めるような大きな案件を扱う ような環境では min-height はよく使われているのかも・・・などと勝手に想像しては、こんな レベルで自分は食べていけるようになるのかな・・・と不安に慄いている次第、どなたか お手隙の際にお答えいただけるとありがたいです。 宜しくお願いします。
回答: min-heightは、とてもよく使うプロパティです。 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ たとえば、section内のnav(目次)を本文の左に表示したり、脚注に当たるものを右に置くときとか・・ [HTML5] ・・・・・・ 本文 見出し 記事 見出し 記事 見出し 記事 付属記事 [HTML4}上記のそれぞれをのように書き換える ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ・・・・この場合、本文記事の長さが大きく変動するけれど、左右に目次や補足記事をおきたいとき 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;}とかで調整できる [参考] CSSについて教えてください - ホームページ作成ソフト - 教えて!goo ( ) 特に多くの人と作業するときなど、最初にHTMLをきちんと書いておかなきゃダメです。上記サンプルだとスタイルシートを記述する人はHTMLを一切開かなくても、デザインできるはずです。なぜなら、文書構造がきちんとマークアップされているからです。HTMLに変なclass名もidもない。 プロパティの一つ一つの使い方や意味はボチボチ身につけていくことができますが、それ以前にHTMLが出来てなきゃ何にもなりません。