マガジンのカバー画像

Web制作_HTML/CSS

4
運営しているクリエイター

記事一覧

レスポンシブにしたときに左右に余計な隙間ができる、というか飛び出ちゃう時

CSSでは残念なことに、親要素でサイズを指定しても、子要素の大きさがはみ出るほど大きければ、全体のサイズははみ出てしまう。

親要素で600pxに指定しても、子要素が何らかの理由で右に30pxはみ出していれば、全体長さは630pxになってしまうということ。
親要素でいくらmarginを0にしようが、paddingを0にしようが関係ない。子要素が少しでもはみ出してしまえば無駄になる。

だから、全て

もっとみる

brで改行すると謎のスペースができてしまう件【HTML/CSS】

*この記事は公開していても、自分用メモです。

<br>はインライン要素なのが理由で、改行すると隙間ができてしまうらしい。

例えば、

<div>一行目の文章</div><br><div>二行目の文章</div>

としたときに、divタグにfont-sizeを指定すると、
二つのdivの間に自動的にスペースができてしまう。

これを解消するには、brの親要素でfont-sizeをゼロにする。

もっとみる

spanタグはブロック要素にしない【html_css】

*この記事は公開していてても自分用です。

spanタグはインライン要素なので、サイズを変更したりできないが、
cssのdisplay: block; でブロック要素にすることができる。

しかし、なるべくそうしたくない。なぜなら、おかしくなるからだ。

spanタグをブロック要素にすると、幅や高さを調整することができる。
しかし、なぜか中の文章が上にずれたりするときがある。

例えば、フォント

もっとみる

レスポンシブデザインのやり方

ページを最後まで作ってからやろうとすると、どういうCSSにしたか忘れているので大変だから、ゾーンごとにレスポンシブに対応させながらやった方がいいかもしれない。

つまり、レスポンシブにしながら作っていくということ。