質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

993閲覧

ボディ要素の高さが失われ0になっている原因を知りたい

digitalhimiko

総合スコア142

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/01/25 16:06

質問したいこと:2カラムを囲っているボディの高さが0になってしまっている+枠線が上だけ表記される理由が知りたい

id="pageBody"とid="pageFoot"の間のmarginがなくなってしまいます。

→原因を探るため周りに10pxのsolidな赤い枠線で囲ってみたのですが、上側部分だけ枠線が現れます。
また、pageBodyのバックグラウンドカラーもid="pageBodyMain"とid="pageBodySub"のdivとは異なる色にしてみましたが完全に2つのdivの下に隠れているのか見えません。

HTML

1 <div id="pageBody"> 2 <div id="pageBodyMain"> 3 <article> 4 5 <header class="articleDetailHead"> 6 <h1 class="pageTitle">Cafe Debut</h1> 7 <img src="images/img_01_01.jpg" alt="" width="720px" height="390px"> 8 <p>baser CMS カフェサイト用テーマ</p> 9 <p>baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞(受賞結果はこちら)</p> 10 </header> 11 <section class="articleDetailBody"> 12 <h2 class="heading-typeA">いますぐ、はじめられるカフェサイトテーマ!</h2> 13 <p>baserCMSは、「コーポレートサイトにちょうどいい」をキャッチコピーにしたcake PHPベースの国産CMS。Cafe Debutは、baseCMSのテーマコンテスト2012に応募するために、チームこもりこましゃで作成しました。</p> 14 <p>baserCMSのインストールと、Cafe Debutテーマの初期設定を行ったら、あとはあなたのスマートフォンのInstagramで写真を撮っていくだけ。</p> 15 <p>Instagramのおしゃれ写真で、すぐに素敵なカフェサイトが出来上がっちゃうフォトログ風baserCMSテーマです。</p> 16 17 <table class="table-A"> 18 <caption>制作担当</caption> 19 <tr> 20 <th>コモモ</th> 21 <td id="red_line">企画・デザイン・baserCMSテーマのベース組み込み担当</td> 22 </tr> 23 <tr> 24 <th class="moriko">モリコ</th> 25 <td>HTML/CSSコーディング担当</td> 26 </tr> 27 <tr> 28 <th class="hirosyama">ひろしゃま</th> 29 <td>プラグイン制作、テーマ実装の難しいところが担当</td> 30 </tr> 31 </table> 32 33 <section> 34 <h3 class="heading-typeB">プラグインでInstagramと連携</h3> 35 <p>プラグインでInstagramと連携して、トップページにInstagramで撮影した写真がすぐに反映されます。</p> 36 <figure> 37 <img src="images/img_01_02.jpg" alt="" width="720px" width="390px"> 38 <figcaption>今日のランチのローストビーフサンドを撮影♪</figcaption> 39 </figure> 40 </section> 41 42 <section> 43 <h3 class="heading-typeB">レスポンシブデザインでスマートフォン、タブレット表示も快適</h3> 44 <p>さまざまなデバイスの表示対応に、レスポンシブデザインを採用しました。Instagramでお店のメニューを撮影してすぐにスマートフォンで確認できるのも嬉しい♪</p> 45 <figure> 46 <img src="images/img_01_03.jpg" alt="" width="720px" width="390px"> 47 <figcaption>左からiPhone、iPad、MacBook、Airで表示確認</figcaption> 48 </figure> 49 </section> 50 51 <section> 52 <h3 class="heading-typeB">Webフォントだから、飾り文字やアイコンもキレイ</h3> 53 <p>サイトのタイトルやナビゲーション、主要な見出しはGoogle Web Font、アイコンはウェブフォント(Fontello)を採用しています。拡大縮小されるスマートフォンやタブレットでも解像度を気にすることなくキレイな文字とアイコン表示を実現できました。</p> 54 <figure> 55 <img src="images/img_01_04.jpg" alt="" width="720px" width="390px"> 56 <figcaption>iPhoneの画面に近づいても・・・( ゚д゚)ハッ!綺麗!</figcaption> 57 </figure> 58 </section> 59 </section> 60 61 <footer class="articleDetailFoot"> 62 <section> 63 <h2 class="heading-typeC">関連リンク</h2> 64 <ul> 65 <li>Cafe Debutのダウンロードページ</li> 66 <li>Cafe Debutのデモページ</li> 67 <li>baser CMS公式サイト</li> 68 <li>Instagram公式サイト</li> 69 </ul> 70 </section> 71 72 <aside class="creditUnit"> 73 <p>撮影協力</p> 74 <h2 class="heading-typeC">kitchen nest</h2> 75 <p>北海道札幌市中央区南3条西8丁目</p> 76 <ul> 77 <li>http:www.nest-kitchen.jp</li> 78 <li>Facebookページ</li> 79 </ul> 80 <p>Cafe Debutテーマのイメージ撮影にご協力いただきました。とても素敵なお店です。</p> 81 </aside> 82 </footer> 83 </article> 84 </div> 85 <div id="pageBodySub"> 86 <section class="newList"> 87 <h2>おしらせ</h2> 88 <ul> 89 <li><time datetaime="2013-10-01">2013.10.01</time> 90 コモモとモリコで、書籍「HTML/CSSの教科書(仮題)」を執筆中です。お楽しみに 91 </li> 92 <li><time datetime="2013-10-01">2013.10.01</time> 93 コモモ・モリコ・ひろしゃま3人のサイト「komorikomash」をオープンしました 94 </li> 95 </ul> 96 </section> 97 </div> 98 </div> 99 <footer id="pageFoot"> 100 <p id="copyright"><small>Copyright&copy; 2013 @komorikomasha All Rights Reserved</small></p> 101 </footer> 102 </div>

