忍者CODE

ログイン

23
最低の幅を担保しよう

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
最低限の幅を担保してみましょう!
背景の黄色い要素の幅を適切に合わせてみてください

見本を参考にして実装してください。
自分の環境に書くコード
            <div>
    <div class="text">
        <span>この要素の長さと</span>
    </div>
    <div class="text">
        <span>この要素の長さを統一してみましょう!</span>
    </div>
</div>
¥HTML¥
          
            .text {
    margin-bottom: 16px;
}
.text > span {
    background-color: yellow;
    display: inline-block;
}
¥CSS¥
          
期待する画面
ログインして解答を見る
コードのアイコン

解答ソースコード

            <div>
  <div class="text">
    <span>この要素の長さと</span>
  </div>
  <div class="text">
    <span>この要素の長さを統一してみましょう!</span>
  </div>
</div>
¥HTML¥
          
            .text {
    margin-bottom: 16px;
}
.text > span {
    background-color: yellow;
    display: inline-block;
    min-width: 300px;
}
¥CSS¥
          
答えのアイコン

解説

文字の最低幅を担保する為には
min-width:というのを付与してあげます。

最低Npxは、担保するよというものになります。
逆にmax-widthは、最大の値の頭打ちを決めるプロパティになります。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

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

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

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