ホームページ作成

【HTML/CSS】フロート配置でカラム落ちじゃないのに表示が変な件(解決)

さて、ホームページ制作も少しずつ進んでいますが、ここで壁にぶち当たりました。

 

 

 

それは

 

widthのサイズをちゃんと指定していると思うのに表示がおかしい

 

ということです。

 

 

文章で書くと意味わかんないかもしれませんが、順を追って記載します。

正常の場合

一部ソースコードはこんな感じです。

 

【CSS】

ul#menu {
width:800px; height:50px;
}

 

#menu li a {
width:200px; height:35px;
}

 

これだけじゃないですが、indexで確認するとこのように表示されます。

 

まぁ普通ですよね。

 

ちなみに、カラム落ちというのは

【CSS】

ul#menu {
width:800px; height:50px;
}

 

#menu li a {
width:201px; height:35px;
}

 

こうすることによってこのように表示されます。

 

これはmenuのli要素を

float:left

にしているので、フロート配置で横に水平にしています。

 

ところが、

 

width:800px;

 

に対して

 

width:201px;

 

と設定しています。

要素は4つあるので

 

201×4=804

 

はみ出してしまいます。

 

 

これが【カラム落ち】というらしいです。

 

これは分かります。

表示がおかしい場合

ところが、ソースを下記のように設定しました。

 

ul#menu {
width:960px; height:50px;
}

 

#menu li a {
width:240px; height:35px;
}

 

 

通常であれば

240×4=960

 

でカラム落ちはせずに収まるはずです。

 

ところがどっこい

確かにカラム落ちはしてないんですが。

 

 

 

なにこの余白?

 

なんでこうなったの???

 

 

わっからん!!!!

 

 

 

ちなみに、マウスカーソルをあてると

 

余白が無くなります。

 

 

 

 

 

なんで!?

原因は??

原因は分かりません!!

 

 

カラム落ちはしてないので、おそらくソースコード自体は問題なさそうです。

 

ってなると、使用している画像に問題があるのか・・・。

 

 

う~ん・・・。

っと、この記事を作成したら心優しいどなたかがご教授いただけないかと思って・・・・。

 

 

とりあえず時間あるときに調べたいと思います。
(ってこの記事書いてる前に調べろって話ですが)

 

分かり次第追記したいと思います。

 

【2019/05/04追記】

 

解決しました!!!

 

 

実はwidthは全く関係なかったです。

 

どうやら、ソースで

background-repeat:no-repeat;

と書いていたのがダメだったようです。

 

これを

background-repeat:repeat;

にしたら直りました!

 

 

【background-repeat:no-repeat;】の場合

 

【background-repeat:repeat;】の場合

 

 

 

変な空白なくなったーーーー!!!!

良かったー!!!!!!!!!

 

ちなみにrepeatとno-repeatの違いは

 

repeat:画像を繰り返す

no-repeat:画像を繰り返さない

 

ということらしいです。

 

 

つまりno-repeatで設定していたので、1度だけ画像を表示していたんですね。

なので変な空白が出来たのではないでしょうか。

 

 

とにかく問題は解決して良かったです!!