タイトル通り、今回はHTMLとCSSで要素を横並びにする方法についてまとめていこうと思います。
まず、要素にはブロック要素、インライン要素、インラインブロック要素があります。
それぞれの特徴は以下になります。
ブロック要素
特徴
- 要素が縦に並ぶ
- 幅と高さが指定できる
- marginとpaddingを使って余白を自由に調整できる
主な要素
- h1~h6要素
- p要素
- div要素
- table要素
インライン要素
特徴
- 要素が横に並ぶ
- 幅と高さは指定できない
- 上下の余白をmarginで調整できない
- 上下にpaddingは指定できるが、デザイン崩れの原因になるから避けるべき
主な要素
- a要素
- span要素
インラインブロック要素
インラインブロックは、ブロック要素とインライン要素の中間の性質を持つ表示形式で、**「要素は横並びにしたいけど、横幅や高さ、余白を調整したい」**という場面で利用する。
インラインブロック要素は、もともとある要素ではなく、インライン要素もしくは、ブロック要素のものをインラインブロック要素にしたい場合、display:inline-blockを指定することで変更する。
特徴
- 横に要素が並ぶ
- 幅と高さを指定できる
- marginとpaddingを使って余白を指定できる
まとめ
ブロック・インライン・インラインブロック要素の特徴違いまとめ
並び方の違い
改行の違い
要素を横並びにする方法
各要素の特徴や違いがわかったところで、今回のメインであるブロック要素を横並びにする方法について記載しようと思います。
floatを使った方法
各子要素にfloatを指定することで、要素を横並びにできます。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>
</body>
</html>
CSS
.box{
width:200px;
height:100px;
float:left;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.green{
background-color:green;
}
inline-blockを使った方法
前述した通り、block要素をinline-block要素に変更することで、横並びにできる
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>
</body>
</html>
CSS
.box{
width:200px;
height:100px;
display: inline-block;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.green{
background-color:green;
}
flexboxを使った方法
flexboxとは
CSS3の新機能を用いたレイアウト手法です。
flexboxは、flexコンテナ（親要素）とflexアイテム（子要素）で構成されており、flexコンテナ内にflexアイテムを横方向または縦方向に配置する仕組みとなっています。
そのため、親要素にflexboxを指定することで、子要素が横並びになります。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<header>
<div class="header-list">
<div class="header-logo">
<p>Test</p>
</div>
<div class="header-items">
<p class="header-item">プログラミング</p>
<p class="header-item">学べるレッスン</p>
<p class="header-item">お問い合わせ</p>
</div>
</div>
</header>
</body>
</html>
CSS
header{
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-list{
display: flex;
justify-content: start;
}
.header-logo{
font-size: 36px;
margin: 20px 40px;
}
.header-items{
display: flex;
justify-content: start;
}
.header-item{
margin: 33px 20px;
}