どこかのhtmlの講師

CSSでブラウザの『真ん中に寄せる（横方向）』

margin: 0 auto; と書くとボックスが『（横方向）真ん中に寄る』ということはそんなの常識でしょ？と思うかもしれませんが、何故こう書くと真ん中に寄るのかの理由を考えたことがある人は意外と少ないのではないかと思います。今回は何故左右のmarginにauto（自動）を入れると真ん中に配置されるのかを解説してみたいと思います。先生！margin: 0 auto;と書いたのに真ん中に寄りません！！という人がたまに、そこそこ、いらっしゃるのですが、もうこれは100%と言っ

floatの大前提を紐解こうと思う

普段htmlを教えていて、floatでつまずく人が後を絶たないんですけれども、まず大前提として、floatは『ボックスを横に並べるためのプロパティ』ではありません。大事なことなのでもう一度言いますがfloatはボックスを横に並べるためのプロパティじゃありません、ないです、これはもう絶対。教える人の中にも時々勘違いしてる人がいるんじゃないかなと思います。（過去にクリエイターを集めたグループ的なものに入っていたことがあるんですが、ブログを書こうっていうことになって、その時にと

どこかのhtmlの講師

4年前

3
floatを使用してボックス配置

ブロック要素を横並びにする方法の一つとして、floatプロパティを使う方法があります。 floatプロパティについては『わかりにくい！』という感想を持つ方が多いのですが、使いこなすことができるように何回かに分けて解説していきたいと思います。今回は第一回、floatの基本的な部分と回り込みの解除です。 floatプロパティでボックスを横並びにできます<div>divは</div><div>block要素</div><div>普通は縦並び</div> 上のようなhtmlがあ

どこかのhtmlの講師

5年前

3
ボックスにheightを設定したくない話

ボックスにheightを設定したくない理由htmlの場合は、コンテンツ内のテキストの内容が納品後に変更になってテキスト量が「増えたり」「減ったり」しても、レイアウトを損なわないようにしないといけません。下の例は、高さを150px固定で作成し、テキスト量が増えてテキストがはみ出て下のボックスに重なってしまった例です。 overflow: hidden; を設定している場合、テキストが隠れてしまいテキストが全部読めなくなってしまいます。ボックスにheightを設定しなけ

どこかのhtmlの講師

5年前

3