文字の囲みと表の枠線

文字の囲み

  • borderプロパティの値を指定する

上下左右の枠線を個別に指定する
  • 「border」と記述することにより、上→右→下→左をショートハンドで記述したことになります


プロパティー意味
border-top要素の上の線
border-right要素の右の線
border-bottom要素の下の線
border-left要素の左の線

線の種類
  • double(二重線)は、3px以上が必要


キーワード形状
dotted点線で表示する
dashed破線で表示する
solid実線で表示する
double二重線で表示する
groove線が窪んで見えるような線で表示する
ridge線が突起して見えるような線で表示する
inset領域全体が窪んで見えるような線で表示する
outset領域全体が突起して見えるような線で表示する
none線をなしにする
hidden線の非表示

  • 文字と囲みとの空きは、paddingプロパティの値を指定する

《index.html》

<div class="container">
<p class="box border1">テキストの囲みを表現したい[標準]</p>
<p class="box border2">テキストの囲みを表現したい[線の太さ]</p>
<p class="box border3">テキストの囲みを表現したい[線のカラー]</p>
<p class="box border4">テキストの囲みを表現したい[線のスタイル]</p>
<p class="box border5">テキストの囲みを表現したい[複数の指定]</p>
<p class="box border6">テキストの囲みを表現したい[複数の指定]</p>
</div><!-- /.box -->


《style.css

html, body, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
body {
	font-size: 16px;
}
.container {
  width: 500px;
  margin: 50px auto;
}
.box {
	margin: 16px 0;
	padding: 16px;
}	
.border1 {
	border: 1px solid #666;
}
.border2 {
	border: 4px solid #666;
}
.border3 {
	border: 1px solid #F00;
}
.border4 {
	border: 1px dotted #666;
}
.border5 {
	border-top: 4px solid #296;
	border-right: 1px dotted #296;
	border-bottom: 1px dotted #296;
	border-left: 12px solid #296;
}
.border6 {
	border-top: 2px solid #296;
	border-bottom: 4px double #296;
	border-left: 1px solid #296;
}

表に枠線をつける

  • table要素に枠線を付ける場合は、borderプロパティを「table, th, td」要素それぞれに記述します
表に重ねた枠線をつける
  • table要素に対してborder-collapseプロパティの値を「collapse」と指定すると、重ねて表示されます
  • 初期値は「separate」

コラプシング【collapsing】

求職者支援訓練 フェリカテクニカルアカデミー