HTML_CSS
Googleでログイン
問題4：ドットボーダーをつけよう
題名通り文字列の下線にドットのボーダーをつけてください。
ボーダーの太さは2pxでお願いします。色は、#0e6edfを指定してください。
また、文字列とボーダーの間に8pxの隙間を空けてください。
HTMLコードを記述し「テキストにドットのボーダーをつけます。」この文字列に適用してみましょう。
ボーダーの太さは2pxでお願いします。色は、#0e6edfを指定してください。
また、文字列とボーダーの間に8pxの隙間を空けてください。
HTMLコードを記述し「テキストにドットのボーダーをつけます。」この文字列に適用してみましょう。
あらかじめエディタに書くコード
<p>テキストにドットのボーダーをつけます。</p>
¥HTML¥
期待する画面
解答ソースコード
<p>テキストにドットのボーダーをつけます。</p>
¥HTML¥
p {
display: inline;
padding-bottom: 8px;
border-bottom: 2px dotted #0e6edf;
}
¥CSS¥
補足
ボーダーを指定する場合は、線を引きたい方向に合わせて以下のようにプロパティを設定します。
・要素の上に線を引きたい場合:border-top
・要素の右に線を引きたい場合:border-right
・要素の下に線を引きたい場合:border-bottom
・要素の左に線を引きたい場合:border-left
全ての方向に線を引く場合(ボタン等)は方向を指定せずにborder単体で使用します。
borderは実務でも頻繁にしようするプロパティなので、しっかり使いこなせるようになっておきましょう。
・要素の上に線を引きたい場合:border-top
・要素の右に線を引きたい場合:border-right
・要素の下に線を引きたい場合:border-bottom
・要素の左に線を引きたい場合:border-left
全ての方向に線を引く場合(ボタン等)は方向を指定せずにborder単体で使用します。
borderは実務でも頻繁にしようするプロパティなので、しっかり使いこなせるようになっておきましょう。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
線の種類は、一本線のsolid/ドットのdotted/二重線のdoubleなどがあります。
またpタグはブロック要素の為、文字だけにborderを適用させたい場合は、displayをinlineかinline-blockに指定しましょう。
文字から近いボックスモデルは、padding → border → marginの為、文字とborderの間に間隔を空けたい場合はpaddingを使用しましょう。