More than 5 years have passed since last update.

[CSS] ボックスをわかりやすく

Last updated at 2017-06-22Posted at 2017-06-21

CSSは要素のボックスに対してスタイルを適用する

こんなHTMLに

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="wrapper">
    <div class="header">
        <p>ヘッダー</p>
    </div>
    <div class="sidebar">
        <ul>
            <li>メニュー1</li>
            <li>メニュー2</li>
            <li>メニュー3</li>
            <li>メニュー4</li>
        </ul>
    </div>
    <div class="content">
        <p>本文</p>
    </div>
    <div class="footer">
        <p>フッター</p>
    </div>
</div>
</body>
</html>

下記のCSSを適用する。

* { outline: 1px solid #FF0000; }

ボックスが視覚的にわかる。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up