WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「罫線の設定」

border 「罫線の設定」

border プロパティは罫線に関する設定をまとめて行うことができます。

CSS Ver.適用要素継承
2.1全てしない
広告

border の値

【構文】

border : [style] [width] [color;
style [スタイルの指定] ( サンプル )
border: none;非表示(初期値、他と重なる罫線は他のスタイルを優先)
border: hidden;非表示(他と重なる罫線は他のスタイルより優先)
border: dotted;点線
border: dashed;破線
border: solid;1本線
border: double;2本線
border: groove;立体線(窪み)
border: ridge;立体線(隆起)
border: inset;囲み立体線(窪み)
border: outset;囲み立体線(隆起)
width [太さの指定] ( サンプル )
border: thin;細い
border: medium;標準
border: thick;太い
border: ~px;太さを数値で指定(ex. 1px、10px)
color [背景色の指定] ( サンプル )
border: #rrggbb;16進数RGB指定 [例] #00ffff、#660033 (色作成)
border: カラー名;カラー名指定 [例] red、bule (一覧)
border: rgb(r, g, b);10進数RGB指定 [例] rgb(0,255,255) (色作成)
border: rgba(r, g, b, a);透明度付きRGB指定 [例] rgba(0,255,255,0.5) (色作成)
※ CSS3の機能
border: hsl(h, l%, s%);HSL指定 [例] hsl(10,50%,90%) (色作成)
border: hsla(h, l%, s%, a);透明度付きHSL指定 [例] hsla(0,30%,25%,0.5) (色作成)
※ CSS3の機能
border: transparent;透明(無色)
ページTOP

border のサンプル

1.罫線のスタイルの指定

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>罫線のスタイル指定サンプル</title>
<style type="text/css">
<!--
  p.s1  { border: dotted; }   /* 点線 */
  p.s2  { border: dashed; }   /* 破線 */
  p.s3  { border: solid;  }   /* 1本線 */
  p.s4  { border: double; }   /* 2本線 */
  p.s5  { border: groove; }   /* 立体線(窪み) */
  p.s6  { border: ridge;  }   /* 立体線(隆起) */
  p.s7  { border: inset;  }   /* 囲み立体線(窪み) */
  p.s8  { border: outset; }   /* 囲み立体線(隆起) */
-->
</style>
</head>
<body>
<span style="font-size:12pt; " >罫線のスタイル指定サンプル</span>
<p class="s1">点線</p>
<p class="s2">破線</p>
<p class="s3">1本線</p>
<p class="s4">2本線</p>
<p class="s5">立体線(窪み)</p>
<p class="s6">立体線(隆起)</p>
<p class="s7">囲み立体線(窪み)</p>
<p class="s8">囲み立体線(隆起)</p>
</body>
</html>

2.罫線の太さ、色の指定サンプル

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>罫線の太さ、色の指定サンプル</title>
<style type="text/css">
<!--
  p.s1  { border: thin   #ff0000           solid; }  /* 細い線、赤 */
  p.s2  { border: medium red               solid; }  /* 標準線、赤 */
  p.s3  { border: thick  #800080           solid; }  /* 太い線、紫 */
  p.s4  { border: 1px    rgb(128,0,128)    solid; }  /* 1px   、紫 */
  p.s5  { border: 5px    #000000           solid; }  /* 5px   、黒 */
  p.s6  { border: 10px   rgba(0,255,0,0.5) solid; }  /* 10px  、緑半透明 */
-->
</style>
</head>
<body>
<span style="font-size:12pt; " >罫線の太さ、色の指定サンプル</span>
<p class="s1">細い線(thin)、赤</p>
<p class="s2">標準線(medium)、赤</p>
<p class="s3">太い線(thick)、紫</p>
<p class="s4">1px の線、紫</p>
<p class="s5">5px の線、黒</p>
<p class="s6">10pxの線、緑半透明</p>
</body>
</html>

3.罫線のスタイル、太さ、色の組合せ指定サンプル

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>罫線のスタイル、色、太さ組合せ指定サンプル</title>
<style type="text/css">
<!--
  td.s1 { border: medium #00ff00   groove; }
  td.s2 { border: medium #ff0000   ridge;  }
  td.s3 { border: thick  #0000ff   ridge;  }
  td.s4 { border: thick  #00ffff   inset;  }
  td.s5 { border: medium #ff00ff   outset; }
  td.s6 { border: thick  #ffff00   outset; }
-->
</style>
</head>
<body>
<span style="font-size:12pt; " >罫線のスタイル、色、太さの指定サンプル</span>
<br><br>
<table style="width:100%;">
  <tr><td class="s1">標準線、緑  、立体線(窪み)</td></tr>
  <tr><td class="s2">標準線、赤  、立体線(隆起)</td></tr>
  <tr><td class="s3">太い線、青  、立体線(隆起)</td></tr>
  <tr><td class="s4">太い線、水色 、囲み立体線(窪み)</td></tr>
  <tr><td class="s5">標準線、ピンク、囲み立体線(隆起)</td></tr>
  <tr><td class="s6">標準線、黄色 、囲み立体線(隆起)</td></tr>
  <tr>
</body>
</html>
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン