ボックスモデルを理解する

人気ブログランキング

※こちらの記事は、Visual Studio Codeがインストールされている事が前提で記述してあります。もしVisual Studio Codeがインストールされていない方は、こちらの記事を参考にしてください。

以下の図と同じように作る

手順

  1. HTMLとCSSを準備する。
  2. HTMLに、divタグで適当な文字を書く。
  3. CSSでdivタグの背景の色を赤に、5pxの実線で青の枠線を書く。
  4. CSSで、枠線の外に30pxの隙間を開ける。
  5. CSSで、枠線と文字の間に50pxの隙間を開ける。

回答例

作成したコード

HTML
<body>
    <div>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </div>
</body>
CSS
div {
    background-color: red;
    border: 5px solid blue;
    margin: 30px;
    padding: 50px;
}
Web講師によるWebサイト制作学習サイト、Free Learning