CSSでデザインを整えていく時、なかなか重要なのがmarginとpaddingという空間を取るためのプロパティ。
どこで、どういう風に空間を取ったかが分からなくなると、後でなかなか大変な事になると思われます。今では、Chromeにも「要素の検証」なんて機能がついていて便利ではありますが、把握しておく方が絶対いい。ということで、marginとpaddingのお話。
CSSは、タグ名・id名・class名（どこ）のプロパティ（何）に値（どうするのか）を決めていきます。
marginとpaddingは、プロパティです。
CSSの前にHTMLを記述していきます。初めて、miというテキストエディタを使ってみました。CSSのファイルは、style.cssの名前で作って、これから作るHTMLファイルと同じフォルダに入れます。
注意！ 開始タグを記述したら、必ず終了タグを書く事！
1.<!DOCTYPE HTML>
2.<html lang="ja">
3.<head>
4.<title>marginとpadding</title>
5.<link href="style.css" rel="stylesheet" type="text/css" media="screen,tv">
6.</head>
7.<body>
8.<p id="test1">空間の取り方</p>
9.<p id="test2">空間の取り方</p>
10.<p id="test3">空間の取り方</p>
11.</body>
12.</html>
1行目：HTML5だよ
2行目：HTMLが始まり、言語は日本語だよ
3行目：headの部分はここから
4行目：今作っているファイルのタイトル
5行目：style.cssファイルとリンクしているよ
6行目：headはここまで
7行目：body（見える部分）はここから
8行目〜10行目：文字を入れています
11行目：bodyはここまで
12行目：HTMLはここまで
ここまで記述したら保存してブラウザで確認。ファイルをブラウザにドラッグすれば見られます。新しい記述をするたびにブラウザを更新して確認してくださいね〜。
pタグは文章を入れるためのタグ。同じ言葉が入ってますが、それぞれにidで名前を付けています。CSSファイルで、test1に色を付けてみます。
#test1 {
background: #f0f;
}
同じようにtest2とtest3にも色を入れてみます。
#test1 {
background: #f0f;
}
#test2 {
background: #ff0;
}
#test3 {
background: #0ff;
}
pタグは、ブロック要素なので、ブラウザの幅全部に色が入ります。
check!!
ここでブロック要素とインライン要素の違いを・・・・。｀
タグは、ブロック要素とインライン要素の二つに分かれます。ブロック要素は「改行を伴う要素」と言われています。・・・・改行を伴う・・なんて言われても分かりません！ が、慣れてくれば大丈夫！でも、今は、とにかく色を入れてみて、その行いっぱいに色が入るようならブロック要素と思っていれば問題ないと思います。
色の着いている行の上下左右に余白が取られています。これは、bodyタグやpタグがもともと持っている空白なので、無くしてしまいます。#test1より前に記述します。
body, p {
margin: 0;
padding: 0;
}
#test1 {
background: #f0f;
}
#test2 {
background: #ff0;
}
#test2 {
background: #0ff;
}
余白がなくなりました。ここから、自在にデザイン用の余白を作っていく訳ですが、marginとpaddingの取り方が分かりやすいようにtest2の部分を使います。
行全部に色はいらないので、幅を150px(width: 150px;)を決め、その中央(text-align: center;)に文字を置きます。test2の部分にだけ書き足します。
#test2 {
width: 150px;
text-align: center;
background: #ff0;
}
最後にmarginとpaddingです。
上の行と下の行との間が詰まっているのでそれぞれ10pxの空間を取り、行の中央に配置します。
付け足すのは、margin: 10px auto;です。最初の10pxは上下、autoは自動で真ん中に配置する場合に使います。（「大枠のワイヤーフレームを組む」のcheck！を参照してください。）
では、marginを書いたすぐ下にpadding: 10px 0;を記入して、ブラウザで確認しましょう。
#test2 {
margin: 10px auto;
padding: 10px 0;
width: 150px;
text-align: center;
background: #ff0;
}
こうなっていれば成功です。もし、成功していなかったら、id名、セミコロンやコロンが反対になっていないか要確認です。それと、HTMLとCSSの記述は、半角英数字でお願いします。
これが出来ると、marginは外側。paddingは内側と覚えれば使いやすいと思います。
—Comments—