htmlの自分用覚え書き

.cssファイルで

.body{

font-family:フォント名;

}

でbody全体にフォント指定が及ぶ。

background-colorで背景色を指定しても、heightが0だと画面上で背景色の変化を観測することはできない。

heightで高さをつけてあげると、その分はきちんと背景色の変更が反映される。ブロック要素なら一行分色変更されるが、インライン要素もしくはインラインブロック要素の場合は、その要素の横幅分(widthの数値による)の背景色の変更がされる。

子要素がすべてfloatになっていると、親要素のブロック要素は高さが無いものとして扱われる。

floatが適用された要素の裏に他の要素が回り込んでしまって困る時は、回り込ませたくない要素にclear:left;やclear:right;のCSSを適用させることで、回り込みを防ぐことができる。

インライン要素では、

heightで高さを指定する事ができない。

ブロック要素は可能なので、

高さを指定したい場合はインライン要素のままではなく、必要に応じてインラインブロック要素に変更する必要がある。

インラインブロック要素の利点としては、横並びできる事が挙げられる。

ブロック要素の場合強制的に改行されるが、インラインブロック要素の場合は同じ行に横並びに要素を並べる事ができる。画像を横並びさせたい時などに便利。

インライン要素の場合は、

marginとpaddingを左右のみ指定できる。上下は不可。

line-heightを使用すると、行の真ん中に文章を配置する事ができる。

<ul>タグ(<liタグ>)はブロック要素なので、デフォルトでは縦に箇条書きされる。

横に並べたい場合は、インラインブロック要素に変更することで実現できる。

background-size:cover;で

幅いっぱいに背景画像を表示し、ブラウザのサイズを変化させると、左上を起点に背景画像のサイズが変更される。

左上が起点ではなく、背景画像の中央を起点にするには、

background-position 50% 50%;と指定すると、背景画像の中央座標を基準として伸縮が行われる。

ブロック要素にtext-align:center;を使っても中央揃えにはならない。