プログラミング入門 CSSを微調整したいときのテクニック

2020年8月16日

例えば以下のようなHTML/CSSがあり、topとleftを使って黄色の四角をいい感じの位置に移動させたいとします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="008.css">
    <title>absolute test</title>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

.parent {
    position: relative;
    width: 200px;
    height: 200px;
    background: lightcoral;
}
.child {
    position: absolute;
    top: 20px;
    left: 35px;
    width: 20px;
    height: 20px;
    background: lightyellow;
}

何度も微調整する場合、CSSを変更し、ブラウザを再リロードし、確認する、という作業が面倒な時があります。

そのような時は、ブラウザ上で直接CSSを変更しましょう。

ChromeやFireFoxの場合、F12キーを押すと開発ツールが起動するのはご存知だと思います。

そこで、微調整したいHTML要素を選択した状態にして、Styleのタブをみます。