border余白外回りの枠線


前ページの余白を付けた情報を枠線で囲んでみましょう。

borderで情報を囲む

前ページの余白を付けた情報を枠線で囲んでみましょう。

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

太さ1pxの枠線で囲みました。

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

htmlソースは前ページと同じです。

htmlソース

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

枠線で囲んだスタイルソース

cssソース

/*====参考====*/
.sample_1 {
    width: 50%;
    background: #fecfd8;
    text-align: left;
    border: solid 1px #000;   /*この1行を追加しました。*/
    padding: 20px;
    margin: 0 auto; 
}

枠の角を丸くすることができます。

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

cssソース

/*====参考====*/
.sample_1 {
    width: 50%;
    background: #fecfd8;
    text-align: left;
    border: solid 1px #000;
    border-radius: 7px;   /*この1行を追加しました。*/
    padding: 20px;
    margin: 0 auto; 
}

borderの位置

borderの太さ1pxと10pxを並べてみます。
borderの位置に注目します。

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

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

ボーダーは余白の外に表示される。

width、heightの内側にborderを表示するbox-sizingプロパティ


width、heightの外回り、paddingの外回りではなく、width、heightの内回りにborderを表示できます。

余白の外回りにborderを表示

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

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

box-sizingプロパティで
width, heightの内側にborderを表示

cssソース

/*====参考====*/
.sample_1 {
    width: 50%;
    background: #fecfd8;
    text-align: left;
    border: solid 1px #000;
    box-sizing: border-box;    /*この1行を追加*/
    padding: 20px;
    margin: 0 auto; 
} 

上は、width幅のコンテンツ+余白の外回りにborderを表示。
下は、width幅の内側にborder+余白+コンテンツ。

borderの書き方

border: 線の種類 線の太さ 線の色;
borderプロパティの値は線の種類、線の太さ、線の色を半角スペースを空けて指定します。
値を書く順は決まっていません。

  1. 線の種類
  2. 線の太さ
  3. 線の色

順に見ていきましょう。

線の種類

borderで使われる線の種類は何通りかあります。
見やすくするため線の太さを6pxにしています。

solid

doubleは線が2本と間隔が必要なので、2px以下では実線になります。

double
dashed
dotted
groove
ridge
inset
outset

線の太さ、色

太さの指定はpxが無難であろうと思います。
色については、直接カラー名、あるいは16進数表示がよろしいと思います。

プラス1本のボーダー

borderの外にもう1本borderを入れることができます。

borderの外にborder

htmlソース

<!--====参考====-->
<div class="sample_2">
    <p>上の要素</p>
</div>
<div class="sample_3">
    <p>borderの外にborder</p>
</div>

スタイルソース

/*====参考====*/
.sample_2 {
    width: 100%;
    height: 50px;
    background: yellow;
    margin-bottom: 20px;
}

.sample_3 {
    display: block;
    padding: 10px;
    border: solid 2px pink;
    margin-top: 20px;
    /*下の2行で外ボーダーを追加できます。*/
    outline: solid 3px yellowgreen;
    outline-offset: 3px;
}

.sample_3 p {
    text-align: left;
}

次はmargin枠線と表示領域の間隔

  1. width、heightコンテンツ部
  2. paddingコンテンツ周りの余白
  3. border余白外回りの枠線
  4. margin枠線と表示領域の間隔