html/cssを勉強していて気づいたこと
はじめにこの気づいたことは僕がHTML/CSSを勉強しているときにタグの本質、意味を知らずに使ってしまったときに詰まったことを集めたものです。タグの本質を知ることはより良いコードを書けることにつながるので今回このようなものをつくりました。
marginについて
marginを使う際に気をつけなければいけないのはブロックレベルの要素を扱うときである。
親要素がブロックレベルの要素で子要素もブロックレベルの要素だった場合、子要素にmargin-top,margin-bottomを使うとmarginの相殺が発動してしまい、子要素のみにmarginを使ったはずなのに親要素もmarginされているということに気づき自分の思い描いたレイアウトになっていない。 解決策として本、ネットで調べた答えは、親要素にpadding-top,padding-bottomを指定してあげる、もしくは親要素にborderを指定してあげることによって子要素のみがmarginできるようになる。marginの相殺は、親要素と子要素のmarginを分けられるようなborder,padding,インラインコンテンツなどが存在しないときに起こる。ただしこのmarginの相殺が起こるのは親も子もブロックレベルの要素の時、子要素１と子要素２がブロックレベルで子要素１にmargin-bottom、子要素２にmargin-topがかかっているときに発動する。しかし子がinline-block、floatがかかっていたら起こらないので注意が必要である。
以下にmarginの相殺の例を示すので見てみよう
- コード
//index.css
.parents {
width: 600px;
height: 600px;
background-color: red;
}
.child {
width: 400px;
height: 400px;
background-color: green;
margin-top: 50px;
}
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div class="parents">
<div class="child"></div>
</div>
</body>
</html>
- ブラウザ表示
これを見て分かるように子要素のchildにmargin-topを指定しているのに親要素parentsも一緒にmargin-topされていることが分かります。
この挙動を回避するには先ほどにも書いた通り、親要素にborder、padding-top、padding-bottomを指定すれば回避できます。
それではpaddingを指定したコードとブラウザ表示を見ていこう！
- コード
//index.css
.parents {
width: 600px;
height: 600px;
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
}
.child {
width: 400px;
height: 400px;
background-color: green;
margin-top: 50px;
}
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div class="parents">
<div class="child"></div>
</div>
</body>
</html>
- ブラウザ表示
ちゃんと子要素のmargin-topが効いていてparentsのtopからchildが50px分内側に働いているように見えます。これらの効果は先ほども書きましたが、子要素がインラインブロックのときにも表れるのできになる方は自分でコードを書いて見て調べてください。
displayプロバディについて
個人的にdisplayプロバディは絶対に知っておかなければいけないと思う。これを知っているか知っていないかでレイアウトの配置、CSSを理解できるスピードに差ができると思うからだ。それではこれからdisplayプロバディについて見ていこう！
- display-blockについて
display-blockはdiv,h1.h2.h3.h4,h5,h6,header.footer,pなど調べればたくさん出てくるブロック要素のことだ。そしてブロックレベルで知っておくべきことはブロックレベルの要素には改行が入りwidth,heightが指定でき、text-alineの効果は受けないということだ。
- display-inlineについて
display-inlineは改行が入らず、width,heightが指定できず文字の長さや太さで決まる。そしてpadding,marginも左右にしか効果はない。代表的なのはa,spanなどである。ちなみにtext-alineの効果は反映する。
- display-inline-blockについて
display-inline-blockは特殊で自分が知っている限りではimgタグがこれに該当する。これはブロックレベルでありながらインラインのように動くこともできる中間の存在である。改行が入らず、高さと幅を指定できmargin,paddingも自由に指定できる。ちなみにこれもtext-alineの効果は反映する。
text-alineについて
- 前提としてtext-alignはpタグやh1などの見出しタグ、divタグなどのブロック要素に指定するCSSですが、その効果はテキストなどのインライン要素にでます。
正直text-alineについてはこれを知っておけば大丈夫なはず
1. text-alignはブロック、インラインブロック要素に指定して、その中のインライン、インラインブロック要素に効く （ブロック要素には効かない）
2. 親要素（ブロック、インラインブロック）のtext-alignを子要素(ブロック、インラインブロック）は継承する（インラインは継承されない）
3. 子要素にtext-alignが指定されていれば親要素のものは継承されない
4. 文字列はおそらくインラインなのでブロックレベルであるp,h1,h2....などの中にあるテキストにもこの効果は反映される。
少し勉強して見て分かった事
自分は今回がqiita初投稿で、html/cssで自分が分からなくて調べたところを自分なりに解釈して理解したので間違っている部分もあるかもしれませんが間違っていたら優しく教えてください。