【html･CSS】四角で囲む方法【囲み枠の調整】

デザインの基本中の基本「四角」。

四角で囲み、配置ができればサイトの大枠はできてきます。

もちろん細かいデザイン部分でも四角は超重要です。

四角で囲む方法やその幅、位置、枠線の調整方法について解説します。

四角で囲む方法

【基本】div

何かを四角で囲みたいとき基本的にはdivになるでしょう。そのほかにもhtmlタグはたくさんありますので、適切なものを使いましょう。

<style>
.example{
    padding: 10px;
    border: 1px solid #333;
    background: #f2f2f2;
}
</style>
<div class="example">divの四角い囲み枠</div>

【htmlだけ】table

htmlタグのtableだけでも四角い囲み枠を作ることができます。

tableの四角い囲み枠

<table border="1">
    <tr>
        <td>tableの四角い囲み枠</td>
    </tr>
</table>

CMSによってはhtmlやCSSを知らなくても簡単に実現できます。

また、上下中央寄せがカンタンに実現できることもメリットです。

ただし、tableは表（ひょう）として使うものです。逆に言うと表じゃなくレンタリングのためだけにtableを使うことは非推奨ですので苦し紛れの方法です。

【クリックできるようにする】aタグ

ボタンなどを作るために囲み枠にしたいならaタグを利用しましょう。

aタグを囲み枠にする場合「display: block」を指定する必要があります。

aタグの四角い囲み枠

<style>
.example2{
    /*コレ*/display: block;
    padding: 10px;
    border: 1px solid #333;
    background: #f2f2f2;
}
</style>
<a href="#" class="example2">aタグの四角い囲み枠</a>

幅の調整方法

widthを指定する

幅の指定には「width」を指定します。「width: 50%」を指定すると親の幅の半分の幅になります。

レスポンシブ対応する場合は%指定が有効です。

<style>
.example3{
    /*コレ*/width: 50%;
    border: 1px solid #333;
    background: #f2f2f2;
}
</style>
<div class="example3">divの四角い囲み枠</div>

paddingを指定する

枠線と中身の空白を作るには「padding」を指定します。

tableやdisplay:inline-blockなどの場合はwidthを指定せずpaddingと中身だけで幅を決めることもできます。

また高さも調整できます。

<style>
.example4{
    width: 50%;
    /*コレ*/padding: 30px 20px;
    /*コレ*/box-sizing: border-box;
    border: 1px solid #333;
    background: #f2f2f2;
}
</style>
<div class="example4">divの四角い囲み枠</div>

「width」と「padding」の右と左、さらに枠線の合計が幅になります。

「box-sizing: border-box」を指定すると「width」が「padding」と枠線を含めた幅になります。

枠線の調整方法

borderを指定

枠線を指定するには「border」を指定します。

「border:太さ 種類 色」を指定します。

<style>
.example5{
    /*コレ*/border: 5px solid #2f5fff;
    width: 50%;
    padding: 30px 20px;
    box-sizing: border-box;
    background: #f2f2f2;
}
</style>
<div class="example5">divの四角い囲み枠</div>

位置の調整方法

marginを指定

位置を調整するには「margin」を指定しましょう。

marginは要素の外側の空間を調整できるCSSです。

<style>
.example6{
    border: 1px solid #333;
    background: #e5eff7;
}
.example6>div{
    /*コレ*/margin: 30px 10px 20px auto;
    border: 5px solid #2f5fff;
    width: 50%;
    padding: 30px 20px;
    box-sizing: border-box;
    background: #f2f2f2;
}
</style>
<div class="example6">
    <div>divの四角い囲み枠</div>
</div>

positionを指定

位置調整は基本的にmarginで問題ありませんが、重ねたいだとか、marginでは難しいとき「position: absolute」で位置調整することも可能です。

position: absoluteは特定の位置から「右にいくら」「下へいくら」という形で位置を指定できます。

<style>
.example7{
    border: 1px solid #333;
    background: #e5eff7;
    height: 150px;
    position: relative;
}
.example7>div{
    /*コレ*/position: absolute;
    /*コレ*/left: 20%;
    /*コレ*/top: 10%;
    border: 5px solid #2f5fff;
    width: 50%;
    padding: 30px 20px;
    box-sizing: border-box;
    background: #f2f2f2;
}
</style>
<div class="example7">
    <div>divの四角い囲み枠</div>
</div>

【まとめ】四角で囲む方法

基本はdivで囲みましょう。tableでもカンタンにできますが非推奨です。クリックできるようにするならaタグで囲み「display:block」を指定しましょう。

widthで幅を指定しpaddingで空白を指定しましょう。

枠線はborderを指定しましょう。

位置はmarginを指定しましょう。marginでは実現が難しい場合はpositionを指定しましょう。

以上、CSSやhtmlの四角で囲む方法でした。