問題
4ドットボーダーをつけよう
ボーダーとは、ボーダー柄のことではなく要素の枠線のことです。 CSSでは様々な種類の枠線を引くことができるよ。今回はドットボーダーに挑戦しましょう!
HTML/CSSの問題に挑戦しよう！
問題
「ドットボーダーをつけよう」
題名通り文字列の下線にドットのボーダーをつけてください。
ボーダーの太さは2pxでお願いします。色は、#0e6edfを指定してください。
また、文字列とボーダーの間に8pxの隙間を空けてください。
HTMLコードを記述し「テキストにドットのボーダーをつけます。」この文字列に適用してみましょう。
あらかじめエディタに書くコード
<p>テキストにドットのボーダーをつけます。</p>
¥HTML¥
期待する画面
解答と解説（ドットボーダーをつけよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
borderの指定は、:線の太さ 線の種類 色の種類;で指定してあげます。
線の種類は、一本線のsolid/ドットのdotted/二重線のdoubleなどがあります。
またpタグはブロック要素の為、文字だけにborderを適用させたい場合は、displayをinlineかinline-blockに指定しましょう。
文字から近いボックスモデルは、padding → border → marginの為、文字とborderの間に間隔を空けたい場合はpaddingを使用しましょう。
補足
ボーダーを指定する場合は、線を引きたい方向に合わせて以下のようにプロパティを設定します。
・要素の上に線を引きたい場合:border-top
・要素の右に線を引きたい場合:border-right
・要素の下に線を引きたい場合:border-bottom
・要素の左に線を引きたい場合:border-left
全ての方向に線を引く場合(ボタン等)は方向を指定せずにborder単体で使用します。
borderは実務でも頻繁にしようするプロパティなので、しっかり使いこなせるようになっておきましょう。
