超初心者でも分かるボックスの書き方

はじめに

ボックスの書き方

1. 普通、ボックスを作成する時は、HTMLファイルに、以下のようにタグを書きます。

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
    <span>ここにタイトル</span>
    <p>ここに文章</p>
</div>

2. すると、以下のような結果になります。
ここにタイトル

ここに文章

3. ここでは、「サルワカ」で、好みのボックスのデザインを選びましょう。
4. 以下の「CSS」を選択しました。

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

5. HTMLファイルは、以下のようにします。

<div class="box26">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>

6. これで、表示させてみましょう。下記の表示が出れば、成功です。

豆知識

• こうして、枠で囲むことで、文章を強調できるので、大事なところで使いましょう。
• 必要に応じて、「.box26 {……}」の最後の方に「width:300px;」を書き加えると、ボックスの幅が変わります。
• 今回の例で言うと、「.box26 .box-title {background: #FFF;}」は、本文の背景色を設定すべきでしょう。

引用サイト

• 「サルワカ」：ボックスのデザインを装飾する時に、とても頼りになるサイトです。

免責事項・著作権表示