忍者CODE

ログイン

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

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
題名通り文字列の下線にドットのボーダーをつけてみよう。
ボーダーの太さは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を使用しましょう。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET