CSS タイトル付きボックスの作成

導入

こんな感じのタイトル付きボックスを作成していきます。

タイトル

ここに文章を記述する

ボックスの作成

まず最初は四角形を作成します。
borderの種類をmargin-topを設定しています。

<style>
    div.titleBox1 {
        background-color: moccasin;

        /*枠線*/
        border: dotted;
        border-color: orange;
        /*余白*/
        margin-top: 1.5em;
    }
</style>

<div class="titleBox1">
    <p>ここに文章を記述する</p>    
</div>

ここに文章を記述する

before

続いてタイトルを作成します。
ボックスに合わせて位置を設定する必要があるためpositionを

<style>
    div.titleBox1 {
        background-color: moccasin;

        /*枠線*/
        border: dotted;
        border-color: orange;

        /*余白*/
        margin-top: 1.5em;
    }

    span.titleBox1-title {
        background-color: orange;
        /*枠線について*/
        border: 3px solid black;
        border-radius: 0.4em;
        /*位置・大きさなど*/
        position: relative;
        top: -0.5em;
        left: 0.5em;
        height: 1.5em;
        padding: 0.25em;
        /*文字*/
        font-size: 1.5em;
    }
</style>

<div class="titleBox1">
    <span class="titleBox1-title">タイトル</span>
    <p>ここに文章を記述する</p>    
</div>

タイトル

ここに文章を記述する

完成したCSS

CSSファイルにまとめると次のようになります。

/*タイトル付きボックス*/
div.titleBox1 {
    background-color: moccasin;

    /*枠線*/
    border: dotted;
    border-color: orange;

    /*余白*/
    margin-top: 1.5em;
}

/*タイトル*/
span.titleBox1-title {
    background-color: orange;

    /*枠線について*/
    border: 3px solid black;
    border-radius: 0.4em;

    /*位置・大きさなど*/
    position: relative;
    top: -0.5em;
    left: 0.5em;
    height: 1.5em;
    padding: 0.25em;

    /*文字*/
    font-size: 1.5em;
}