読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

文字の囲みと表の枠線

CSS

文字の囲み

  • 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》

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


《style.css

body {
	font-size: 16px;
}
.border1, .border2, .border3, .border4, .border5, .border6 {
	margin: 12px 0;
	padding: 12px;
}	
.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】
ラグビーで、スクラムなどを故意に崩すこと。反則となり、相手にペナルティーキックが与えられる。