BOOK Studio947
狩野祐東・狩野さやか著書

p.188 2カラムの配置が反映されません

書籍Q&ACategory: スラスラわかるHTML&CSSのきほんp.188 2カラムの配置が反映されません
asked 4年 ago

/* menu.html*/
.menu_block{
overflow: hidden;
zoom: 1;
}
.menu_left{
float: left;
width: 280;
margin-right: 20px;

}
.menu_right{
float: left;
width: 600px;
}

上記のように記載していますが、右側に回り込みしません。
よろしくお願いします。

3 Answers
answered 4年 ago

追記

使用環境はMac10.9でsafari、chrome両方で確認しました。
mi上で、
overflow: hidden;
zoom: 1;

の部分がプロパティとして認識されていないのか、色が変わっていませんでした。
しかし、添付のサンプルも同様でしたが、きちんとカラムが左右に表示されています。

index.htmlの幅なども900pxになっていたのですが、
このような自分で原因を究明できない時の方法も会わせて教えていただけると参考になります。

よろしくお願いします。

狩野 祐東 Staff answered 4年 ago

あやこさん、こんにちは。
CSSを見るかぎり、2コラムにならないのは、おそらく、

.menu_left{
float: left;
width: 280;
margin-right: 20px;
}

の「width」に単位(px)がついていないからだと思います。単位をつけてもう一度試してみて、それでもだめならほかに原因があるかもしれません。

「CSSがうまく働かない」「HTMLが正しく表示されない」ときは、いろいろ原因を考えるよりもまず、書いたHTMLやCSSが「文法的に正しいか」どうかをチェックしてみます。

HTMLをチェックするなら:
https://validator.w3.org
(英語でびっくりするかもしれませんが、HTMLの間違いをチェックするだけならだいたいわかると思います)

CSSをチェックするなら:
http://jigsaw.w3.org/css-validator/

====
miでoverflowzoomがハイライトされないのは、それらの語がmiの設定ファイルに登録されていないからです。miの設定ファイルを編集すればそれらの語もハイライトするようになりますが、そもそもCSS自体の問題ではありませんので、あまり気にしなくてもよいと思います。

answered 4年 ago

ご返答ありがとうございます。
思い込みで、確認しているとダメ出すね><

こんな時に、相談できる場を設けていただけると、
やはりお金をかけてテキストを購入した甲斐があったなと思います。

またつまづくことがあれば、参考のサイトを利用させていただきます。

ありがとうございました。