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

borderプロパティの概要

<span style="border: solid 2px #ff0000;">span要素について枠線を表示</span>

値

border : スタイル 太さ 色

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

スタイル

none

borderを表示しない

<span style="border: none 4px #ff0000;">borderを表示しない</span>

hidden

noneと同じであるが、重なる場合にこちらが優先

<span style="border: hidden 4px #ff0000;">noneと同じであるが、重なる場合にこちらが優先</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を消すにはnoneを指定したり、0pxを指定する方法がある。しかし、この方法ではデザインが元々のborder分ズレてしまう問題が起こります。そのため、以下のようにborderの色を透過させ、borderがあるにも関わらず表示させないという方法をとります。##ff0000だけでは赤ですが、##ff000000と、00を追加することで100%透過させます。

<span style="border: solid 4px #ff000000;">borderを表示しない</span>

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;
}