border 枠線の表示 コピペで使えるHTML+CSS

スポンサーリンク

borderプロパティの概要

枠線CSS
border
目的要素について、枠線を表示する
使用全て
関連border-radius
初期border : none medium current-color
span要素について枠線を表示
<span style="border: solid 2px #ff0000;">span要素について枠線を表示</span>

border : スタイル 太さ 色

未指定の場合、初期値である橙色の値が選択される

ここにspan要素など
margin
border
padding

スタイル

none
borderを表示しない
<span style="border: none 4px #ff0000;">borderを表示しない</span>
hidden
noneと同じであるが、重なる場合にこちらが優先
<span style="border: hidden 4px #ff0000;"&gtnoneと同じであるが、重なる場合にこちらが優先</span>
solid
1本の線にする
<span style="border: solid 4px #ff0000;">1本の線にする</span>
dotted
点線にする
<span style="border: dotted 4px #ff0000;">点線にする</span>
dashed
破線にする
<span style="border: dashed 4px #ff0000;">破線にする</span>
double
2本の線にする
<span style="border: double 4px #ff0000;">2本の線にする</span>
groove
立体的な線にする①
<span style="border: groove 4px #ff0000;">立体的な線にする①</span>
ridge
立体的な線にする②
<span style="border: ridge 4px #ff0000;">立体的な線にする②</span>
inset
立体的な線にする③
<span style="border: inset 4px #ff0000;">立体的な線にする③</span>
outset
立体的な線にする④
<span style="border: outset 4px #ff0000;">立体的な線にする④</span>

太さ

4px
4pxの太さにする
<span style="border: solid 4px #ff0000;">4pxの太さにする</span>
thin
細い線にする
<span style="border: solid thin #ff0000;">細い線にする</span>
medium
通常の線にする
<span style="border: solid medium #ff0000;">通常の線にする</span>
thick
太いの線にする
<span style="border: solid thick #ff0000;">太いの線にする</span>

無指定
current-color 現在の色
<span style="border: solid 4px;">current-color 現在の色</span>
#ff0000
4pxの赤い線
<span style="border: solid 4px #ff0000;">4pxの赤い線</span>
#0000ff
4pxの青い線
<span style="border: solid 4px #0000ff;">4pxの青い線</span>

4辺別々のborderを指定する

span要素について4つの枠線を別々の種類で表示

style属性で記述
<span style="border-top: solid 4px #ff0000; border-bottom: dashed 4px #ff0000; border-right: double 4px #ff0000; border-left: dotted 4px #ff0000;">span要素について4つの枠線を別々の種類で表示</span>
スタイルシートで記述
<span class="border-style-rect">span要素について枠線を表示</span>
border-style-rect{
  border-top: solid 4px #ff0000; 
  border-bottom: dashed 4px #ff0000; 
  border-right: double 4px #ff0000; 
  border-left: dotted 4px #ff0000;
}

borderの高さを変えたい

border自体の高さを変更することはできません。この場合は、::beforeセレクターを活用して実現します。position:absoluteで重ねて表示することも不可能ではありませんが、レイアウトが込み入ってしまうためおすすめはできません。当サイトの見出しも、::beforeを使用しています。例えば、この[beforeの高さを変えたい]の見出しのスタイルシートは以下のようになっています。

.article h2:first-letter{ /* borderの先頭のbの文字を大きくします。*/
  font-size:30px;
  font-weight: bold;
}
.article h2::before {
  position: absolute;
  margin:0px;
  margin-left:5px;
  margin-bottom:14px;
  bottom: 0px;
  left: 0px;
  display: block;
  height: 12px;
  content: '';
  border-left: 5px solid #67b44a; /* Borderのbの左に表示します */
}
.article h2 {
  position: relative;
  background: #ffffff;/*背景色*/
  margin:0px;
  margin-bottom:10px;
  border:0px;
  border-bottom: 2px solid #67b44a;/*下線ff4f4f*/
  border-top: 2px solid #67b44a;/*下線ff4f4f*/
  padding: 1px;/*文字周りの余白*/
  padding-left:20px;
  font-size:22px;
  font-weight:normal;
}
タイトルとURLをコピーしました