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

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

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

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Sublime Text

SublimeTextとは、オーストラリアのSublime HQ Pty Ltdが提供しているテキストエディターのことです。Mac/Windows/Linuxでの利用が可能で、柔軟にカスタマイズできたり、多くの言語に対応していくこともあり、海外や日本国内でも人気のあるエディターです。

HTML

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

CSS

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

Q&A

解決済

2回答

6124閲覧

表示されないfooterを表示させる

nakimushimaigo

総合スコア1

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Sublime Text

SublimeTextとは、オーストラリアのSublime HQ Pty Ltdが提供しているテキストエディターのことです。Mac/Windows/Linuxでの利用が可能で、柔軟にカスタマイズできたり、多くの言語に対応していくこともあり、海外や日本国内でも人気のあるエディターです。

HTML

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

CSS

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

0グッド

1クリップ

投稿2020/08/11 04:20

HTML CSS ```### 前提・実現したいこと footerを表示させたいです HTMLとCSSを勉強をし始めました。 今、レイアウトの勉強に入りました。 現在Google ChromeとSublime Textを使用しています。 main部分の中央よせをした際にfooterが潜り込まないように、 <div class="main clearfix"> で潜り込みを回避しようといているのですが、上記コードでmain部分に潜り込まないようになると思うんですが 肝心のfooterが表示されない状態です ### 発生している問題・エラーメッセージ main部分の中央寄せができましたが下のfooterが消えてしまっっている状態です。 ### 該当のソースコード ソースコード HTML <!DOCTYPE html> <div class="main clearfix"> <div class="blog"></div> <div class="sidebar"></div> <div class="footer"></div> </body> </html> CSS *{ margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ""; display: block; clear: both; } .main{ width: 840px; background-color: green; margin: auto; } .blog{ width: 600px; height: 1400px; background-color:palegreen; float: left; } .sidebar{ width: 240px; height:1400px; background-color: limegreen; float: left; } .footer{ width: 100%; height: 120px; background-color: blue; } ※途中は省略いたしました。 ### 試したこと ここに問題に対して試したことを記載してください。 NETで検索しfooterの固定など調べたのですが、Mainの中央よせの際の記事などが見つけられませんでした。 まだ初心者なので記事の内容を応用で試すこともできずお聞きしたいです。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答2

0

ベストアンサー

足りない</div>を追加してください。

html

1<div class="main clearfix"> 2 <div class="blog"></div> 3 <div class="sidebar"></div> 4</div> /* 追加 */ 5<div class="footer"></div>

あるいは、

html

1<div class="main clearfix"> 2 <div class="blog"></div> 3 <div class="sidebar"></div> 4 <div class="footer"></div> 5</div> /* 追加 */

というように、mainの中に footer を入れるなら、
footer に clear: both; を追加して、回り込みを解除しましょう。

css

1.footer{ 2width: 100%; 3height: 120px; 4background-color: blue; 5clear: both; /* 追加 */ 6}

投稿2020/08/11 04:56

hatena19

総合スコア34022

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

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

nakimushimaigo

2020/08/11 12:44

返信ありがとうございました。 </div>が足りませんでした。修正したところきちんとfooterが表示されるようになりました。 これから学習していくにつれもっとコードが増えていくのできちんと対になっているか? 気をつけていきたいと思います。 本当にありがとうございました。
guest

0

</div>の数が足りていないので、適切な場所に入れましょう。

投稿2020/08/11 04:35

kei344

総合スコア69574

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

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

nakimushimaigo

2020/08/11 12:47

mainの</div>が足りませんでした。修正し表示されるようになりました。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.40%

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

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

質問する

関連した質問