CSS min-height の使いどころ
- CSS min-heightは要素の高さの最小値を設定するプロパティです。
- min-heightは特にボックスの高さを揃えたい場合や、画像の大きさを揃える場合によく使用されます。
- プロの方々は、ショッピングサイトの商品紹介ページなどで各商品の写真と説明文を流し込むボックスにmin-heightを使用しています。
- ベストアンサー
CSS min-height の使いどころ
ウェブデザイナーの方、あるいはコーダーの方に質問です。 私はウェブサイト制作に関わる仕事をしたくて勉強しているものの、まだ仕事として 食べていけるレベルではない・・・くらいの者です。 私はよく好印象を抱いたサイトのHTMLソースやCSSを見ているのですが、 min-height というプロパティーが使われているのを度々目にします。 しかし、自分が勉強している範囲では今のところ height じゃなくて min-height を設定する 必要性を感じるケースに出くわした事がありません。また、プロが作ったであろうサイトの CSSを見ても、どうしてそこが height ではなくて min-height なのか、(自分の未熟さもあって) そこまで読みきれない事が多いのです。 フロートの解除とか、そうしたテクニカルな使い方はあるようですが、本来の「要素の高さの 最小値を設定する」という用途で使う場合、プロの方はどういった所で使うのでしょうか? (例えばショッピングサイトの商品紹介ページで各商品の写真と説明文を流し込む ボックスに使っている・・・みたいに、こういう案件でこういうふうに使っているという事が 分かるとありがたいです。) 画像の大きさを揃えるにしても、自分だったらフォトショで画像の方をいじってしまう所ですし、 ボックスの高さが揃っているように見せたいというケースも自分は今まで背景画像を工夫して 揃っているように見せる方法を採っていたため、みんな、そんなに min-height を使っている モノなのか?・・・と気になっています。 私くらいのレベルではほとんど使わないけどチームを組んで進めるような大きな案件を扱う ような環境では min-height はよく使われているのかも・・・などと勝手に想像しては、こんな レベルで自分は食べていけるようになるのかな・・・と不安に慄いている次第、どなたか お手隙の際にお答えいただけるとありがたいです。 宜しくお願いします。
- pofhal
- お礼率100% (1/1)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
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;}とかで調整できる [参考] CSSについて教えてください - ホームページ作成ソフト - 教えて!goo ( http://okwave.jp/qa/q7539718.html ) 特に多くの人と作業するときなど、最初にHTMLをきちんと書いておかなきゃダメです。上記サンプルだとスタイルシートを記述する人はHTMLを一切開かなくても、デザインできるはずです。なぜなら、文書構造がきちんとマークアップされているからです。HTMLに変なclass名もidもない。 プロパティの一つ一つの使い方や意味はボチボチ身につけていくことができますが、それ以前にHTMLが出来てなきゃ何にもなりません。
関連するQ&A
- min-heightとheightの違いについて
HTML、CSSを勉強中です。 こちらで似た質問は拝見したのですが、疑問が解決できなかったので投稿させて頂きます。 ページの内容が少ないときにもフッターを最下部に表示させるため、 いくつかのサイトを参考にさせて頂いて以下のようなコードを書きました。 ・HTML(一部) <html> <body> <div id="container"> <div id="article">内容</div> <div id="footer">フッター</div> </div> </body> </html> ・CSS(一部) html,body { height: 100%; } div#container { position: relative; min-height: 100%; } body > #container { height: auto; } div#article { padding-bottom: 20px; } div#footer { position: absolute; bottom: 0px; height: 20px; width: 100%; } これで目的は達成したのですが、ほぼ丸写しの作業で、containerにheightではなくmin-heightを指定する意味がよく分かりません。 min-heightは高さの最小値を設定するプロパティとのことで、これ自体が上手くいくことは分かるのですが、何故heightに替えると上手くいかないのかが分かりません(実際に、フッターがページ内容の終わり位置まで浮き上がってきます)。 親のbody、親の親のhtmlの高さが100%に指定されているのだから、containerの高さ(height)もこれらに対して100%とすることで画面いっぱいの高さが常に確保されるのかと思ったのですが、違うのでしょうか。 そもそもhtmlの高さは何に対して100%なのかと調べてみると「表示領域に対して」とのことで、実はこの記載があったページではmin-heightではなくheightを利用してボックスの高さを100%に出来るとまとめてあったのですが、上述の通り私は今回の目的には上手く利用できませんでした。 「高さ100%のhtml、bodyに対してcontainerのheightが100%」というのが上手くいかないのなら、 何故heightをmin-heightに替えるだけでOKなのかますます分からなくなってしまいました。 だらだらとした文面で申し訳ないのですが、解説していただければ大変助かります。
- 締切済み
- CSS
- CSS media queryについて
下記のcssで疑問があります。 @media all and (min-width:500px)と@media all and (min-width:1000px)に それぞれ違うスタイルがあります。 (min-width:500px)にはfloatがあり、(min-width:1000px)にはありません。 しかし、(min-width:1000px)にもfloatされているのですが仕様でしょうか? もしこれが仕様であれば... floatさせないようにするには(min-width:1000px)にも 設定をしなければならないということでしょうか? 宜しくお願いします。 -------------------------------------- @media all and (min-width:500px) { #box01{ float:left; width:240px; height:400px; background:#334467; } #box02{ float:right; width:240px; height:400px; background:#ffff00; } } @media all and (min-width:1000px) { #box01{ width:400px; height:400px; background:#334467; } #box02{ width:400px; height:400px; background:#546789; } }
- ベストアンサー
- CSS
- min-width?を使って背景にスクロールを出さない
body内にcssでbox1をおき、そこに固定背景を指定しています。 その中にさらにbox2を置いています。 box1の幅が1000px、box2の幅が600pxだとします。 できれば、横スクロールをbox2の幅以下で出したいのです。 min-widthではIE6等には利きません・・・。 ハック、javascriptもかわまないので、どなたか効率のいいやり方を伝授していただけないでしょうか? よろしくお願いします。 何もない状態のcssを書きます。 ■CSS body{ } .box1{ width: 1000px; height: 500px; margin: 10px auto; background-color:#000; text-align:center; } .box2{ width: 1000px; height: 300px; margin: 100px auto; background-color:#fff; } ■HTML <body> <div class="box1"> <div class="box2"> </div> </div> </body>
- 締切済み
- HTML
- heightの指定が無視される
現在wordpressでサイトを作っているんですがimg画像の大きさを指定するのに width指定の方は大きさが変わるんですがheightの指定が無視されて困っています。 CSSの設定でheightだけ無効にするような方法があるのでしょうか。 よろしくお願いいたします。
- 締切済み
- HTML
- Safariでheight:100%のボックスを表示したいのです
Safariでheight:100%のボックスを表示したいのです。MacIE・WinIE・FireFox・Operaでは出来たのですが、どうしてもSafariだけheight:100%のボックスが出来上がらず・・・。 以下、記述したCSSとHTMLです。 HTML--------- <body> <div id="main"> <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 </div> </body> </html> CSS--- /* \*/ html{ height:100%; } /* \*/ body{ height:100%; width:80%; margin:0px auto; padding:0px; } div#main{ background-image:url(../images/contents_bg.gif); border:solid 1px #760014; border-width:0px 1px; height:100%; min-height: 100%; margin:0px auto; padding:0px; border:1px solid #ff0000; } body > #main{ height: auto; } h1{ margin:0px auto; padding:0
- ベストアンサー
- HTML
- CSSでボックスのheightが0になる
http://css-happylife.com/ 上のサイト(私のサイトではないです)で、 <div id="contentsInner"> <div id="main"> </div> <div id="sub"> </div> </div> という部分があります。 CSSはだいたい下のような感じです。 #contentsInner { margin:0pt auto; position:relative; width:910px; } #main { float:left; overflow:hidden; width:500px; } #sub { float:right; margin-top:20px; padding:8px 0pt 8px 10px; width:390px; } Firebugで確認したところ、 #mainの大きさは500 x 1552 #subの大きさは390 x 1305 に対し、 #contentsInnerの大きさは910 x 0 と、高さが0になっています。 もちろん、#contentsInnnerに背景画像を設定しても 表示されることはありません。 ブラウザもheight=0と認識しているようです。 なぜ高さが0になってしまっているのでしょうか。 このバグ?の対策を教えてください。 よろしくお願いします。
- ベストアンサー
- CSS
- CSS 上下に余白なくtableを広げたい
今回、WEBサイトをCSSで作成しているのですが、IEだと予定通りに表示できFire Foxだと表示できないというところで躓いてしまいました。 width: 900px; margin: 0px; height: 100%; min-height: 100%; background-color: #000000; このCSSをtableタグで呼び出しているのですが、Fire Foxだと一番下に空白ができてしまいます。 この空白を取っ払いたいのですが、どのようにすればいいのでしょうか。 ご存じの方がいらっしゃいましたら、ご教示ください。よろしくおねがいします。 Fire Fox Ver.10.0.2
- ベストアンサー
- HTML
- CSSについてです
tumblrのテーマを作っているのですがサイドバーのレイアウトがうまくいきません。 具体的には、サイドバーがコンテンツがある部分の長さまでしか伸びず、それより下は記事の部分が食い込んでしまうといった問題が発生しています。 僕は、サイドバーの横にあるborder-rightを記事などほかの部分と同じ長さまできっちり伸びるようにしたいです。 このサイトを見てこんな設定をしてみたのですがこれでは画面に表示されている部分までしか効果がなくスクロールしたら意味がなくなってしまいます。 サイト http://d.hatena.ne.jp/seto-san/20081215/1229335070 HTML <body> <div id="body">本文</div> </body> CSS * { margin: 0px; padding: 0px; } html{ height: 100%; } body{ height: 100%; } #body { height: 100%; min-height: 100%; } body > #body { height: auto; } tumblrのテーマはごちゃごちゃしているので、簡易的なページを位置から作ってそこでサイドバーを実装してみてもうまくいきませんでした。 何かうまいやり方があったら教えてください
- 締切済み
- CSS
- cssをhtml内から外部へ移すと読み込みません。
cssをhtml内から外部へ移すと読み込みません。 WEB作成初心者です。よろしくお願いします。 Dreamweaverでサイトを作成しています。 CSSを設定すると全てhmtl内に書き出されてしまっていたので 外部CSSファイルに書き出したいと思っているのですが 例えばhtmlの <head>内にある .article { padding-top: 275px; padding-left: 30px; width: 964px; min-height: 100%; padding-right: 30px; } をそのままカットペーストで外部cssファイルにペーストしても 反映されずに何も見えません。 カットペーストで行けるものとそうでないものもあるようです。 何か特別な設定等あるのでしょうか。 教えてください。よろしくお願いします。
- ベストアンサー
- HTML
- cssでhtml{width:100%;}の意味がわかりません
いつもお世話になっております。 早速質問です。 あるサイトのCSSを拝見すると、以下の様な記述がありました。 html{ width : 100% ; height : 100% ; } body{ width : 100% ; height : 100% ; } BOXに幅や高さを指定する記述はよく見かけますが、htmlやbodyに幅や高さを100%と指定する理由がわかりません。 上記のCSSの意味を教えてください。 宜しくお願いします。
- ベストアンサー
- HTML
お礼
ORUKA1951さん、丁寧な回答ありがとうございます。 ソースまで書いていただきmin-heightの使い方も分かりましたが、HTMLをまずキチッと書かないと・・・という話もシックリきました。 ORUKA1951さんが答えている他の質問のやりとりも(まだ全部読みきれてはいませんが)いくつか読ませていただきました。追ってじっくり読ませていただきます。 HTMLが出来てなきゃ何にもなりません・・・というのはHTML構文を 正しく理解した上でマークアップできなければ・・・という意味だと 思いますが、見本に書いていただいたソースがHTML5とCSS3 だった時点で、まだ私はそれらに対応できていない事についても ギクッとしました。・・・勉強します。 重ねて、回答いただきありがとうございました。