《CSS》基本のレイアウト

こんにちは、「なゆた」です！

突然ですが、CSSの基礎について、
グラデーションだけでなく基本のレイアウトもまだ皆さんに教えていないことに気づきました。

ということで今回は、基本のレイアウトについてを書いていこうと思います！

ノーマル

まず、HTMLでdivタグを４回入れます。
なんで４回？それはこれから説明します。

次に、divタグにそれぞれ「first-child」「nth-child（番号）」を入れてCSSを作ります。
こうすれば、何個同じタグを作っても一つずつCSSを作れることができます。

すると、長い四角がきれいに並びました！

２カラム

それぞれのdivタグのCSSに、「float」や「min-height」などを設定します。
「float」は、「回り込み」という意味です。
「margin-left」で、左右の位置を自由に移動させることができます。

すると、２つ目と３つ目の四角が、１つ目と４つ目の間に横に並んでいます！
これが「２カラム」というんです！

３カラム

まず先に、HTMLのdivタグを１つ増やしましょう。

そしたら「２カラム」と同じように、
それぞれのdivタグのCSSに、「float」や「min-height」などを設定します。
「margin-right」で、左右の位置を自由に移動させることができます。

すると、２つ目・３つ目・４つ目の四角が、１つ目と５つ目の間に３つそろって並びました！
これが「２カラム」ならぬ「３カラム」です！

最後に

いかがでしたか？

皆さんもサイトの構成をする際は、ぜひこのレイアウトを参考にしてみてください！

以上です、ありがとうございました！