ホームページ作成でcssを用いて横並びのブロックを作成する方法 「初心者用」
はじめに
ホームページ作成で横並びのカラムの記述方法を初心者でもわかるようにまとめてみました。
横並びのカラムは使用頻度が高く簡単に思われがちですが、ブロックの間に隙間が空いてしまったり
他にもいろんな横並びの方法が存在していて、初心者にはなかなかとっつきにくいと思います。
初心者の私があとで見直すためのメモとして残しているものです。
よかったら参考にしてみてください。コピペするだけで再現できるように全てのコードを省かず載せています。
目標は下の画像です。
まずはhtml
htmlは下記のように親要素wrapperと子要素wrapper-sub A、wrapper-sub Bで構成されています。
最初の！DOCTYPE〜bodyまでは挿入コードで基本みんな同じになります。
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>###</title><linkrel="stylesheet"href="###"></head><body><divclass="wrapper"><divclass="wrapper-sub A"></div><divclass="wrapper-sub B"></div></div></body></html>次はcss
index.css
.wrapper{width:100%;font-size:0px;height:300px;}.wrapper-sub{width:calc(100%/2);font-size:16px;height:100%;display:inline-block;}.A{background-color:red;}.B{background-color:blue;}cssは左側と右側の要素の色を赤と青に設定します。
ここで重要なのは親要素に（.wrapperで）font-size:0;を指定することです。
font-size:0;を行わないと下記画像のように横に並ばずに上下に並んでしまいます。
子要素の間には隙間があります。この隙間を考慮すると、全体のちょうど半分のサイズにならずに下に回り込んでしまいます。
そこでこの隙間をなくすためにfont-size:0を使用します。