【CSS】divタグとborderで枠線を表示する

HTMLでborderを使い枠線を表示する方法について紹介します。

※WordPressを使用する場合、CSSは「ダッシュボード」-「外観」-「カスタマイズ」-「追加CSS」に記載します。

borderでシンプルな枠線を表示

まずはdivタグを使用してシンプルに実線2px(黒色)、幅200px、高さ30px、中央寄せで枠線を作りました。

のんびりSEのメモ帳
.simple-box1 {
    border: 2px solid #000000 ; /* 太さ2px、実践、黒色*/
    width: 200px ; /* 幅200px*/
    height: 30px ; /* 高さ30px */
    text-align: center ; /* 中央寄せ */
}
<div class="simple-box1">のんびりSEのメモ帳</div>

余白、線の太さについて

border、margin、paddingの関係は以下の図です。

  1. borderでは線の太さ、線の種類、線の色を指定します。

    線の太さ、線の種類、線の色の順番に指定はありません。
    線の種類を紹介します。solid以外にもたくさんあります。

    none なし
    solid 実線
    double 二重線
    dotted 点線
    dashed 破線
    groove 谷型
    ridge 山型
    inset 左と上が濃い
    outset 右と下が濃い
    hidden 非表示
  2. marginは線の外側の余白を指定します。
    marginの指定方法は色々なパターンがあり以下の様になっています。

    解説
    margin margin 10px 上下左右、すべて同じ余白を指定する。
    margin margin 10px 5px 20px 5px 上下左右、それぞれ違う余白を指定する。
    margin-top margin-top 10px 上の余白を指定する。
    margin-bottom margin-bottom 10px 下の余白を指定する。
    margin-left margin-left 10px 左の余白を指定する。
    margin-right margin-right 10px 右の余白を指定する。
  3. paddingは線の内側の余白を指定します。
    paddingの指定方法は色々なパターンがあり以下の様になっています。

    解説
    padding padding10px 上下左右、すべて同じ余白を指定する。
    padding padding10px 5px 20px 5px 上下左右、それぞれ違う余白を指定する。
    padding-top padding-top 10px 上の余白を指定する。
    padding-bottom padding-bottom 10px 下の余白を指定する。
    padding-left padding-left 10px 左の余白を指定する。
    padding-right padding-right 10px 右の余白を指定する。

 

タイトルとURLをコピーしました