HTMLやcssで画像やテキストなどを枠でかこむとするのでR

よく画像などを目立たせるために、枠でかこむことがあるのでR。

例えば、

を

のようにできるのでR。

いくつも方法があるのでRが、この方の記事とこの方の記事とが参考になるのでR。

なので、これは画像だけではなくテキストもいけるのでR。

テキスト

が

となるのでR。

具体的には、この方の記事のcssを使って、

.mybox{
    background: none;
    border: 1px solid #f3cbd0;
    margin: 15px 10px;
    padding: 20px;
    position: relative;
}
.mybox:before{
    background-color: #fff;
    content: 'TITLE';
    padding: 2px 10px;
    position: absolute;
    top: -10px;
    left: 30px;
    text-align: center;
}
.mybox:after{
    background: none;
    border: 1px solid #f3cbd0;
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 100%;
    height: 100%;
    z-index: -1;
}

などを、HTMLで記述するために、styleで挟んで、

<style>
.mybox{
    background: none;
    border: 1px solid #f3cbd0;
    margin: 15px 10px;
    padding: 20px;
    position: relative;
}
.mybox:before{
    background-color: #fff;
    content: 'TITLE';
    padding: 2px 10px;
    position: absolute;
    top: -10px;
    left: 30px;
    text-align: center;
}
.mybox:after{
    background: none;
    border: 1px solid #f3cbd0;
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 100%;
    height: 100%;
    z-index: -1;
}
</style>

として、画像やテキストのdivを

<div class="mybox">
<p align="center">画像なら画像のimgをここに記述</p>
</div>

<div class="mybox">
<p align="center">テキスト</p>
</div>

とすればよいのでR。すると、テキストなら

となるのでR。HTMLに直接styleでなくて、cssで記述する場合は、そのままcssファイル内に記述すればよいのでR。

（広告）月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
（広告）WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
（広告）年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─