HTMLとCSSでレイアウトを調整する基本
めっちゃ基本なんですが、ずっと理解せずにやってきました。どのHTML講義でも最初に、「ブロック要素」と「インライン要素」が紹介されているのですが、覚えるというか、こういう２種類があり、ブロック要素は、縦に並び、インライン要素は、横並びに表示されるということを理解しておいてください。
ブロック要素を横並びに表示する
ブロック要素は、縦並び。インライン要素は、横並び。ブロック要素に、CSSでインラインブロックと指定すると、横並びに表示されます。
<body>
<div class="parent">
<div class="child1">こども１</div>
<div class="child2">こども２</div>
<div class="child3">こども３</div>
<div class="child4">こども４</div>
</div>
</body>
divはブロック要素ですが、横並びに表示されるようになりました。
class名に空白を使うと便利に使える
class名にchild2 とかchild3とつけて、CSSを適用していきました。こうすると、childすべてに display: inline; と指定する必要がありましたが、クラス名をchild ＋ a（文字から始まる）などにすると、childで４つともにcssを適用するとこができます。
個別の設定は、クラス名の指定の仕方である . を使ってつなげて指定します。 .child.a という感じです。
<div class="parent">
<div class="child a">こども１</div>
<div class="child b">こども２</div>
<div class="child c">こども３</div>
<div class="child d">こども４</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;
}
コメント