ログイン
問題4

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

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

アイコン画像

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

題名通り文字列の下線にドットのボーダーをつけてください。
ボーダーの太さは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」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる