ホーム>コース別ガイド一覧>余白(マージン)を指定しましょう! マージンとパディングの違い<BACK NEXT>マージンをまとめて指定
個別のマージンの種類と使用例のページ内リンク
margin-top プロパティ / margin-bottom プロパティ / margin-left プロパティ / margin-right プロパティ / 使用例 / 使用例の表示 使用プロパティ セレクタ { margin-top: 長さ; }CSS一覧プロパティ辞典 … margin-top プロパティ margin-top プロパティを使うと、要素の上部のマージン(余白)を広げたり狭くしたりできます。値には長さ(「px」など)、パーセンテージ(「%」)、autoを指定できます。auto を値に指定すると、余白は「0」となります。 使用プロパティ セレクタ { margin-bottom: 縦方向の位置; }CSS一覧プロパティ辞典 … margin-bottom プロパティ margin-bottom プロパティを使うと、要素の下部のマージン(余白)を広げたり狭くしたりできます。値には長さ(「px」など)、パーセンテージ(「%」)、autoを指定できます。auto を値に指定すると、余白は「0」となります。 使用プロパティ セレクタ { margin-left: 縦方向の位置; }CSS一覧プロパティ辞典 … margin-left プロパティ margin-left プロパティを使うと、要素の左側のマージン(余白)を広げたり狭くしたりできます。値には長さ(「px」など)、パーセンテージ(「%」)、autoを指定できます。auto を値に指定すると、余白は右側の余白と要素の幅により自動的に決まります。 使用プロパティ セレクタ { margin-right: 縦方向の位置; }CSS一覧プロパティ辞典 … margin-right プロパティ margin-right プロパティを使うと、要素の右側のマージン(余白)を広げたり狭くしたりできます。値には長さ(「px」など)、パーセンテージ(「%」)、autoを指定できます。auto を値に指定すると、余白は左側の余白と要素の幅により自動的に決まります。 マージンのMEMOブロック要素(表など)を中央に配置!margin-left プロパティと margin-right プロパティの値を「auto」にすると、表のような幅の決まっているブロック要素を中央揃えにすることができます。 ブロック要素(表など)を右に配置!margin-left プロパティの値を「auto」にすると、表のような幅の決まっているブロック要素を右揃えや左揃えにすることができます。例えば margin-left プロパティの値を「auto」、margin-rightプロパティの値を「3em」に指定すると、右の余白は3文字分の余白で、左の余白は自動的に指定されます。 もともと余白が取られている要素の余白をなくすには?h1 要素や p 要素などのようにもともと余白が取られている要素の余白をなくすには、上下の(マージン)余白を指定できるmargin-top プロパティとmargin-bottom プロパティの値を「0」に設定します。 負の値を指定できますマージンの幅を狭くしたい場合や画像を重ねたい場合はマイナスの値で指定します。 使用例margin-top プロパティ、margin-left プロパティを使用し、h1 要素の上側と p 要素の左側に余白を入れてみましょう!
使用例の表示
このように h1 要素の上側に1文字分の余白を取り(h1 { margin-top: 1em})、p 要素の左側に1文字分の余白を取りました(p { margon-left: 1em;})。マージンの指定は慣れればそれほど難しくないので、いろいろ試してみましょう! マージンとパディングの違い<BACK <TOP> <コース目次> NEXT>マージンをまとめて指定
|
ゼロから始めよう!わかりやすい!ホームページ作成ガイド
|