CSS

1/*ページボディ*/ 2#pageBody { 3 background-color: #FFCC66; 4 border: solid 10px #FF0000; 5} 6 7#pageBodyMain { 8 width: 720px; 9 float: left; 10 background-color: #66CCFF; 11} 12#pageBodySub { 13 width: 220px; 14 float: right; 15 background-color: #99FF66; 16} 17 18/*ページフッター*/ 19#pageFoot { 20 border-top: solid 1px #CCCCCC; 21 margin-top: 15px; 22 clear: both; 23} 24#copyright small{ 25 font-size: 12px; 26 line-height: 1.5; 27} 28

勉強用に使用している書籍には「ページボディ要素の高さが失われたため」で「clearfix」と呼ばれるテクニックで解決するという記述がありました。
解決の前に上記のような現象が起きる理由[CSSの仕様]について教えていただきたいです。
よろしくお願いします!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

このあたりの説明を読んでみて下さい。

【CSSの【float】についてちょっと本気出して説明してみた。 | たねっぱ!】
https://taneppa.net/float/

ちなみに2020年現在、レイアウトにfloatを使う必要はありません。flexやGridを使用しましょう。
(書籍が古いとflex/Gridが載っていないこともありますので、注意してください)

投稿2020/01/25 16:12

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

digitalhimiko

2020/01/25 16:30

教えていただいたサイト読んでなんとはなくわかりました。 クリアランスの仕様が原因とわかりました! 今はfloat使わないのですね。本の索引をみてみるとflexは載っているようなのでとりあえずこれで進めてみます!ありがとうございました! ~以下引用~ 【clearプロパティを与えた要素にはmargin-topが効かない!】という事態が起きます。 しかし、これは効いてないのではなく、フロートした子要素を無視して、ヘッダーとフッターの間のmarginとなるのです。 なんのこっちゃ?っとなると思いますが、clearプロパティは通常フローに戻すといった役割があり、フロートちゃん達との辻つまをあわせるため クリアランスという謎余白が自動的に追加されてます。 ためしにフッターのmargin-topをフロートした子要素を超える360pxなどにするとちゃんと余白がでます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問