ショートハンドについて

2024.02.16

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

目次

手順
回答例
作成したコード

手順

HTMLとCSSを準備する。
HTMLに、divタグで適当な文字を書く。
CSSでdivタグの背景の色を赤に、5pxの実線で青の枠線を書く。
paddingで隙間を開ける。その際、値が1つ～4つの時の動きの違いに注意する。

回答例

作成したコード

HTML
<body>
    <div>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </div>
</body>

CSS
div {
    background-color: red;
    border: 5px solid blue;
    以下コメントアウト
    padding:上下左右;
    padding:上下 左右;
    padding:上 左右 下;
    padding:上 右 下 左;
    padding: 20px;
    padding: 20px 50px;
    padding: 10px 40px 80px;

    コメントアウトここまで
    padding: 10px 30px 60px 120px;
}