HTMLとCSSでレイアウトを調整する方法

こんにちは!縁紡ぐです。
この記事はHTMLやCSSの基礎を学んでいる方向けにお届けしています。ぜひ参考にしてみてください。

目次

HTMLとCSSでレイアウトを調整する基本

どのHTML講義でも最初に、「ブロック要素」と「インライン要素」が紹介されているのですが、覚えるというか、こういう2種類があり、ブロック要素は、縦に並び、インライン要素は、横並びに表示されるということを理解しておいてください。

ブロック要素を横並びに表示する

ブロック要素は、縦並び。インライン要素は、横並び。ブロック要素に、CSSでインラインブロックと指定すると、横並びに表示されます。

<body>
    <div class="parent">
        <div class="child1">こども1</div>
        <div class="child2">こども2</div>
        <div class="child3">こども3</div>
        <div class="child4">こども4</div>
    </div>
</body>

divはブロック要素ですが、横並びに表示されるようになりました。

class名に空白を使うと便利に使える

class名にchild2 とかchild3とつけて、CSSを適用していきました。こうすると、childすべてに display: inline; と指定する必要がありましたが、クラス名をchild + a(文字から始まる)などにすると、childで4つともにcssを適用するとこができます。

個別の設定は、クラス名の指定の仕方である . を使ってつなげて指定します。 .child.a という感じです。

    <div class="parent">
        <div class="child a">こども1</div>
        <div class="child b">こども2</div>
        <div class="child c">こども3</div>
        <div class="child d">こども4</div>
    </div>
.child {
    display: inline;
    margin: 0 auto;
}

.child.a {
    background-color: red;
}

.child.b {
    background-color: blue;
}

.child.c {
    background-color: green;
}

.child.d {
    background-color: yellow;
}

childそれぞれに対して、inline-blockを指定したのと同じように横並びに表示されるようになりました。

CSSで中央寄せにする text-align: center;

これもよく使うパターンですね。今回は、親で中央に表示してね!って指定することで、こどもが中央に表示されるようにしてみます。

先ほどの画面をもう少し表示倍率を下げてみてみましょう。

何も指定していない状態だと左寄せで表示されています。これを中央に表示するように変更してみましょう!

.parent {
    background-color: aquamarine;
    text-align: center;
}

.child {
    display: inline;
}

親に text-align: center と加えると中央に表示されるようになります。

CSSで右寄せにする text-align: right;

次に、右寄せで表示する場合の方法を確認してみましょう。

.parent {
    background-color: aquamarine;
    text-align: right;
}

.child {
    display: inline;
}

flex で横方向の場所を指定する方法

次は、flexで指定する方法を確認していきましょう!

.parent {
    background-color: aquamarine;
    display: flex;
    justify-content: center;
}

.child {
}

中央に表示されるようになりました。また、先ほどの text-align: center; と違って、要素と要素の間が空いていないこが違いですね。

左寄せ justify-content: start;

中央寄せ justify-content: center;

右寄せ justify-content: end;

flex で均等に表示させる space-around

均等に表示させる方法は、justify-content: space-around で指定することができます

.parent {
    background-color: aquamarine;
    display: flex;
    justify-content: space-around;
}

これで均等に表示させることができました。

flex でナビゲーションバーでよく使われる両端から均等に表示させる space-between

ナビゲーションバーなどでよく使われる、両端にスペースをない状態での均等に表示させる方法です。

.parent {
    background-color: aquamarine;
    display: flex;
    justify-content: space-between;
}
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次