前編では、文字や背景のスタイル、要素の大きさや余白の調整方法について学びました。中編では、要素の横並びと、セレクタの使いこなしについて、さらに詳しく見ていきましょう。
4. 要素を横並びにしてみよう
HTML の要素は、ブロックレベル要素とインライン要素の 2 種類に分けられます。
- ブロックレベル要素：
<h1>～<h6>、<p>、<div>、<form>、<ul>、<ol>、<li>など。前後に改行が入り、親要素の幅いっぱいに広がります。高さや幅、上下外側の余白を指定することができます。 - インライン要素：
<span>、<a>、<img>、<strong>、<em>など。前後に改行は入らず、要素の幅は内容に合わせて伸縮します。高さや幅、上下外側の余白を指定することはできません（<img>は例外）。
デフォルトでは縦に並ぶブロックレベル要素を横並びにするには、いくつかの方法があります。ここでは、よく使う2つの方法を紹介します。
display: inline-block の便利な使い方
最も簡単な方法は、display プロパティを inline-block にすることです。inline-block を指定された要素は、インライン要素のように横並びに配置されつつ、ブロックレベル要素のように高さや幅、上下外側の余白を指定することができます。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Inline-block の例</title>
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">ボックス1</div>
<div class="box">ボックス2</div>
<div class="box">ボックス3</div>
</body>
</html>この例では、3 つの <div> 要素が inline-block によって横並びに配置されています。
Flexbox レイアウト入門 (display: flex)
Flexbox は、要素を柔軟に配置するためのレイアウトモジュールです。Flexbox を使うと、要素の横並びや縦並び、順序の変更、余白の調整などを簡単に行うことができます。
Flexbox を使うには、まず親要素に display: flex を指定します。これにより、親要素は Flex コンテナとなり、その中の子要素は Flex アイテムとなります。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Flexbox の例</title>
<style>
.container {
display: flex;
}
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box">ボックス1</div>
<div class="box">ボックス2</div>
<div class="box">ボックス3</div>
</div>
</body>
</html>この例では、<div class="container"> が Flex コンテナとなり、その中の 3 つの <div class="box"> が Flex アイテムとなっています。display: flex を指定するだけで、Flex アイテムが横並びに配置されます。
flex-direction で方向指定
flex-direction プロパティを使うと、Flex アイテムの並び方向を変更することができます。
css
.container {
display: flex;
flex-direction: row; /* 行方向（横並び）（デフォルト） */
}
.container {
display: flex;
flex-direction: column; /* 列方向（縦並び） */
}row：行方向（横並び）column：列方向（縦並び）row-reverse：行方向（逆順）column-reverse：列方向（逆順）
justify-content で主軸の揃え
justify-content プロパティを使うと、主軸（flex-direction で指定した方向）における Flex アイテムの揃え方を指定できます。
css
.container {
display: flex;
justify-content: flex-start; /* 主軸の先頭に揃える（デフォルト） */
}
.container {
display: flex;
justify-content: center; /* 主軸の中央に揃える */
}
.container {
display: flex;
justify-content: flex-end; /* 主軸の末尾に揃える */
}
.container {
display: flex;
justify-content: space-between; /* 均等配置（両端揃え） */
}
.container {
display: flex;
justify-content: space-around; /* 均等配置（両端に半分の余白） */
}flex-start：主軸の先頭に揃えるcenter：主軸の中央に揃えるflex-end：主軸の末尾に揃えるspace-between：均等配置（両端揃え）space-around：均等配置（両端に半分の余白）space-evenly：均等配置（両端含む）
align-items で交差軸の揃え
align-items プロパティを使うと、交差軸（flex-direction で指定した方向と垂直の方向）における Flex アイテムの揃え方を指定できます。
css
.container {
display: flex;
align-items: stretch; /* 交差軸方向に伸ばす（デフォルト） */
}
.container {
display: flex;
align-items: flex-start; /* 交差軸の先頭に揃える */
}
.container {
display: flex;
align-items: center; /* 交差軸の中央に揃える */
}
.container {
display: flex;
align-items: flex-end; /* 交差軸の末尾に揃える */
}stretch：交差軸方向に伸ばすflex-start：交差軸の先頭に揃えるcenter：交差軸の中央に揃えるflex-end：交差軸の末尾に揃えるbaseline：ベースラインで揃える
Grid レイアウト入門 (display: grid)
Grid レイアウトは、Flexbox と同様に、要素を柔軟に配置するためのレイアウトモジュールです。Flexbox が 1 次元（行方向または列方向）のレイアウトであるのに対し、Grid は 2 次元（行方向と列方向）のレイアウトを扱うことができます。
Grid レイアウトを使うには、まず親要素に display: grid を指定します。これにより、親要素は Grid コンテナとなり、その中の子要素は Grid アイテムとなります。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Grid の例</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}
.item {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>この例では、grid-template-columnsで列の幅を指定し、grid-template-rowsで行の幅を指定しています。frはグリッドで使用できる単位で、ここでは1fr 1fr 1frと指定しているので、各列の幅が均等になるようになっています。
強力なレイアウト！
このように、Gridを使うと、格子状のレイアウトが簡単に作成できます。Flexbox と Grid は、どちらも強力なレイアウトツールです。使いこなせるようになれば、複雑なレイアウトも簡単に実現できます。
5. セレクタを使いこなそう
セレクタとは、スタイルを適用する HTML 要素を指定するためのパターンです。これまで見てきた例では、タグ名や id 属性、class 属性を使ってセレクタを指定していましたが、それ以外にも様々なセレクタがあります。
タグで指定
タグ名を指定すると、そのタグが使われているすべての要素にスタイルが適用されます。
css
/* すべての <p> 要素の文字色を赤にする */
p {
color: red;
}id で指定
id 属性で指定すると、その id 属性値を持つ要素にスタイルが適用されます。id 属性値はページ内で一意である必要があります。
css
/* id="title" の要素の文字色を青にする */
#title {
color: blue;
}class で指定
class 属性で指定すると、その class 属性値を持つすべての要素にスタイルが適用されます。複数の要素に同じスタイルを適用したい場合に便利です。
css
/* class="highlight" の要素の背景色を黄色にする */
.highlight {
background-color: yellow;
}属性セレクタで指定
属性セレクタを使うと、特定の属性を持つ要素にスタイルを適用することができます。
css
/* href 属性が "https://example.com" の <a> 要素の文字色を緑にする */
a[href="https://example.com"] {
color: green;
}擬似クラスで状態を指定（:hover, :active, :focus など）
擬似クラスを使うと、要素の特定の状態（マウスオーバー、アクティブ、フォーカスなど）に対してスタイルを適用することができます。
css
/* マウスオーバーされた <a> 要素の文字色を赤にする */
a:hover {
color: red;
}
/* アクティブな <a> 要素の文字色を青にする */
a:active {
color: blue;
}
/* フォーカスされた <input> 要素の背景色を黄色にする */
input:focus {
background-color: yellow;
}擬似要素で要素の一部を指定（::before, ::after）
擬似要素を使うと、要素の前後にコンテンツを挿入したり、要素の一部分にスタイルを適用したりすることができます。
css
/* <p> 要素の前に ">>" を挿入する */
p::before {
content: ">>";
}
/* <p> 要素の後に "<<" を挿入する */
p::after {
content: "<<";
}子孫セレクタ、子セレクタ、隣接セレクタ
- 子孫セレクタ：ある要素に含まれるすべての要素にスタイルを適用します（例：
div pは<div>要素内のすべての<p>要素にスタイルを適用）。 - 子セレクタ：ある要素の直下にある要素にスタイルを適用します（例：
div > pは<div>要素の直下にある<p>要素にスタイルを適用）。 - 隣接セレクタ：ある要素の直後にある兄弟要素にスタイルを適用します（例：
h1 + pは<h1>要素の直後にある<p>要素にスタイルを適用）。
css
/* <div> 要素内のすべての <p> 要素の文字色を赤にする */
div p {
color: red;
}
/* <div> 要素の直下にある <p> 要素の文字色を青にする */
div > p {
color: blue;
}
/* <h1> 要素の直後にある <p> 要素の文字色を緑にする */
h1 + p {
color: green;
}