ログイン

問題4 ドットボーダーをつけよう

HTML_CSSの問題

HTML_CSS

ボーダーとは、ボーダー柄のことではなく要素の枠線のことです。 CSSでは様々な種類の枠線を引くことができるよ。今回はドットボーダーに挑戦しましょう!

ドットボーダーをつけよう

問題

題名通り文字列の下線にドットのボーダーをつけてください。
ボーダーの太さは2pxでお願いします。色は、#0e6edfを指定してください。

また、文字列とボーダーの間に8pxの隙間を空けてください。
HTMLコードを記述し「テキストにドットのボーダーをつけます。」この文字列に適用してみましょう。

自分の環境に書くコード

              <p>テキストにドットのボーダーをつけます。</p>
¥HTML¥
            

期待する画面

コードのアイコン

解答ソースコード

              <p>テキストにドットのボーダーをつけます。</p>
¥HTML¥
            
              p {
    display: inline;
    padding-bottom: 8px;
    border-bottom: 2px dotted #0e6edf;
}
¥CSS¥
            
答えのアイコン

解説

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は実務でも頻繁にしようするプロパティなので、しっかり使いこなせるようになっておきましょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!