CSSのよく使うやつ(画像は後日…)

2022年5月3日

参考

指定なし。

<div class="parent">
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
</div>
<style>
    .parent {
    }
    .child {
        margin: 10px;
    }
</style>

子要素を横並びにする。

<div class="parent">
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
</div>
<style>
    .parent {
        display: flex;
    }
    .child {
        margin: 10px;
    }
</style>

高さを中央にする。(その 1)
※ 縦中央揃えの記述である vertical-align は、inline要素かtable-cell要素にしか効かない。

<div class="parent">
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
</div>
<style>
    .parent {
        height: 200px;
        width: 200px;
        background-color: silver;
        display: table;        
    }
    .child {
        margin: 10px;
        display: table-cell;
        vertical-align: middle;
    }
</style>

さらに左右も中央揃えにしてみる。

<div class="parent">
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
</div>
<style>
    .parent {
        height: 200px;
        width: 200px;
        background-color: silver;
        display: table;
        text-align: center;
    }
    .child {
        margin: 10px;
        display: table-cell;
        vertical-align: middle;
    }
</style>

高さを中央にする。(その 2)

<div class="parent">
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
</div>
<style>
    .parent {
        height: 200px;
        width: 200px;
        background-color: silver;
        display: flex;
        align-items: center;
    }
    .child {
        margin: 10px;
    }
</style>

さらに左右も中央揃えにしてみる。

<div class="parent">
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
</div>
<style>
    .parent {
        height: 200px;
        width: 200px;
        background-color: silver;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .child {
        margin: 10px;
    }
</style>

通常子要素は親の要素の中にある。

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>
<style>
    .parent {
        margin: 50px;
        height: 200px;
        width: 200px;
        background-color: silver;
    }
    .child1 {
        height: 20px;
        width: 20px;
        background-color: blue;
    }
    .child2 {
        height: 20px;
        width: 20px;
        background-color: red;
    }
</style>

親要素を無視ししてウィンドウ基準でポジションを指定する。

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>
<style>
    .parent {
        margin: 50px;
        height: 200px;
        width: 200px;
        background-color: silver;
    }
    .child1 {
        height: 20px;
        width: 20px;
        background-color: blue;
    }
    .child2 {
        height: 20px;
        width: 20px;
        background-color: red;
        position: fixed;
        top: 10px;
        left: 10px;
    }
</style>

元のポジション基準で位置を指定する。

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>
<style>
    .parent {
        margin: 50px;
        height: 200px;
        width: 200px;
        background-color: silver;
    }
    .child1 {
        height: 20px;
        width: 20px;
        background-color: blue;
    }
    .child2 {
        height: 20px;
        width: 20px;
        background-color: red;
        position: relative;
        top: 10px;
        left: 10px;
    }
</style>

親要素基準で位置を指定する。

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>
<style>
    .parent {
        margin: 50px;
        height: 200px;
        width: 200px;
        background-color: silver;
        position: relative;
    }
    .child1 {
        height: 20px;
        width: 20px;
        background-color: blue;
    }
    .child2 {
        height: 20px;
        width: 20px;
        background-color: red;
        position: absolute;
        top: 10px;
        left: 10px;
    }
</style>

2022年5月3日