【初心者向け】CSSが上手くなるちょっとしたポイント
はじめに
CSSの基本的な文法を学んで、いざWebサイトを作ろうとスタイリングするものの思った位置に要素を配置できないといった経験誰もがしてきていると思います。実際私もかなり苦戦していました。（なんなら今も苦戦してます。）しかし、いくつかのポイントを押さえることで、以前よりグッとスタイリングは上手くなりました。この記事ではそんなポイントを3つご紹介します。
対象者
- CSSの基本文法を学んだ方
- 思うようにスタイリングができない方
① margin/paddingはルールを作る
上の図のようなAとBの二つの要素の間に10pxの余白を取ることを考えます。様々やり方はありますが、大きく分けて下の二つがまず浮かぶのではないでしょうか。
マージンを上にとっても、下にとってもどちらでもいいのですが、これプロジェクトで統一することがポイントです。私がCSSを書き始めのころはマージンを上に取ったり、下に取ったりしていて非常にわかりずらいスタイリングになっていました。その後、なるべく下にマージンを取ると心がけたところ見やすくわかりやすいスタイリングになりました。あまり意識していなかった人は今日からなるべく下にマージンを取り、致し方ない時のみ上に取ってみてください。ちなみにこれはpaddingも同じです。
② containerで左右に適切な余白を取る
こちらはZennのトップページを別の画面幅で見たものです。どちらも赤い矢印で示したとおり左右に余白が取られています。大抵のWebサイトはコンテンツを画面幅と同じサイズにするのではなく、左右に余白を設けていると思います。
これを実現しているのがcontainerです。つまり見出しにあるcontainerとは「様々な画面幅で左右にいい感じに余白を取ってくれるやつ」なのです。
ヘッダーでcontainerを利用した場合のコードを載せておきます。
<header>
<div class="container">
<h1>SITE</h1>
</div>
</header>
<style>
header{
padding-block: 10px;
background-color: #eee;
width: 100%;
}
.container{
padding-inline: 15px;
}
@media(min-width: 700px){
.container{
width: 700px;
margin-inline: auto;
}
}
</style>
このコードでは、画面の横幅が700px以上（PC版）では、ヘッダーはそれ以上横に広がらず、左右に無限に余白を取ります。SP版では、左右の余白は元々取られている青い領域のpaddingのみとなります。
実際にはより幅広い画面でブレイクポイントを設ける必要があると思うので、こちらのコードをカスタマイズして使ってみてください。Tailwind CSSやBootstrapでは、containerクラスが用意されているので、今回のようにスタイルを用意する必要がないので非常に便利です。
③ Flexboxは横並びだけじゃない
最も代表的な使い方として、親要素にdisplay:flex;を指定し、小要素を横並びにすることです。
しかし、これだけではありません。上下中央揃えにも絶大な力を発揮します。
縦横100pxの箱の中心に「A」という文字を配置したい場合、以下のようにdisplay:flex;を使えば実現できます。
<div class="box">
A
</div>
<style>
.box{
width: 100px;
height: 100px;
display:flex;
justify-content: center;
align-items:center;
background-color: #CEE741;
}
</style>
まとめ
自分が思う初心者がCSS上達のポイント3点をまとめてみました。もし、他にもありましたら、コメントで教えていただけると嬉しいです。私も他にもポイントだと思っている点はいくつかあるので、また記事に書こうと思います。ここまで読んでいただきありがとうございました🙇
Discussion