margin枠線と表示領域の間隔

前ページまでに、width、heightでコンテンツを書き、余白を付けてborderで囲んだ情報を作りました。

竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立念は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。

この情報をcontainerに配置してみましょう。
黒枠はbody、pink色はcontainerとします。

htmlソース

<!--====参考====-->
<body>
    <div id="container">
        <div class="sample_1">
            <p>竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立念は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。</p>
        </div>
    </div><!--container-->
</body>

スタイルソース
分かりやすくするためborderの太さを5pxにしました。

cssソース

/*====参考====*/
.sample_1 {
    width: 50%;
    background: #fecfd8;
    border: solid 5px #000;
    padding: 20px;
}

情報をcontainerに入れただけではcontainerの左に表示されます。
containerのどこに表示するか、それを決めるのがmarginです。表示領域を参照。

では、左からcontainerの幅10%の位置へ、上の情報から下へ20pxの位置へ配置してみましょう。

htmlソース

<!--====参考====-->
<body>
    <div id="container">
        <div class="sample_a">
            <p>上の要素</p>
        </div>
        <div class="sample_3">
            <p>竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立念は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。</p>
        </div>
    </div><!--container-->
</body>

スタイルソースは、

cssソース

/*====参考====*/
.sample_a {
    width: 100%;
    height: 50px;
    background: yellow;
}

.sample_a p,.sample_3 p {
    text-align: left;
}

.sample_3 {
    width: 50%; 
    background: #fecfd8; 
    padding: 20px; 
    border: solid 1px #000;
    /*下の2行を追加しました。*/
    margin-left: 10%;
    margin-top: 20px;
}

上の情報

この様にmarginを使ってレイアウトを決めることができます。

上の例ではmarginの左側だけを指定しましたが、右側も指定したい場合が今後必ずでてきます。
そんな時は右側がどれだけ空いているのか計算しなければなりません。

containerの幅100%から、margin-leftが10%、borderの太さ両側で10px、余白両側で40px、コンテンツの幅(width)50%を差し引いた値になります。

100%-10%-10px-40px-50%=いくら？
単位を合わせなければ計算できませんが、Calc関数を使えば一発解決します。

calc(100% – 10% – 10px – 40px – 50%)で計算できます。

margin-rightを合わせて指定する場合は、
margin-right: calc(100% – 10% – 10px – 40px – 50%);になります。

marginの書き方

marginの書き方には必要によっていろいろな指定の仕方があります。
指定の仕方によって適用が違ってきます。

margin: 20px;のように値が1個のとき
上、右、下、左の間隔が20px

margin: 20px 30px;のように値が2個のとき
上下の間隔が20px、右左の間隔が30px

margin: 20px 30px 40px;のように値が3個のとき
上の間隔が20px、右左の間隔が30px、下の間隔が40px

margin: 20px 30px 40px 50px;のように値が4個のとき
上の間隔が20px、右の間隔が30px、下の間隔が40px、左の間隔が50px

左右振り分け

margin: 0 auto;は上下が0、右左は自動的に振り分けされ、横幅の中央に配置されます。