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

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

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

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

CSS

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

Q&A

解決済

2回答

4312閲覧

cssで設定していないのに空白が生まれる

Yuriplllll

総合スコア29

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/02/06 14:17

htmlとcssの勉強でヘッダーの下にメインイメージ、その下に
2カラムレイアウト、フッターを作成しようとしています。初心者なのでcssで背景色をつけてマークアップしてみました。
2カラムレイアウトの箇所はfloatを使用して左右に同じ高さに設定したいです。

発生している問題・エラーメッセージ

①設定していないのにヘッダーの上に余白が出来てしまいます。

②中央寄せをするためにcssでmargin:0 autoを記載すると同じ高さにしたい2カラムレイアウトのdiv#leftとdiv#rightの高さが変わってしまいます。
div#leftが上のメインイメージのにくっつき、div#rightがフッターにくっついて高さがばらばらになってしまいます。

該当のソースコード

(htmlのコードここから↓)

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ネストクリニック | まごころと優しさを大切に</title> <meta name="description" content="まごころと優しさをモットーに患者さんに寄り添った施術を。清潔感溢れるクリニックです。"> <meta name="keywords" content="ネストクリニック,病院">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head> <body>
<!-- #wrapper ここから-->  <div id="wrapper">    <!-- #header ここから-->  <header> </header> <!-- #header ここまで-->  <!-- #mainimage ここから-->  <div id="mainimage"></div> <!-- #mainimage ここまで-->

     
<!-- #left ここから-->
<div id="left"></div>
<!-- #left ここまで-->

     
<!-- #right ここから-->
<div id="right"></div>

<!-- #right ここまで--> <div id="clearfix"></div> </div> <!-- #wrapper ここまで--> <!-- #footer ここから--> <footer></footer> <!-- #footer ここまで-->
</body> </html> (htmlのコードここまで↑)

**(cssのコードここから↓)
**
@charset "utf-8";

/* ========================================
ラッパー
========================================= */
div#wrapper{
width: 960px;
height: auto;
margin: 0 auto;
}

/* ========================================
ヘッダー
========================================= */

header{
width: 960px;
height: 99px;
background-color: green;

}

/* ========================================
メインイメージ
========================================= */

div#mainimage{
width: 960px;
height: 300px;
background-color: aquamarine;

}

/* ========================================
レフト
========================================= */

div#left{
width: 280px;
height: 300px;
background-color: palevioletred;
float: left;
margin-right: 30px;
}

/* ========================================
ライト
========================================= */

div#right{
width: 650px;
height: 300px;
background-color: blue;
float: left;

}

div#clearfix{
clear: both;
}

/* ========================================
フッター
========================================= */

footer{
width: 100%;
height: 79px;
background-color: red;

}
(cssのコードここからここまで)

試したこと

①はcssのheaderにmargin-top:0;と入力してみました。
②においてもdiv#leftにmargin-bottom:0;と入力してみましたが変化はありませんでした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

kei344

2019/02/06 14:21

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答2

0

ベストアンサー

記載されたHTMLコードをエディタに入れてみると、
あちこちに全角スペースが入っています。
不可視文字を見えるようにエディタの表示を変更できるなら
そうしてみると実際に全角スペースが入っているのかどうか分かると思いますので、
お使いのエディタで試してみてください。

あと、Webページを作成する時には最初に「リセットCSS」を読ませた方が良いです。
詳しくはググってください。

最後に、「2カラムレイアウトの箇所はfloatを使用して左右に同じ高さに設定したいです。」
とありますが、floatレイアウトで隣り合うボックス高さを自動的に揃えることはできません。
現在は height:300px と固定のheightを入れていますので高さは揃いますが、
heightを固定で指定してしまうと、コンテンツ量が増えた場合に中身がボックスからはみ出してしまいますし、
変更があるたびに高さの指定を変更するのも面倒なので、絶対に固定のheightで問題が出ないことが
確約されない限り、通常はheightの指定は行わないのが定石です。

高さ可変のボックスを横並びにして、かつ自動的に高さを揃える場合には、

① floatレイアウト+JavaScriptを使う
② flexboxレイアウトを使う
③ gridレイアウトを使う

の3パターンの作り方が考えられますので、
ご自身のスキルに合わせて選択されると良いかとおもいます。

投稿2019/02/06 15:19

aKusano

総合スコア3763

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

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

Yuriplllll

2019/02/07 13:24

回答ありがとうございました。親切に答えていただき感謝しています。まだまだ勉強が必要だとわかりました。頑張ります。
guest

0

何もないように見える部分に全角スペースなどは入っていませんか?
あと、cssに

css

1body { 2 padding: 0; 3}

なども入れてみてはいかがでしょう。

投稿2019/02/06 14:45

編集2019/02/06 14:47
cerfweb

総合スコア1899

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

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

Yuriplllll

2019/02/07 13:25

回答ありがとうございました。勉強になりました。記載してくださったcssも入れてみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問