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の関係は以下の図です。
- borderでは線の太さ、線の種類、線の色を指定します。
線の太さ、線の種類、線の色の順番に指定はありません。
線の種類を紹介します。solid以外にもたくさんあります。none なし solid 実線 double 二重線 dotted 点線 dashed 破線 groove 谷型 ridge 山型 inset 左と上が濃い outset 右と下が濃い hidden 非表示 - 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 右の余白を指定する。 - 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 右の余白を指定する。
